[evanarcParticipant]

Hi–

Is it possible to prevent the navbar from wrapping to a second line before it shrinks to the mobile view?

Would it be possible to scale it down instead? Or increase the left/right margins to fit more buttons?

I have a moderately long menu and, when it wraps, it orphans a few buttons on the second line. Just doesn’t look good.

Thx!

[FriechModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

You can add this under Custom > CSS in the Customizer for the meantime.

.x-navbar .desktop .x-nav>li>a {
  padding-left: 1em;
  padding-right: 1em;
}

Cheers!

[evanarcParticipant]

This reply has been marked as private.

[LelyModerator]

Hello Evan,

Please check the answer on this thread:https://theme.co/x/member/forums/topic/inline-menu-breaking-onto-2nd-line/

Hope this helps.

[evanarcParticipant]

Hi-

That first bit of code referenced in the other thread shrunk my logo (which I don’t want) and still didn’t resolve the wrapping and overlap problem. The second bit of code didn’t do anything noticeable. I took it back out. Any other suggestions?

Thanks,
Evan

[evanarcParticipant]

I decided to move some menu items to a dropdown submenu to prevent the wrapping. (I’d still be interested in your feedback on the wrapping.) However, this creates some new issues:

1. I would now like to have the navbar above the logo so people don’t have to scroll to see the dropdown. I followed the instructions in https://theme.co/x/member/forums/topic/is-there-a-way-to-get-my-navigation-bar-above-my-header/#post-116305. It moved the navbar above the logo, but it broke the dropdown and sticking feature.

2. Is there a way to NOT have the top level of a submenu clickable? For example, I’m using the heading “Departments” with all of the individual pages underneath. I don’t want “Departments” to be clickable other than to drop down the menu. I’d rather not have a “Departments” category.

3. Is there a way to change the hover colors underneath? It appears the category buttons are white and Home and the pages are red when I hover. I’d like them all to be the same color.

[Rue NelModerator]

Hello There,

Thanks for the updates!

To fix the logo and the navbar submenu issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar {
  z-index: 1035;
}

To make your top level menu item not clickable, you can use custom menu item. Please review WordPress Menu User Guide and try to create a custom menu link using # as the url. You may go to Appearance > Menus to manage your menu items. http://prntscr.com/6ru1gj

To change the hover color of the line underneath your menu item, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
  box-shadow: 0 2px 0 0 #fff;
}

Please let us know if this works out for you.

[evanarcParticipant]

Excellent! Works like a charm. 🙂 Thank you for your continued assistance. I’m learning as I go…

[NicoModerator]

You’re most welcome.

Let us know if you need anything else.

Thanks. Have a great day! 🙂

[Author]

Posts