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


Tags: css,wordpress,menu,navigation,sticky

Problem :

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!



Solution :

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;
}

    CSS Howto..

    How do I position this image using CSS so it overlaps a div but displays inline?

    How to change the arrow color of ' select' in a form with CSS [duplicate]

    How do you right-align text into a column?

    Does anyone know how to getr this background effect with css?

    how can i use css selector to give style only to a first div between two divs of the same kind?

    how to display div one by one using css

    How to use a lower resolution image for mobile?

    How to include css file in a JavaFx Spring application

    How can i make each div look like seperate block?

    jquery style sheet switcher - how to effect only theme css?

    Hide/Show Content at Specific Scroll Positions

    How can I make make css transition happen when applying width through javascript

    How to make the div's appear inline in the following code?

    How to create fluid trapezoid image with css?

    How to style Repeater item background color ontap?

    How to fix side bar and header using CSS for JS & jQuery Scroller

    How do I implement responsive design into my CSS when I have two spans, side by side?

    How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

    Including loads of css files and Javascript file - how do I optimize

    How to create a completely flexible piano keyboard with HTML and CSS

    How to vertically and horizontally center two images inside a div on a responsive page

    How do I add curved corners to menu in css

    How to “reset” style in view page, set in css file

    How to append() an element and set its style with css() at the same time with jQuery

    less: how to import multiple css?

    How to make box light up in navigation bar - CSS

    CSS: How does youtube change its appearance based on screen size?

    How do I customise the style of the Auth0 lock control?

    How to preserve sibling element position when one sibling is absolutely positioned?

    How to make a img flicker using css(should work in all browsers)