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

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

Updated: March 12, 2017 Posted: December 27, 2016~ 915 Readers ~ 1 Minute Read 13 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

Subscribe to immediately use this, other Twenty Seventeen customisations, and receive useful information by email about growing your business online.

Free customisation and business growth support is only available for a limited period.

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:



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

13 Comments

  • 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

        • 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: https://www.karavadra.net/remove-sticky-menu-twenty-seventeen-make-unsticky/

          • 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

Comment, ask or share something...

Do NOT follow this link or you will be banned from the site!
%d bloggers like this: