Support Forums

Fixed header

Viewing 5 posts - 1 through 5 (of 5 total)
  • #17739
    PLSantaCroce
    Participant

    Hi folks,

    I am trying to make the header and the menu bar fixed, that is, prevent them from scrolling vertically.
    Can you guys help me with CSS syntax?
    I tried this in custom CSS but didn’t work (layout all messed up)

    #header {
    position: fixed;
    border-top:#111 3px solid;
    }

    The website I’m working on is http://www.pasticceria-lio.it/

    Any help appreciated 🙂

    #17751
    Daniel Tara
    Keymaster

    Try this code:

    #wrapper {
	margin-top: 204px;
}
#header {
	position: fixed;
	top: 0;
	z-index: 3;
	max-width: 1140px;
	width: 100%;
	background: #fff;
}
    #17758
    PLSantaCroce
    Participant

    Perfect, it worked like a charm!
    Thanks for taking the time to help out.

    PS: I modified the margin-top parameter to 172 because my header is narrower.

    #17790
    PLSantaCroce
    Participant

    I just realized that the layout gets messed up on tablets, probably because of the fixed margin-top, right? I don’t know if there is an easy solution…

    #17797
    Daniel Tara
    Keymaster

    Could you link to an example?

Viewing 5 posts - 1 through 5 (of 5 total)

Tagged: ,

You must be logged in to reply to this topic.

Useful Information

About Us

We craft beautiful free WordPress themes with advanced functionality. Our themes are licenced under GPL and completely free, which means you can use them in any way you like, whether it’s powering up your website, giving your blog a new look, using it for some other project or modifying and redistributing them.

Never miss another release!

Subscribe to our newsletter and we'll keep you updated with new theme releases and recommendations.