DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.

Navigation Bar floats invisibly with scroll and blocks top half of web page

Sort:
You are not authorized to post a reply.
Page 1 of 212 > >>





New Around Here





    Hello,

    So I am a self-taught beginner with CSS, but am charged with updating my school's website. We use DNN v. 09.01.01 (129). Ever since I took over, when I scroll down, the navigation/menu bar disappears from view, but it hides on the top of the page invisibly. HOWEVER, the navbar links are still active, so when you try to click on links on the page, it starts opening some of the navbar links. How do I fix the navigation bar so it either stays visible, or how do I fix it to the top so it doesn't follow the scroll and block content?

    Here is our website: https://www.venturausd.or...uena/HOME.aspx 

    Thank you SO MUCH for any help you can offer! I've done some research but can't quite seem to pin down a solution for this problem, based on my limited knowledge. 

    -Kevin






    New Around Here





      Here is the code that I find when I click on "Settings" and "Custom CSS." It has been built by people who no longer work with us, and I am not confident to know what is not needed

       

      .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}
       
      .clearfix {display: inline-block;}
      /* Hides from IE-mac \*/
      * html .clearfix { height: 1%;}
      .clearfix {display: block;}
      /* End hide from IE-mac */
       
      .clear { clear:both;}
      .left { float:left;}
      .right { float:right;}
      .img-left {float: left; margin-right: 10px;}
      .img-right {float: right; margin-left: 10px;}
      .dnnsprite { background-image: url('images/AsideIcons.png'); background-color: transparent; background-repeat: no-repeat; }
      .Community { background-position: -249px -5px; }
      .Conferences { background-position: -188px -5px; }
      .Manuals { background-position: -127px -5px; }
      .Marketplace { background-position: -66px -5px; }
      .Training { background-position: -5px -5px; }
       
      ul.RotatorNav { margin:-74px 0 0 0;}
      ul.RotatorNav li {margin:0;list-style:none;}
       
      ul.sidebar-nav li { list-style-type: none;}
      ul.sidebar-nav li ul li { padding-left: 20px;}

      /* Getting Started content */
      .getting-started-wrap .left { width: 116px; padding-top:20px;}
      .getting-started-wrap .right { width:500px;}
      a#TourStart img, a#TourVideo img { margin: 3px 3px 3px -10px; vertical-align: middle;}
      #dnnTourContainer { display:none; }
      hr.tour { border-style: solid; border-top-width: 0; color: #ccc; margin-top: 1em; }
       
      #Footer #dnn_Footer_LeftPane {float: left;margin: 0 20px 0 0;width: 430px;}
      #Footer #dnn_Footer_RightPane {float: left;width: 510px;}
       
      #Sponsors img{width:118px;height:58px;border:solid 1px #000;margin:0 7px 7px 0;background:url(images/Logos.jpg) no-repeat;}
      #Sponsors .aspnet img{background-position:0 0;}
      #Sponsors .maxasp img{background-position:-118px 0;}
      #Sponsors .telerik img{background-position:-236px 0;}
      #Sponsors .exacttarget img{background-position:-354px 0;}
      #Sponsors .winlive img{background-position: 0 -58px;}
      #Sponsors .redgate img{background-position: -118px -58px;}
      #Sponsors .appliedi img{background-position: -236px -58px;}
      #Sponsors .arrowdesign img{background-position: -354px -58px;}
       
      /* Quick Links */
      .tblQuickLinks { width:100%; }
      .tblQuickLinks td { line-height:22px; }
      .tblQuickLinks a:link, .tblQuickLinks a:active, .tblQuickLinks a:visited{ text-decoration:underline; color:#e5e5e5; }
      .tblQuickLinks a:hover {color:#d0171e;}
       
      /* ------    Awesome Cyles site styles    ------ */
      /* footer */
      .left-footer { width:48%; float:left;}
      .right-footer { width:48%; float:right;}

      /* Home page */
      /* Our entire Header includes the site logo and the navigation bar - I don't know how to disconnect the two - it could be a skin issue, a container issue, or a layout issue*/
      /* Header Banner*/
      .bannerShadow { padding-bottom: 5px; background:url(/Portals/0/images/Slide-Shadow.png) no-repeat 0 bottom;}
                      .header-banner { background-image: url("/Portals/0/images/header-bg.jpg"); background-repeat: repeat-x; background-color:#830c11; min-height:200px; color:#FFF;}
                                      .header-banner .header-banner-image { float:left; width:280px; margin-left:50px; padding-top:13px;}
                                      .header-banner .header-banner-text { float:right; width:550px; margin-right:55px;}
                                                      .header-banner .header-banner-text { font-size:16px; line-height:19px; padding-top:10px;}
                                                      .header-banner .header-banner-text h2 { font-size:36px; text-transform:uppercase;}
                                                      .header-banner .header-banner-text .header-read-more { font-size:14px; text-align:right;}
                                                      .header-banner .header-banner-text .header-read-more a { color:#FFF;}

      /* services columns */
      .home-services div { width:190px; margin-right:20px; float:left;}
      .home-services div.last { margin-right:0;}
       
      /*  home page sidebar styles*/
      #RightLinks .last { background:none;}
      #RightLinks li.icoAbout img { background-image: url("images/bike-about-icon.png"); background-repeat: no-repeat;}
      #RightLinks li.icoBike img { background-image: url("images/bike-icon.png"); background-repeat: no-repeat;}
      #RightLinks li.icoNews img { background-image: url("images/bike-news-icon.png"); background-repeat: no-repeat;}
       
      /* Subpage sidebar navigation on */
      .Normal ul.sidebar-nav li { line-height:200%;}
      .c_DNN6_Aside h3 { padding:0; margin:0; line-height:200%;}
       
      /* Things Tony Added */
       
      A:link {
      COLOR: black;
      TEXT-DECORATION: none;
      font-weight: normal
      }
       
      A:visited {
      COLOR: black;
      TEXT-DECORATION: none;
      font-weight: normal
      }
       
      A:active {
      COLOR: black;
      TEXT-DECORATION: none
      font-weight: normal
      }
       
      A:hover {
      COLOR: blue;
      TEXT-DECORATION: none;
      font-weight: none
      }

      /* Things Kevin Might have Added */

      #threecolumn {
          -webkit-column-count: 3; /* Chrome, Safari, Opera */
          -moz-column-count: 3; /* Firefox */
          column-count: 3;
      }

      /* Things Kevin Definitely Added */
      * {
          -webkit-overflow-scrolling: touch;
      }​

      .video-container {
          position:relative;
          padding-bottom:56.25%;
          padding-top:30px;
          height:0;
          overflow:hidden;
      }

      .video-container iframe, .video-container object, .video-container embed {
          position:absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
      }
       






      Veteran Member





        Hi Kevin,

        Love to help but not sure what your problem is (must be me on a Friday morning...).
        If you scroll down, the menu scrolls up as well. So, that I get. But the part "the navbar links are still active, so when you try to click on links on the page, it starts opening some of the navbar links" I don't understand.

        Having said that: if you want a sticky menu, you need some js included in your theme. More on this on https://www.w3schools.com...js_sticky_header.asp

        If you want to start from scratch, you can either start with the default theme Xcillion or https://www.nvquicktheme.com/ that we used ase a base for this site.
        Tjep's digital agencyRegards,
        Tycho de Waard

        Tjep's digital agency
        We just love DNN
        https://www.tjeps.com





        Veteran Member





          BTW: You're running a version that is quite old and has several security issues. I recommend you to upgrade to a recent version. At this point in time: 9.6.1 for instance as 9.7.0/2 has some site alias issues. The next version will resolve this

          Re:
          /* Our entire Header includes the site logo and the navigation bar - I don't know how to disconnect the two - it could be a skin issue, a container issue, or a layout issue*/

          the site logo and the nav bar are 'skin objects'. You can find them in the default.ascx or in a header.ascx if that is a seperate file. Because it is a skin object, you can manage the contents using the UI and change the logo without having to change the html/ascx
          Tjep's digital agencyRegards,
          Tycho de Waard

          Tjep's digital agency
          We just love DNN
          https://www.tjeps.com





          Veteran Member





            I don't see invisible links as you have described. To me, it looks like the header and navigate really is moving off the screen when I scroll down. Does this happen only when you are logged in, or when you aren't?

            I can't tell what theme/skin you are using, but I do see that you are using EasyDNN modules. Is the theme also EasyDNN like the venturausd site?

            I also see a Google Translate dropdown for language selection. I found that once I switched to Spanish, there was no dropdown option to get back to English. I had to get into the browser and delete cookies to switch back.

            I assume that you are using Google Translate to translate the on screen text.

            If you decide to upgrade, be advised of important "breaking changes" beyond 9.2 (and, actually there may be breaking changes there as well). Make sure that you check release notes all the way from 9.1.1.

            You will need to update modules. If you are using DNN "core" modules, you will find updated version on GitHub. If you are using commercial modules, you should check with the vendors to see which versions you will need.

            -------------------------------------------
            Ah, for a while there I got to the venturausd.org site and that one does have a menu and scrolling behaviour that works. These comments are about that site.
            Joe Craig
            DNN MVP
            Patapsco Research Group





            New Around Here





              Hi Kevin,

              There's another Header (class .fixed-menu) down at the bottom (after Footer), this is your actual issue.
              Because it only set the Opacity: 0, it will always block the content.
              You'll need to remove it, or set the "display : none".
              Erwin
              awesome dnn





              Veteran Member





                Good catch, Erwin!
                Tjep's digital agencyRegards,
                Tycho de Waard

                Tjep's digital agency
                We just love DNN
                https://www.tjeps.com





                New Around Here





                  Hello,

                  How do I change that? When I scroll all the way down, I don’t see any option to edit the very bottom of the home page. I also don’t see anything in the custom CSS in the site settings that refers to “opacity.”

                  Thanks for all of your help!

                  For the other people, after scrolling down a bit on the home page, it is “like” the menu bar is still there, even though you can’t see it, and if you click near the top of the page (again, after scrolling for a bit), it will often click to open of the hyperlinks form the navigation bar.

                  I don’t think I have access to edit the dixit theme, or else I can’t find where to access and edit it. I really don’t want to break anything, it would just be nice to not have these phantom links when people click near the top of the page after scrolling down a bit.





                  New Around Here





                    Would anyone be willing to Zoom call with me and walk me through what to do as I share my screen? I’m not sure if this is abnormal or inappropriate for this setting, but I am at a loss.





                    New Around Here





                      You need to edit the Skin file to remove the Header.
                      The skin should be on Folder /Portals/_default/skins/dixit/[Skin name].ascx

                      But for a quick fix (to hide the menu), just go to Settings > Custom Css and add this line of code :
                      .fixed-menu {
                        display: none !important;
                      }

                      Sent me direct message if you still need a hand.

                      Erwin
                      awesome dnn
                      You are not authorized to post a reply.
                      Page 1 of 212 > >>

                      These Forums are dedicated to the discussion of DNN Platform.

                      For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

                      1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy
                      2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
                      3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
                      4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
                      5. No Flaming or Trolling.
                      6. No Profanity, Racism, or Prejudice.
                      7. Site Moderators have the final word on approving / removing a thread or post or comment.
                      8. English language posting only, please.

                      Would you like to help us?

                      Awesome! Simply post in the forums using the link below and we'll get you started.

                      Get Involved