Docs

[Dave S]

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 S]

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

[Christopher]

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 S]

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 Nel]

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 S]

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!

[Christopher]

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 S]

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 R]

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 S]

Safari 10.0.3

[Dave S]

Unfortunately the code didn’t help.

[Rue Nel]

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 S]

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 R]

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 S]

This reply has been marked as private.

[Author]

Posts