Twenty Seventeen Theme Customisation
Twenty Seventeen is the default 4.7 WordPress theme for 2017. Register for and request customisations here.

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

Updated: July 1, 2017 Posted: December 27, 2016~ 1,282 Readers ~ 1 Minute Read 18 Comments >>

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:

Get instant access to this customisation, and more.

Join the member's area for free and receive your login by email for:

Twenty Seventeen theme customisations.
Salient theme customisations.
Other WordPress customisations.
Grow A Business Online forums.

Free membership for customisation and growing a business online is only available for a limited period.

Not a member?.. Register for free below.

Your login will be emailed to the address you enter above.
Your privacy is respected, and there is no spam.



There are 18 comments to the above post [Read comments].
Click here to comment, ask or share something.

18 Comments

  • isisko says:

    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.

    • isisko says:

      PS The site is in a staging area and not live yet which is why I haven't posted a link to it

      • 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?

        • isisko says:

          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.

  • Joris says:

    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 :)

  • 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.

    • 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

      • 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

Comment, ask or share something...

%d bloggers like this: