How to fix navigation menubar at the top of your WordPress blog [Code Explained]

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Now a days most WordPress blog have navigation menu fixed at the top. This helps visitors in easy accessing of menu since it remains fixed even when the page is scrolled down.

To make such a menu all we have to do is to first use the position: fixed CSS property and then shift menu at the topmost corner of the screen.

The Code

Copy and paste the code in style.css file of your WordPress theme.


#wrapper {
        margin: 0px auto;
        padding: 0px;
        width: 100%;
}

#header {
        background: black;
        margin: 0px auto;
        padding: 0px;
        position: fixed;
        width: 100%;
        z-index:1;
}

#branding {
        display: none;
}

#access {
        float: none;
}

Code Explained

In the code, we’re overriding the default styling of WordPress.

We’ve increased the width of div#wrapper and div#header to stretch menubar to the entire width of the screen. div#header is then fixed at the topmost position of the blog. It’ll remain fixed there even when the page is scrolled down.

One more important thing is we’ve hidden the div#branding which is the div containing header image that not many users desire to show being bulky.

Color of the menubar can be changed by altering the background color specified in div#header.

blog comments powered by Disqus