Menu bar is dependent on the width of the device

[Mang]

Hi,

If the website is opened in Opera Browser the menus on the menu bar split down to the second row, as Opera has smaller width due to the task bar being on the left. So basically the menu bar is dependent on the width of the device/browser. How can I make it independent of the device/browser so everything falls in one row?

Thanks

[nabeel]

Hi there,

Thanks for writing in! I see you’ve many menu items in your navigation bar which may cause trouble when there is no room in the navigation bar to fit all menu items when the screen gets smaller. As a work around you can try adding the following code in the Theme Options > CSS:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 13px !important;
}

Hope this helps!

[Mang]

Thank you Nabeel for your response.

1. I was looking for a global solution, so which ever device/browser the site is opened, it manages the spacing between the menu items in such a way that all the menu items fall in one row. I tried reducing the size of the window and the menu items on the right come down again.

2. When a user logs in, he also sees a ‘My M’ menu. Please see attached. Is it possible to move this menu to the topbar to make space?

3. Is it possible to move the ‘Stores’ menu to the topbar?

4. Can we remove the dropdown arrow beside each menu item to make space?

Thank you

[paul.r]

Hi,

1. We can make the mobile button appear earlier. Add the code below in Theme Options > CSS

/* Make mobile button appear earlier */
@media (max-width: 1140px) {
.x-nav-wrap.desktop {
    display: none;
}
.x-nav-wrap.mobile {
    display: block;
}
.x-nav-wrap.mobile.x-collapsed {
    display: none;
}
.masthead-stacked .x-btn-navbar {
    display: inline-block;
}
}

2& 3) Regretfully, It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this.

4. To remove it, add the code below in Theme Options > CSS

/* remove dropdown arrow */
.x-navbar .desktop .x-nav li>a>span:after {
    display:none;
}

Thanks

[Mang]

Thank you Paul for your reply.

No 4 worked great.

For No. 1 , the menu shrinks down to a block even if the window is made little bit smaller. I was hoping the menu stays open to the point possible by increasing the height of the menu, then it shrinks down to a block.

Thanks

[christopher]

Hi @Mangtum.

Please consider that there is no global way to have a solution for this kind of usage. The problem is your menu items which are too long and there is no way to make sure they will work on all browser sizes. I actually suggest that you do not use even the method my colleague mentioned about having a mobile menu appear sooner.

I suggest that you think of your menu items in another way, try to group them inside submenus to have fewer menu items.
That will be the final solution, other than that whatever we do will be a band-aid solution and will not work as you expect.

So bottom line that is a web fact and it is not related to any theme, if you have too many menu items in a linear fashion, there will be a point that the menu will break in two lines because of the lack of spacing.

Thank you for your understanding.