Tablet Landscape menu bar

Support
#1

Hello-

How can I stop my menu bar from going onto 2 lines and keep it one line?

In certain scenarios the menu bar doubles and covers text on the website…see attachment:

#2

Hi there,

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.

Fewer 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.

#3

Thank you but this does not answer my question. I have done this before with X, however because of the new forum platform I can’t find my old ticket. I do not want the nav bar to go onto 2 lines. I understand I can move the content, however it does not do this on any other page.

I will ask again, how can I prevent the nav bar from becoming 2 lines…maybe editing CSS so that it turns into a mobile menu sooner, maybe there is a way to decrease nav menu items with responsive behavior, etc.

Please advise to the topic.

#4

Also- did you look at my website because I don’t have a logo visible. Your response is too generic.

#5

Hi There,

Considering your design, your only option is to make your mobile menu appear sooner.

To do that you can use the following code on Theme Options CSS

@media (max-width: 13px) {
    a.x-btn-navbar {
        display: inline-block;
        float: right;
    }
   .x-nav-wrap.mobile.collapse.in {
      display: block;
    }
   .x-nav-wrap.desktop {
    display: none;
   }
}

Hope it helps

#6

That did not do anything. Should I be adjusting the 13px to something? If so which direction?

#7

Hi again,

Please remove the previous CSS and use this code instead to fix the issue:

@media screen and (max-width: 1250px) {
   .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 13px !important;
   }
}

Cheers!

#8

Thank you so much this is BRILLIANT!!! :sparkles:

#9

@Nabeel is there a way to get this perfect with 14px font in our menu bar?

#10

Hey there,

Regretfully that might not be possible because you’ve too menu menu items that can’t be adjusted in smaller screens. That’s the best way to fix the issue.

Thanks!

#11

Ok thank you- it’s close to perfect.

#12

Glad we could help.

Cheers!