How I Made My Top Navigation Bar Float In 3 Seconds

Over the past few days I have run across numerous websites that incorporated a floating navigation bar. Basically, as you scroll from top to bottom on the website, the navigation bar/menu will always be visible across the top. Notice the navigation bar on my site “stays put” as you scroll. I was shocked to learn how fast this could be implemented via CSS. Here are the steps;

  1. Decide what you want to float. In my case I wanted the entire #header div to float along with the menu to include the black background.
  2. Add the following to the CSS of the element: position:fixed.
  3. Adjust spacing and margins accordingly to the elements around the “div”.

Post below your examples after using this tutorial :)

Need Help With WordPress? Check Out Our WordPress Support Website!

>>Wordpress Quick Tasks

 

 

 

 

Comments

  1. says

    Looks good Aaron.
    Powerful stuff the old CSS but I’ve got lazy using Genesis child themes – all done for you.

    Thanks for taking the time to remind me of position:fixed.

  2. Aaron James says

    @Zimbrul – great catch – I will have to create a browser detection script to fix that! I’ll let you know when I get it resolved. It does look fine on the iPad though! Thanks for stopping by!

  3. says

    Your site looks terrific! I really love the new full width firefighter photo you’ve put on the front page. I like doing the fixed nav menu too, and have done it for a few my own projects. If you want a quick fix to the iPhone problem maybe you could consider using an @media call in your css to specify the position not be fixed below a 480px breakpoint.

    • Aaron James says

      Hey Ria – I tried the following with out any luck…any ideas?

      @media only screen and (max-device-width: 480px) {
      #header {
      position: inherit;
      }
      }

  4. Aaron James says

    Hey Ria – thanks so much for the compliments and the @media call suggestion. I will give that a try first! The FF photo was taken of me approx. a month ago at a real incident. I owe the thanks to the on-scene photographer for that one! Thanks for stopping by!

    • says

      Hi Aaron. Either position ‘static’ or ‘relative’ should do the trick. :)

      @media only screen and (max-width: 480px) {

      #header {
      position:static;
      }

      }

  5. says

    Hi, I am trying to design the top navigation like your site. i.e. adding blog title and navbar on the same navigation bar. How did you managed to put the title and navigation in same row? Any pointers for that appreciated :)

    • says

      Yes. I am using Genesis framework. I did managed to get the navigation floating. Now only left with the site logo in the navigation bar. I wonder if you used custom menu link for that?

  6. Jeremy says

    Hi, I’m using a Genesis child theme and wondering exactly how to get my navigation bar to float! According to the previous commenters above, this functionality should be built into Genesis, but I’m not sure exactly how to enable it. Can someone give me some pointers please?! :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>