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; */
}
}