Docs

[Tim]

Hi Christopher,

The last code does not seem to be right. The hover color is now orange (just like the background). Upon scroll, the main items stay white and the descriptions are red.

Just to make it clear (getting quite a bit of css now), this is what the total code is now:

/*navbar desktop*/

.nav_desc {
    font-style: italic;
    font-size: small;
    color: #fff;
    text-align: left;
    display: inherit;
    padding: 0 20px;
}

.x-navbar .desktop .x-nav li:not(.menu-item-has-children)>a>span:after {
    display:none;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
  height: auto;
  line-height: 1;
  padding: 10px 20px;
}

.x-navbar .desktop .x-nav > li {
  border: 1px solid transparent;
  border-radius: 5px;
  margin: 15px 10px 0;
}

.x-navbar .desktop .x-nav > li:hover {
  border: 1px solid #ff671b;
}

.x-navbar .desktop .x-nav > li:hover a, .x-navbar .desktop .x-nav > li:hover .nav_desc {
  color: #ff671b;
}

.x-navbar .desktop .x-nav > li.current-menu-item {
  background-color: #ff671b;
}

.x-navbar .desktop .x-nav > li.current-menu-item > a, .x-navbar .desktop .x-nav > li.current-menu-item .nav_desc {
  color: #fff;
}

.x-navbar .desktop .x-nav > li ul {
  top: 65px;
}

.x-navbar .desktop .x-nav > li:hover > a, .x-navbar .desktop .x-nav > li:hover .nav_desc {
    color: #ff671b;
}

.x-navbar.x-navbar-fixed-top .nav_desc {
    color: red;
}
.x-navbar .desktop .sub-menu a {
    color: #b7b7b7;
}

Almost here i think (sorry to keep asking but i’m getting stuck now on the css)..

Thanks!

[Rue Nel]

Hello There,

Thanks for the updates. To resolve this issue, please have this block updated:

.x-navbar.x-navbar-fixed-top .nav_desc {
    color: red;
}

You replace it and use this code instead:

.x-navbar.x-navbar-fixed-top .nav_desc,
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li:not(.current-menu-item) > a > span {
    color: #ff671b;
}

Hope this helps. Kindly let us know.

[Tim]

Hi Rue,

All fixed, except for the hover on the active item. Another minor thing; when you switch from one submenu to another, you can see the items turn grey. Any idea how this comes?

Thanks so much for helping me out here!

Cheers!

[Rue Nel]

Hello There,

Please also add this code to change the color of the hover menu item.

.x-navbar .desktop .x-nav > li.current-menu-item > a:hover, 
.x-navbar .desktop .x-nav > li.current-menu-item .nav_desc:hover {
    color: black;
}

Hope this helps. Please let us know how it goes.

[Tim]

Hi Rue,

Thanks! While this is the solution on the homepage, in other pages it is not right. For instance:
http://www.rits-consultancy.nl/over-raymond/

When you now hover the active page items, they will show up one at a time..Any last solution to this?

Is it also possible to make the whole item clickable? So the menu title and description as one link?

Thanks!

[Christopher]

Hi there,

Please add this code :

.x-navbar .desktop .x-nav > li.current-menu-item:hover a, .x-navbar .desktop .x-nav > li.current-menu-item:hover small {
    color: #000;
}

Is it also possible to make the whole item clickable? So the menu title and description as one link?

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Tim]

Hi Christopher,

Thanks this works like a charm. I will sort out the second question later on. I completely understand that it falls outside the scope of support. I am thankful for all the help I got already:)

Have a great day!

[Paul R]

You’re welcome! 🙂

[Author]

Posts