Span the menu to be more full-width

Support
#1

Is there a way to make my menu span the width of the site? My site has too much padding on the left and right (white space): https://digitalnomadquest.com/

I want to make it more like: https://www.smartpassiveincome.com/

#2

Hi Sharon,

Thank you for reaching out to us. This would require custom CSS which is regretfully outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it.

If you want to keep the logo inline with the menu like in the demo you shared then you can make use of the following code:

@media screen and (min-width: 980px) {
    .x-navbar .x-container {
        width: 100%;
        max-width: 100%;
    }
}

If you want the menu to span full width then use this code instead:

@media screen and (min-width: 980px) {
    .x-navbar .x-container {
        width: 100%;
        max-width: 100%;
    }
    .x-brand {
        float: none;
        margin: 0 auto;
        display: block;
        max-width: 300px;
    }
    .masthead-inline .desktop .x-nav {
        display: flex;
        float: none;
        text-align: center;
    }
    .masthead-inline .desktop .x-nav > li {
        flex: 1;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

#3

When I implement it it looks like this:

How do i keep the logo on the left on the same line? Thanks

#4

Hi Sharon,

Actually the logo and menu are set to be inline. This particular situation is a matter of reworking your content (logo and menu) to properly fit them inside the container, making the container fullwidth will not completely resolve the issue, because on small screen laptops the container still won’t be wide enough resulting for the menu to wrap, The following should be considered in these situations:

  • Logo Size – decrease the width of the logo to give more rooms for the menu items. You can set Logo Width under Theme Options > Header
  • Smaller Navbar Font Size - Navbar Font Size can be adjusted under Theme Options > Header
  • Menu Items Spacing - Navbar Top Link Spacing can be adjusted under Theme Options > Header as well.

If that still not enough, you can do the following:

  • Shorten the Menu Items Label.
  • Rearrange - If possible put your other parent menu item as sub-item.

Cheers!

#5

It looks like the menu items are centering though and there is a lot of space between them? Is there any way to fix that? I feel like the logo would be able to be in the same line if that were fixed. I’ll try making the logo a bit smaller though

#6

I made it ridiculously small (even tested it at 5 px) and it is still 2 lines

#7

Hey Sharon,

If you use the code in the first suggestion, you should be able to achieve what you require:

The second suggestion was an alternate solution if you needed to span the menu entirely without the logo. So you can only use the following code:

@media screen and (min-width: 980px) {
    .x-navbar .x-container {
        width: 100%;
        max-width: 100%;
    }
}

Hope this helps!

#8

Got it! It worked - thank you!

#9

You are most welcome. :slight_smile:

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.