Keep the primary menu fixed at top of screen

  • Hello everyone !

    I have a problem with my website.
    I want to keep my primary menu fixed at top of screen, but I can’t find anything that work…

    I tried the following code

    @media all and (min-width: 800px) {

  .menu-primary {
    position: relative;
    transform: none;
    left: auto;
  }
  .menu-primary-items,
  .menu-unset ul {
    position: fixed;
    right: 5.55%;
	background: #222;
  }
}

    But I would like the entire top navigation bar to be fixed, including the logo of the website, etc… with a background.

    I also tried to keep the .site-title fixed at top of screen, but now I have 2 different element.

    I don’t know if it’s clear haha

    Thanks in advance for your help ??

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hey there,

    This CSS should work well for your site: 

    
@media all and (min-width: 50em) {
	
	.site-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: #222;
	}
	.main {
		margin-top: 149px;
	}
}

    Please copy & paste the code above into the “Additional CSS” section in the Customizer (Appearance > Customize), and it will take effect right away.

    And for anyone else who tries this snippet out – you may need to adjust the 149px value based on the height of your site’s header.

    Thread Starter unmeltmagazine

    (@unmeltmagazine)

    Thanks Ben, works perfectly ??

    I think that it would be difficult, but I can ask : is it possible to make the “secondary menu” disappear when we scrool down, and only display the primary menu ?

    Theme Author Ben Sibley

    (@bensibley)

    I’m afraid this isn’t possible without a much more complex customization. The entire header will need to be made sticky.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Keep the primary menu fixed at top of screen’ is closed to new replies.