[Paulo TebetParticipant]

If you take a look at development.paulotebet.com you will see that depending on the width of the screen the menu shows just fine.

If you start to make the window smaller the menu itens jumps to the line below the Logo and if the width get even narrower the menu itens splits in two lines….

On the iPad the menu is splited in two lines destroying the layout of the site…

How can this be handled?

Can I control the space between each menu entry?

Can I disable this behaviour for the menu entries spliting in multiple lines?

Any other ideas?

Regards,

[RadModerator]

Hi there,

Thanks for posting in.

Add this css at your customizer’s custom css.

@media ( max-width: 1024px ) and ( min-width: 980px ) {
.x-navbar .x-nav>li>a {
padding: 0 0.5em !important;
}
}

Cheers!

[Paulo TebetParticipant]

Thanks, even though the appearence on iPad got “better” it is still weird and even on a computer I am still experiencing some issues.

Open a browser on a computer and access development.paulotebet.com make the windows large enough to see all the menus item perfectly aligned then start making it narrow and narrower until the menu itens disappears and you will see the issues I am facing:

1-) Menu entries got down below the Logo and inside the Slider box
2-) Menu entries got split in two lines down below the logo and inside the Slider box
3-) Menu entries got up and above the logo
4-) Menu entries got down below the Logo but this time it DOES NOT get inside the Slider box

Then the menu entries finally disappears.

Regards

[CousettMember]

Do you want the collapsed menu to appear at a smaller screen width? Besides reducing the amount of menu items or shortening the names this is most likely the only way we can get around this issue.

You can also try adding the following CSS under Appearance -> Customize -> Custom -> CSS

.x-navbar .x-nav>li>a {
padding: 0 .5em;
}

[AmirParticipant]

Hello. I know this is an old discussion, but I have similar issue.

The menu splits into multiple lines when the screen gets smaller before eventually turning into the mobile navbar. I would like to solve this issue if possible.

I already am using full width navbar at 100%. There is the little space between the logo and the links that I can maybe utilize?

website:
http://www.beledear.com

Thanks

[Paul RModerator]

Hi Amir,

This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principle applied to filling up a room with furniture – there is only so much that can fit into a given space. The following should be considered in these situations:

Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.

Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.

Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.

Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.

Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

or we can make the mobile appear earlier by adding this code in custom > css in the customizer.

@media (max-width: 1320px) {
body .x-nav-wrap.desktop {
    display:none;
}

body .x-btn-navbar {
    display:block;
    float:right;
}

body .x-nav-wrap.mobile.collapse.in {
    display:block !important;
}
}

Hope that helps.

[Author]

Posts