Make a nav bar stick

Question

Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick     HEADER      lt div class  headercss  gt            lt div class  headerlogo  gt            lt  div gt        lt  div gt            BODY         body           margin  0px          height  2000px                headercss           width  auto          height  320px          position  relative              headerlogo           width  auto          height  250px          position  relative              nav           width  auto          height  70px          position  relative          overflow  hidden             ul           list-style-type  none          margin  0          padding  0          float left          width 100           overflow  hidden              li           float  left          width 25           min-width  243px          overflow  hidden             a link  a visited           display  block          height  68px          min-width  243px          overflow  hidden             a hover  a active

User · Answer

You can do it with CSS only by creating your menu twice. It's not ideal but it gives you the opportunity have a different design for the menu once it's on top and you'll have nothing else than CSS, no jquery. Here is an example with DIV (you can of course change it to NAV if you prefer):

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

And then have the following CSS:

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

Here is a fiddle for you to see: https://jsfiddle.net/brghtk4z/1/

User · Answer

Just use z-index CSS property as described in the highest liked answer and the nav bar will stick to the top   Example    lt div class  navigation  gt    lt nav gt      lt ul gt       lt li gt Home lt  li gt       lt li gt Contact lt  li gt      lt  ul gt    lt  nav gt           navigation         fixed keyword is fine too       position  sticky     top  0     z-index  100        z-index works pretty much like a layer     the higher the z-index value  the greater    it will allow the navigation tag to stay on top    of other tags

User · Answer

x000D   x000D    document  ready function     x000D     x000D      window  scroll function      x000D          if you hard code  then use console x000D           log to determine when you want the  x000D          nav bar to stick    x000D        console log   window  scrollTop    x000D      if    window  scrollTop    gt  280    x000D            nav bar   addClass  navbar-fixed    x000D        x000D      if    window  scrollTop    lt  281    x000D            nav bar   removeClass  navbar-fixed    x000D        x000D        x000D      x000D  html  body   x000D   height  4000px  x000D    x000D   x000D   navbar-fixed   x000D      top  0  x000D      z-index  100  x000D    position  fixed  x000D      width  100   x000D    x000D   x000D   body div   x000D   top  0  x000D   position  relative  x000D      height  200px  x000D      background-color  green  x000D    x000D   x000D   banner   x000D   width  100   x000D   height  273px  x000D      background-color  gray  x000D   overflow  hidden  x000D    x000D   x000D   nav bar   x000D   border  0  x000D   background-color   202020  x000D   border-radius  0px  x000D   margin-bottom  0  x000D      height  30px  x000D    x000D   x000D   nav links   x000D      margin  0  x000D    x000D   x000D   nav links li   x000D   display  inline-block  x000D      margin-top  4px  x000D    x000D   nav links li a   x000D   padding  0 15 5px  x000D   color   3498db  x000D   text-decoration  none  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  banner  gt  x000D        lt h2 gt put what you want here lt  h2 gt  x000D        lt p gt just adjust javascript size to match this window lt  p gt  x000D     lt  div gt  x000D   x000D     lt nav id  nav bar  gt  x000D       lt ul class  nav links  gt  x000D         lt li gt  lt a href  url  gt Nav Bar lt  a gt  lt  li gt  x000D         lt li gt  lt a href  url  gt Sign In lt  a gt  lt  li gt  x000D         lt li gt  lt a href  url  gt Blog lt  a gt  lt  li gt  x000D         lt li gt  lt a href  url  gt About lt  a gt  lt  li gt  x000D       lt  ul gt  x000D     lt  nav gt  x000D   lt div id  body div  gt  x000D       lt p style  margin  0  padding-top  50px   gt and more stuff to continue scrolling here lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

CSS    headercss       width  100       height  320px      background-color   000000      position  fixed      Attribute position  fixed will keep it stuck  while other content will be scrollable  Don t forget to set width 100  to make it fill fully to the right   Example

User · Answer

I would recommend to use Bootstrap  http   getbootstrap com   This approach is very straight-forward and light weight    lt div class  navbar navbar-inverse navbar-fixed-top  gt      lt div class  container  gt         lt div class  navbar-collapse collapse  gt            lt ul class  nav navbar-nav navbar-fixed-top  gt               lt li gt  lt a href   home  gt   lt br gt BLINK lt  a gt  lt  li gt                   lt li gt  lt a href   news  gt  lt br gt ADVERTISING WITH BLINK lt  a gt  lt  li gt                   lt li gt  lt a href   contact  gt  lt br gt EDUCATING WITH BLINK lt  a gt  lt  li gt                   lt li gt  lt a href   about  gt  lt br gt ABOUT US lt  a gt  lt  li gt               lt  ul gt           lt  div gt       lt  div gt   lt  div gt    You need to include the Bootstrap into your project  which will include the necessary scripts and styles  Then just call the class  navbar-fixed-top   This will do the trick  See above example

User · Answer

Add css in your style       sticky-header       position  fixed      width  100       left  0      top  0      z-index  100      border-top  0      transition  0 3s         and use this javascript code        document  ready function          window  scroll function          if    window  scrollTop    gt                headercss   addClass  sticky-header          else            headercss   removeClass  sticky-header

User · Answer

To make header sticky  first you have to give position  fixed  for header in css  Then you can adjust width and height etc  I would highly recommand to follow this article  How to create a sticky website header  Here is code as well to work around on header to make it sticky   header       position  fixed      right  0      left  0      z-index  999      This code above will go inside your styles css file

User · Answer

add to your  nav css block the  position  fixed   and it will work

User · Answer

Give headercss position fixed    headercss       width  100       height  320px      background-color   000000      position  fixed      top 0     Then give the content container a 320px padding-top  so it doesn t get behind the header

User · Answer

Just Call this code and call it to your nave bar for sticky navbar     sticky             css for  stickey navbar           position  sticky          top  0           z-index  100

User · Answer

I hope this can help someone  Determine the nav offset through js and then apply sticky position css to nav   But first  we will define the styles in the stylesheet  like so    sticky       position  fixed      width  100       left  0      top  0      z-index  100      border-top  0      Then  we will apply that class to the navigation conditionally with jQuery     document  ready function       var stickyNavTop       nav   offset   top     var stickyNav   function        var scrollTop     window  scrollTop         if  scrollTop  gt  stickyNavTop               nav   addClass  sticky          else             nav   removeClass  sticky                   stickyNav         window  scroll function         stickyNav

[html] Make a nav bar stick

Examples related to html

Examples related to css

Examples related to scroll

Examples related to nav

Examples related to sticky