[Dave SParticipant]

Hi Christopher,

I’m trying to achieve exactly what is in the screenshots.

I put the CSS into my Customizer and literally nothing changed.

[Dave SParticipant]

Here is screenshots of the code pasted into my the custom CSS panel and the background color the active parent remains transparent.

[ChristopherModerator]

Hi there,

Please see the attachment, the code works for parent pages.
You can add following code as well, to change background for active menu (whether it has children or not) :

.x-navbar li.current-menu-item a {
    background-color: red !important;
    color: #000 !important;
border-color: #fff !important;
}

Please don’t forget to clear cache.

Hope it helps.

[Dave SParticipant]

Thanks for trying to help, but that’s not what I’m after.

This is the screen shot I posted earlier.

I want it to look like this on click. See how the word menu turns black?

I would also like the hamburger menu to turn black on click.

[Rue NelModerator]

Hello There,

Thanks for updating in! There is no on click events in our menus. The submenus were triggered upon hovering the menu item. You can make use of this code:

.x-navbar .desktop .x-nav > li.menu-item-has-children:hover > a {
    background-color: #000;
}

And for the mobile menu, you can make use of this code:

.x-navbar .x-btn-navbar:not(.collapsed) {
    color: #000 !important;
}

We would loved to know if this has work for you. Thank you.

[Dave SParticipant]

We have much progress.

I REALLY appreciate you sticking with me through this!

#1. The desktop is correct, but is there anyway to remove the padding on the right side of the submenu items. There is a lot of extra black space.

#2. The mobile changed the color of the hamburger lines, not the background of the hamburger. I’d like the lines to stay blue and the transparent background to turn black.

Many thanks!

[ChristopherModerator]

Hi there,

Please add following code as well :

.desktop .sub-menu {
    min-width: 224px;
    left: 0 !important;
}

Update this code :

.x-navbar .x-btn-navbar:not(.collapsed) {
    color: #000 !important;
}

to:

.x-navbar .x-btn-navbar:not(.collapsed) {
    background-color: #000 !important;
}

Hope it helps.

[Dave SParticipant]

Yes! This is great. Thank you VERY much!

I only have one more issue with this silly menu. The hamburger menu expands and cuts off the menu.

[Paul RModerator]

Hi,

May I know what browser are you using.

I can’t seem to replicate it on my end.

https://www.screencast.com/t/TgKFdAycHzI6

You can try adding this in Custom CSS in the customizer.

.x-navbar .mobile .x-nav li>a {
    max-width: 100%;
    width: 100%;
  }

Hope that helps.

[Dave SParticipant]

Safari 10.0.3

[Dave SParticipant]

Unfortunately the code didn’t help.

[Rue NelModerator]

Hello There,

Thanks for writing in! Sorry if it didn’t work out. Please make use of this code instead:

.x-navbar .mobile {
  display: block;
  position: relative;
}

.x-navbar .mobile .x-nav {
  max-width: 100%;
}

Hope this helps.

[Dave SParticipant]

Unfortunately that code introduced a new bug (in screenshot attached) and didn’t solve the issue of the mobile nav corner being cut off in safari. I tested the code and removed it.

[Paul RModerator]

Hi Dave,

In that case, can you provide us your wordpress admin login in private reply so we can test code and update simultaneously.

Thanks

[Dave SParticipant]

This reply has been marked as private.

[Author]

Posts