How To Make The Menu Fit The Full Width Of The Screen In Twenty Seventeen

Written by

The default Twenty Seventeen main navigation menu uses less than the full width of the screen and is the same width content area and sidebar, especially on a laptop or computer screen. The total width of the navigation menu can be made the full width of the screen.

The default width of the main navigation menu.

The main navigation menu made full width of the screen.

The full-width appearance should work throughout the site (e.g. single pages, single post & blog archives).

Where and how to make the menu width full screen:

In WordPress Admin > Appearance > Edit CSS.

Enter the CSS code below.

The two lines of code created the full-width effect for both mobile and computer screens.

The CSS code:

.navigation-top .wrap {
    max-width: 100%;
    /* padding: 0; */
}


@media screen and (min-width: 48em) {
.navigation-top .wrap {
    max-width: 100%;
    /* padding: 0.75em 3.4166666666667em; */
}
}

Comments

26 responses to “How To Make The Menu Fit The Full Width Of The Screen In Twenty Seventeen”

June 21, 2021

Amina

Another sidenote, if you make the menu fully wide, it moves to the left on desktop. When you add padding-left, the mobile version becomes narrow again. Is there something to do about this?

Reply
1. June 28, 2021
  
  Bharat Karavadra
  
  Hello again Amina,
  Can you send a screen recording of what you are experiencing?
  
  Reply
June 21, 2021

Amina

Question: in some browsers (chrome on apple computer) the navigationbar somehow divides in 2 rows, whereas in my chrome (windows) it is 1 row. Do you know how to fix that problem without removing menu items?

Reply
1. June 28, 2021
  
  Bharat Karavadra
  
  Hello Amina,
  I would have to look at the code and I don’t use Apple devices so I am currently unable to look at the code.
  
  Reply
June 20, 2021

Amina

Great code, I wanted to widen the content, but on mobile it somehow made it narrow too, until I made the menu wide. You should add this to your other post too!

Reply
January 9, 2020

marctom1

Perfect!
I’d been trying to do this all day, until I saw your brilliant post.
Thanks very much!

Reply
1. January 10, 2020
  
  Bharat Karavadra
  
  Thank you for your comment and I hope it saved some time.
  
  Reply
April 30, 2018

Sandeep

Thanks a lot, I started using Twenty seventeen, I am not deep rooted to CSS, your customization code helped me a lot.
Thanks again.

Reply
July 14, 2017

isisko

Hello Bharat

I am using the “Advanced Twenty Seventeen Child” theme and your code doesn’t seem to work for me :(
My menu is still the same width as the content area and not 100%

Any ideas as to what could be so different about the theme I’m using? I was the impression it’s based on the same standard Twenty Seventeen theme with some minor additions to allow custom CSS etc and as such I would expect this to work for me.

By the way my menu has eight menu items and two of the items are quite lenghty, and as such the last menu item wraps to a new line. I was actually looking for a way to shorten the gap between menu items in order to try to resolve this when I accidentally came across this article which would probably be even better if I can just manage to get it to work.

Reply
1. July 14, 2017
  
  isisko
  
  PS The site is in a staging area and not live yet which is why I haven’t posted a link to it
  
  Reply
  1. July 14, 2017
    
    Bharat Karavadra
    
    As you are using a different theme, without seeing the site and perhaps the admin, I would not know what to consider to help make the menu fit the width of the screen. Is there any way you can publish the site to view on the internet?
    
    Reply
    1. July 14, 2017
      
      isisko
      
      I figured it out, removed your /* padding: 0; */ comment which did the trick
      
      I then changed it to: padding-left: 20px; which works better for me.
      
      The Advanced Twenty Seventeen Child theme is in essence identical to Twenty Seventeen as far as I am aware so in theory everything you can do to one you should apply to the other.
      
      In any case thanks for you super quick response : )
      
      Hey another thing while I am here, I also have another CSS issue regarding increasing the width of particular sub-menus, but I don’t if this is something I can post on your site.
      
      Reply
      1. July 14, 2017
        
        Bharat Karavadra
        
        I’m glad you got it to work.
        With respect to other WordPress requirements, you can use the forums at the link below. They are on a free trial at the moment, but again, please describe your requirements as clearly as you can with the theme you are using.
        The forum is at http://karavadra.net/forums/forum/grow-business-online/wordpress/
        
        Reply
March 12, 2017

Joris

In the code there is a final accolade } missing.
The code should be:

.navigation-top .wrap {
max-width: 80%;
/* padding: 0; */
}

@media screen and (min-width: 48em) {
.navigation-top .wrap {
max-width: 80%;
/* padding: 0.75em 3.4166666666667em; */
}
}

Very nice work otherwise. You’ve helped me a lot. I wanted to the content and menu to be wider, but not full screen, so replaced all the 100% entries with 80%. Worked perfectly :)

Reply
1. March 12, 2017
  
  Bharat Karavadra
  
  Joris,
  Thank you for that. I have updated the post above, and I am glad that the customisations are helpful.
  
  Reply
March 2, 2017

Indian Play Schools

HI,
Thank you for a great series of tutorials.
I am working on this project https://goo.gl/bCOFme
When I move down, my menu is sticky, but the logo is not. Please let me know how to make the logo also stick to top.

Reply
1. March 3, 2017
  
  Bharat Karavadra
  
  Hello,
  You seem to have created your own customisation for the logo, header and menu. Customizations I create from the default Twenty Seventeen theme may not then work. Can you try one of the stick header plugins from WordPress.org at the link below, and let us know how you get on? Use one that is compatible with your version of WordPress.
  https://en-gb.wordpress.org/plugins/search.php?q=sticky+header
  
  Reply
  1. March 3, 2017
    
    Indian Play Schools
    
    Thank you very much for your reply.
    I have used the following customizations
    
    /* To move menu to the right side of logo and aligned to it*/
    .navigation-top {
    left: 20%;
    position: absolute;
    top: 14px;
    width: 100%;
    background:#ffffff;
    height: 70px;
    }
    
    .site-navigation-fixed.navigation-top
    {
    position:relative;
    }
    
    Used code to increase the width to 100%
    Used code to hide Title.
    
    Can you please have a look at the website and let me know the code to decrease the gap between top menu and beginning of the page?
    goo.gl/b8tqXo
    
    Also please help me in removing the stickyness.
    Thank You
    
    Reply
    1. March 6, 2017
      
      Bharat Karavadra
      
      Hello,
      You seem to have resolved your gap and sticky menu issues.
      However, anybody else looking at removing the sticky menu, and making it unsticky, see here: http://karavadra.net/remove-sticky-menu-twenty-seventeen-make-unsticky/
      
      Reply
      1. March 6, 2017
        
        Indian Play Schools
        
        Thank you very much for the reply, But, I still want to remove the existing gap between header and the first image of the page. Is there a way? I wrote the following code to remove some gap.
        /* To reduce gap between Header and first image*/
        .panel-content .wrap {
        padding-bottom:0.5em;
        padding-top: 0.5em;
        }
        .site-branding {
        padding: 0em 0;
        }
        @media screen and (min-width: 30em)
        style.css:3192
        .site-branding {
        padding: 0em 0;
        }
        @media screen and (min-width: 48em)
        style.css:3192
        .site-branding {
        padding: 0em 0;
        }
        Using inspect element I found that the following code when altered can give the desired results.But I am unable to write it in css.
        
        element.style {
        margin-bottom: 70px;
        }
        Any suggestions? Thanks in advance
        
        Reply
        
        March 7, 2017
        
        Bharat Karavadra
        
        Hello,
        Can you try?:
        .site-branding { margin-bottom: 0px; }
        
        Reply
        
        March 7, 2017
        
        Indian Play Schools
        
        Thank you for your reply. But sorry, it did not work.
        
        Reply
        
        March 7, 2017
        
        Bharat Karavadra
        
        Hello,
        It made a difference on your site with Firebug. Can use the ‘Ask For Help’ link on the top menu and send me your WordPress login and username so I can look into it directly on your site?
        Thank you.
        
        Reply
        
        March 7, 2017
        
        Indian Play Schools
        
        Thank you very much for the concern. I have mailed you my login details.
        
        Reply
        
        March 7, 2017
        
        Bharat Karavadra
        
        Thank you,
        I have added the following CSS to your Custom CSS and it has reduced the space between the menu and page.
        .site-branding { margin-bottom: 0px !important; }
        
        March 7, 2017
        
        Indian Play Schools
        
        Thank you very much. That was very kind of you.I had been struggling since two weeks. Thanks a zillion.