CODEWITHSUNDEEP
csswordpressmenunavigationsticky
peroxy
peroxy

Reputation: 117

Wordpress how to make sticky navigation menu / make the menu stick to the top all the time?

I am using Wordpress default theme Twenty Twelve, my website is: http://ninarakovec.com.

I would like to make my existing navigation menu stick to the top all the time whilst scrolling, for example like website called wpsites (can't post the link because of stackoverflow's link limit).

You can view the theme's CSS here: http://pastebin.com/muXyT6AY

How would I go on about doing this, I have no idea what to do, I currently have made it so you can click on the navigation bar and it takes you to that respective section on the page, but the menu doesn't stick to the top so it isn't what I wanted. Please help!

Upvotes: 0

Views: 7750

Answers (2)

prootex
prootex

Reputation: 39

This should work:

.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    background-color: lightblue;
    z-index: 1000;
}
.main-navigation ul.nav-menu {
    border: 0;
}

Upvotes: 1

Florin Pop
Florin Pop

Reputation: 5135

I think you have to change the .site-header class into this:

.site-header {
        padding: 24px 0;
        padding: 1.714285714rem 0;
        position:fixed;
        top:0;
        margin:0 auto;
}

Upvotes: 0

Related Questions