How To Remove Sticky Menu In Twenty Seventeen, And Make It UnSticky

The default main menu in Twenty Seventeen sticks to the top of the page after the header scrolls off the top of the page. The sticky behaviour can be removed, and the menu can be made to move off the top of the page.

The default sticky main menu.

The sticky main menu removed, and made unsticky.

Where and how to make the menu main not sticky:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

The CSS code:

.site-navigation-fixed.navigation-top {
	/* bottom: auto; */
	position: relative;
	/* left: 0; */
	/* right: 0; */
	/* top: 0; */
	/* width: 100%; */
	/* z-index: 7; */
}

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.

Posted

March 6, 2017

Blog Posts

Bharat Karavadra

Tags:

twentyseventeen, wordpress

Comments

11 responses to “How To Remove Sticky Menu In Twenty Seventeen, And Make It UnSticky”

andries

March 2, 2019

sorry, I copied incorrectly

Reply
1. Bharat Karavadra
  
  March 2, 2019
  
  Hello Andries,
  I’m glad you got it to work.
  
  Reply
Andries

March 1, 2019

Hi
My system complain about the : in
position: relative;
It says unexpected RBRACKET

Reply
joe

July 20, 2017

Hello, This didn’t seem to work for me. I would like to remove the navigation bar completely since my site only needs one page at the moment. I pasted the code to the css and nothing changed. I also tried adding it through the customization option in the dashboard.

Reply
1. Bharat Karavadra
  
  July 20, 2017
  
  Joe,
  I just put the code into the CSS of the customizer and it works — the menu scrolls off the top of the page.
  The CSS has not been created to remove the menu completely, but to allow it to scroll off the top of the page with the header.
  
  Reply
Matthew

March 6, 2017

Hello,

Thank you for your insights.

I would love if you could make a post on how to move site title and logo from over sticky menu to the menu itself on twenty seventeen – like on this blog.

Best regards,
Matthew

Reply
1. Bharat Karavadra
  
  March 6, 2017
  
  Hello Matthew, that would perhaps require a total rewrite of the header, logo, title and description code which would be very complex and perhaps another theme with a suitable header and logo may be better and more cost and time effective solution. This site uses the theme here https://karavadra.net/salienttheme which is $60 and has many more features.
  
  Reply
  1. Matthew
    
    March 8, 2017
    
    Thankfully – no. After some research and try outs I was able to do it via simple css styling right in twenty seventeen :)
    
    Reply
    1. Bharat Karavadra
      
      March 8, 2017
      
      Excellent… it must have been a lesser customisation than I was thinking. Could you kindly share it here so that other people can use it?
      
      Reply
      1. Matthew
        
        March 8, 2017
        
        Sure! But i think best help must be a link to someone elses blog (if that is ok with you – if not, you can write about it on yours): http://www.beginwp.com/how-to-add-icons-to-navigation-menus-in-wordpress/
        
        Reply
        
        Bharat Karavadra
        
        March 8, 2017
        
        Thank you Matthew,
        On looking at the link, the solution is simpler than what I was thinking you wanted. I may have misread your original request and can only apologise. You have implemented it well on your site. I will leave the link here for others to use and if there are any implementation issues then I can write a separate tutorial on this site for it.
        
        Reply