Jump to content
wattle40802

W3.CSS fixed-top (dynamic) navigation bar problem

Recommended Posts

I am trying to find a solution to a problem that I have encountered while trying to get a fixed-top navigation menu to work dynamically in W3.CSS. By dynamically, I mean that the horizontally-orientated navigation bar should remain in its place under the page title and image until the page is scrolled downwards and reaches the top of the viewport. At this point, it should fix itself to the top of the screen.

I have been able to achieve this effect using my own html/css and jquery script but this method doesn’t work as intended with W3.CSS. I have been moving my websites over to W3.CSS as I as a means of making them responsive and also because css is not my strong point and I like the W3.CSS structure.

The menu bar operates as it should when it is in its static mode but, when it is fixed, which involves position:absolute and a z-index of 1, the dropdown menus no longer appear above the bar but are concealed within it. I have tried altering the z-index values of the dropdown-hover and dropdown-content elements but cannot find a solution to this problem. If there is anyone who can, I would be very grateful.

The html code below is based closely on the “Navigation Bar with Dropdown” example taken from the W3.CSS Navigation Bars page. I also include the css used to fix the bar and the jquery function to call the css once the top of the screen is reached.

HTML
<div id=”container”>
<div id=”header”></div>
<img id="header_image" src="titleimage.jpg" alt="Header Image" class="header_image"/>
<img id="header_image_m" src="title_image_m.jpg" alt="Header Image" class="header_image"/>
<div id=”nav_bar_container>
<div id=”nav_bar class="w3-bar w3-light-grey">
  <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
  <div class="w3-dropdown-hover">
    <button class="w3-button">Dropdown</button>
    <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-mobile">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
  </div>
</div>
</div>
  


 

 

 CSS
  #nav_bar_container, #nav_bar{
margin:0;
padding:0;
width:100%;
max-width:948px;
}
.nav_bar_fixed {
position:fixed;
top:0px;
z-index:1;
}
  
Jquery
  if ($( window ).width() > 600) {

$(window).scroll(function() {    
	
        var fixedBar = $('#nav_bar'),
            targetScroll = $('#nav_bar_container').position().top,
            currentScroll = $('html').scrollTop() || $('body').scrollTop();
    
        fixedBar.toggleClass('nav_bar_fixed', currentScroll >= targetScroll);
    });
	
}

 

Share this post


Link to post
Share on other sites

Thank you to Sunamena for suggesting Bootstrap "Affix" which does achieve the effect that I am looking for. As I have gone down the W3.CSS route, though, I would prefer not to mix Bootstrap code so I have persisted with trying to solve the matter another way. I have now managed to do so simply by enclosing the nav bar div (id="nav_bar") in another div and fixing this "nav subcontainer" , rather than "nav_bar"  when the page is scrolled down and it reaches the top of the viewport. I have tested this arrangement across a number of browsers and it works fine. Maybe w3.schools could include this as a variant of their w3-top (or w3-bottom) class with a suggested name of "w3-top-sticky"?

Share this post


Link to post
Share on other sites

Your current nav code, is unreadable to css selector and JavaScript, because you have not properly added a closing quote to id reference, and most important of all, some element are using slanted quotes instead of the normal " on element class and id references.

Share this post


Link to post
Share on other sites

You just need to apply w3-top when required, you would be just duplicating a style.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

        <style type="text/css">
            CSS
            #nav_bar_container, #nav_bar{
                margin:0;
                padding:0;
                width:100%;
                max-width:948px;
            }

            /*.nav_bar_fixed {
                position:fixed;
                top:0px;
                z-index:1;
            }*/

            #nav_bar_container, #nav_bar{overflow-y: visible;}
            @media only screen and (max-width: 600px) {
                .w3-dropdown-content .w3-bar-item.w3-button { padding-left: 30px;

                }
                #nav_bar_container {box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19)}
                .w3-dropdown-content {position: relative;}
                .w3-dropdown-hover .w3-button i {float: right;}
                .w3-dropdown-hover, .w3-dropdown-hover .w3-button  {width: 100%;}
                .w3-dropdown-hover .w3-button i.fa.fa-angle-double-right {float: left;padding-right: 12px;line-height: 25px;}
            }

        </style>
    </head>
    <body>
        <div id="container">
            <div id="header"></div>
            <img id="header_image" src="http://content.invisioncic.com/r49260/monthly_2017_03/w3schools.png.9a860c675c07154b1ec49276a2a69658.png" alt="Header Image" class="header_image"/>
            <img id="header_image_m" src="http://content.invisioncic.com/r49260/monthly_2017_03/w3schools.png.9a860c675c07154b1ec49276a2a69658.png" alt="Header Image" class="header_image"/>
            <div id="nav_bar_container">
                <div id="nav_bar" class="w3-bar w3-light-grey">
                    <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
                    <a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
                    <div class="w3-dropdown-hover">
                        <button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
                        <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-mobile">
                            <a href="#" class="w3-bar-item w3-button"><i class="fa fa-angle-double-right"> </i> Link 1</a>
                            <a href="#" class="w3-bar-item w3-button"><i class="fa fa-angle-double-right"> </i> Link 2</a>
                            <a href="#" class="w3-bar-item w3-button"><i class="fa fa-angle-double-right"> </i> Link 3</a>
                        </div>
                    </div>
                </div>
            </div>
            <div>

                <p>
                    !st line Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
                </p>



            </div>
        </div>
        <script type="text/javascript">

            $(window).scroll(function() {
                var fixedBar = $('#nav_bar_container');

                targetScroll = $('#nav_bar_container').position().top,
                        currentScroll = $('html').scrollTop() || $('body').scrollTop();

                if (currentScroll > targetScroll) {

                    fixedBar.addClass('w3-top');

                }
                else {
                    fixedBar.removeClass('w3-top');
                }



            });


        </script>


    </body>
</html>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×