Menu drops below the logo as I added another page

Support
#1

How do I make sure the menu pages stay on the same line as the logo and don’t drop below? I added one more page and now it drops. It’s an issue as the screen size changes.

I use this currently but it’s not quite right.

.x-navbar .x-container.max.width {
width: 66%;
max-width: 100%;
}

I appreciate your help!

#2

Hi there,

Please try this:

.x-navbar .x-container.width {
    width: 80% !important;
    max-width: 100% !important;
}

You can also increase the value of the width.

Hope this helps.

#3

It still drops down as you resize the window.

#4

Hi there,

As mentioned in the previous response,

Please try to increase the value of the width in the code until you get the correct value where the logo and the menu will be displayed inline again.

In case you’re still not able to get it sorted, please provide the URL of your site.

#5

It’s confusing you’re saying to do that without doing anything with @media to fit various screens. It will continue to drop down otherwise.

#6

Hi again,

Please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

@media screen and (min-width: 978px) {
    body .x-navbar .x-container.width {
        width: 95% !important;
        max-width: 100% !important;
    }
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 12px !important;
    }
}

You can also create multiple breakpoints to adjust font size and spacing between the menu items for different screen sizes to get the best output.

Cheers!

#7

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