13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

Fixed Navigation Bar on Browser's Top using CSS

by biznics
7 replies
  • WEB DESIGN
    • |
Hi all,

I was wondering how can I fix my website navigation like this website here: "article writing servicess * com" (not my site). Remove * and spaces.

The thing I need is that when a user scroll down to the page, they should still be able to see the Main Navigation Bar FIXED on their browser's top side.

Hope many of you have seen sites with this features. I've also attached a layout of how my page looks.

Thanks in advance...
#bar #browser #css #fixed #navigation #top
  • Profile picture of the author Designs1
    CODE Tips #1: How to Create Fixed Navigation

    Try to follow this tutorial
    Signature
    [WSO DESIGN] Stunning :: Professional :: Beautiful - WSO SALES PAGES | ECOVERS | BANNERS | HEADERS - Must See!
    {{ DiscussionBoard.errors[7590431].message }}
    • Profile picture of the author biznics
      Many thanks mate. It really helped.

      However, one issue. When I used a Navbar in the middle (as in my attachment), the whole NavBar was messed after I implemented the code for the Fixed bar.

      Any thoughts on that?

      OR, I am guessing that should I keep the MainBar WITHIN the HeaderTag to keep all of it FIXED while visitor scroll.

      Good day,
      {{ DiscussionBoard.errors[7612746].message }}
  • Profile picture of the author David V
    Would have to see what you did (live site), however whatever you keep fixed (generally) will remain static but everything else will scroll. If your fixing a menu div inside a header div it could be the issue.
    Here's an example of a menu that becomes static/sticky/fixed after scrolling.(very well done)
    Not a how to, but you can browse the source code/css and see how it was done.
    {{ DiscussionBoard.errors[7612850].message }}
    • Profile picture of the author biznics
      Originally Posted by David V View Post

      Would have to see what you did (live site), however whatever you keep fixed (generally) will remain static but everything else will scroll. If your fixing a menu div inside a header div it could be the issue.
      Here's an example of a menu that becomes static/sticky/fixed after scrolling.(very well done)
      Not a how to, but you can browse the source code/css and see how it was done.

      Exactly...Like in this example page, the "second menu" (with links: Boxes | Banners | Mastheads... etc.), this menu MOVES to the TOP of the browser and then gets fixed. Whereas, when I fixed the menu, it is fixed in the same current position as it is (before scrolling), leaving the upper space of the header blank; while scrolling... Image attached.
      {{ DiscussionBoard.errors[7614387].message }}
      • Profile picture of the author David V
        Originally Posted by biznics View Post

        ....it is fixed in the same current position as it is (before scrolling), leaving the upper space of the header blank; while scrolling... Image attached.
        It's going to take a little clever coding, not complicated, but more then could be explained here.

        You'll need to scroll to a certain point (closing the gap), then it turns static.

        Here's a tutorial link that could really help you out. Make sure to read the comments area as well for additional issues and/or solutions.
        There are turnkey solutions for this at codecanyon.net if you do a little searching over there.
        {{ DiscussionBoard.errors[7615316].message }}
  • Profile picture of the author innozemec
    you might take a look at Wordpress, the admin bar there is exactly what you need..
    Signature
    INDEXIFICATION.COM - Get 1.5 Million Links a month Crawled & Indexed!

    SERPEXPLORER.COM - 100% Accurate Search Engine & Youtube Rank Tracker!
    {{ DiscussionBoard.errors[7614544].message }}
  • Profile picture of the author BerlinSianipar
    You'll have to add some jQuery code to make your navbar scroll then fixed when it reach the top of your page. Just google: 'how to fixed div after scroll to top' or some other keywords like that. I found some good tutorial and succesfully built one using those tutorials.
    {{ DiscussionBoard.errors[7619905].message }}

Trending Topics