CODEWITHSUNDEEP
csshtml
user1693026
user1693026

Reputation: 117

Nav Bar at Top using CSS

I want to get my nav bar to stick at the top when scrolling on the web page.

I have tried searching on here for a solution but am struggling as it is causing more errors.

When using position:fixed, I find that it causes issues with the original postion which I want to be below my banner logo.

My code for HTML and CSS is below.

Thank you

/* ******************* */
/* Navigiation         */
/* ******************* */

#sitenav a {
    text-decoration: none;
    color: white;
    padding: inherit;
    
}

#sitenav ul {
    background: black;
    padding: 15px;
}
#sitenav ul li {
    
    padding: 15px;
    background: black;
    display: block;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    display: inline;
}

#sitenav ul li:hover {
    background: rgb(43, 78, 89);
    color:white;
    cursor:pointer;
}
<header class="clearfix">
   <div id="banner" class="middlecontent">
       <a href="index.html"><img  src="images/logobanner.png"></a>
   </div>
   <nav>
        <div  id="sitenav">
            <ul >
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Curriculum</a></li>
                <li><a href="about_us.html">About</a></li>
                <li><a href="#">Student</a></li>
                <li><a href="#">Staff</a></li>
            </ul>
        </div>
    </nav>
</header>

Upvotes: 0

Views: 96

Answers (3)

Varsha Khatri
Varsha Khatri

Reputation: 161

You should try this code.

 $(window).ready(function() {
        var header = $('nav').innerHeight();
        var window_scroll = $(window).scrollTop();
        if (window_scroll >= header) $("nav").addClass("sticky");
        else $("header").removeClass("nav");
    })
    $(window).on("scroll", function() {
        var header = $('nav').innerHeight();
        var scroll = $(window).scrollTop();
        if (scroll >= header) $("nav").addClass("sticky");
        else $("nav").removeClass("sticky");
    });
nav{
  position:absolute;
  width:100%;
  height:50px;
  top:0;
  left:0;
}
nav.sticky{
  position:fixed;
  width:100%;
  z-index:99;
  top:0;
  left:0;
}
#sitenav a {
    text-decoration: none;
    color: white;
    padding: inherit;
    
}

#sitenav ul {
    background: black;
    padding: 15px;
}
#sitenav ul li {
    
    padding: 15px;
    background: black;
    display: block;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    display: inline;
}

#sitenav ul li:hover {
    background: rgb(43, 78, 89);
    color:white;
    cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="clearfix">
   <div id="banner" class="middlecontent">
       <a href="index.html"><img  src="images/logobanner.png"></a>
   </div>
   <nav>
        <div id="sitenav">
            <ul >
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Curriculum</a></li>
                <li><a href="about_us.html">About</a></li>
                <li><a href="#">Student</a></li>
                <li><a href="#">Staff</a></li>
            </ul>
        </div>
    </nav>
</header>              
</body>
</html>

Upvotes: 1

ankita patel
ankita patel

Reputation: 4251

Please try this I have added some code.

JQuery:

$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    if (scroll >= ($("header").height())) {
        $("#sitenav").addClass("fix-header");
    } else {
        $("#sitenav").removeClass("fix-header");
    }
});

Css:

body{
  margin:0;
}
section{
  background:#ccc;
  height:800px;
}
#sitenav.fix-header {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  margin:0;
}
#sitenav.fix-header ul{
  margin:0; 
}


$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    if (scroll >= ($("header").height())) {
        $("#sitenav").addClass("fix-header");
    } else {
        $("#sitenav").removeClass("fix-header");
    }
});
/* ******************* */
/* Navigiation         */
/* ******************* */

#sitenav a {
  text-decoration: none;
  color: white;
  padding: inherit;    
}

#sitenav ul {
  background: black;
  padding: 15px;
}
#sitenav ul li {    
  padding: 15px;
  background: black;
  display: block;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  display: inline;
}

#sitenav ul li:hover {
  background: rgb(43, 78, 89);
  color:white;
  cursor:pointer;
}
body{
  margin:0;
}
section{
  background:#ccc;
  height:1000px;
}
#sitenav.fix-header {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  margin:0;
}
#sitenav.fix-header ul{
  margin:0; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
 <div id="banner" class="middlecontent">
   <a href="index.html"><img  src="images/logobanner.png"></a>
 </div>
 <nav>
    <div id="sitenav">
      <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Events</a></li>
          <li><a href="#">Curriculum</a></li>
          <li><a href="about_us.html">About</a></li>
          <li><a href="#">Student</a></li>
          <li><a href="#">Staff</a></li>
      </ul>
    </div>
  </nav>
</header>
<!--this for demo for checking scroll-->
<section>

</section>

Upvotes: 2

cvgore
cvgore

Reputation: 51

If you don't need to support older browsers, you can use position: sticky
https://developer.mozilla.org/pl/docs/Web/CSS/position#Sticky_positioning

Upvotes: 3

Related Questions