[LaurentParticipant]

Hello there,

First of all thanks to all the ThemeX Forum Staff, you guys are doing an awesome job.

I have a little issue here,

In Ethos, I would like to change the color of the line underneath menu elements. I know how to change the color for categories (with accent) but I have no idea how to change it for pages and links.

Basically I’d like all my menu items to have different colors when I hover over them. Pages and Categories. But the default color would stay white (as my background color) so that you don’t see the line before you hover over the links.

Does it make sense?

Also if for exemple I set the accent color to yellow for one category, when I click to the menu item to that category, the line underneath it stays yellow and not another default color (grey in my case).

Sorry for all those questions, I hope I was clear on what I would like

Thanks in advance
Laurent

[RupokMember]

Hello Laurent,

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. Also please provide some screenshots specifying the issue (that reflects current state and the desired state that you want).
Once you have provided us with your URL and screenshots, we will be happy to assist you with everything.

Cheers!

[LaurentParticipant]

This reply has been marked as private.

[LelyModerator]

Hello Laurent,

Thanks for giving us the URL.
So, for the category, when it’s active you want it to stay to the color you have set when you hover on it? If yes, please edit the following CSS:
From This:

.x-navbar .desktop .x-nav > li.tax-item-62 > a:hover, .x-navbar .desktop .x-nav > li.tax-item-62.x-active > a {
  box-shadow: 0 2px 0 0 #eeee22;
}

To This:

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

From this:

.x-navbar .desktop .x-nav > li.tax-item-61 > a:hover, .x-navbar .desktop .x-nav > li.tax-item-61.x-active > a {
  box-shadow: 0 2px 0 0 #81d742;
}

To this:

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

Hope this helps.

[LaurentParticipant]

Hello,

Wow, thanks! it works perfectly. The color stay the same after I clicked on the category menu item.

Now I would like to change the color of the line underneath Page and Links menu elements. I know how to change the color for categories in the Post category menu, but I have no idea how to change the accent for pages and links.

Cheers
Laurent

[ChristopherModerator]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[LaurentParticipant]

Hello,

Ahah OK sorry if I didn’t explain myself correctly.

The CSS you’ve given to me is to be able to change underline color of menu buttons when someone hover on it and that the same color stays when someone click on that menu item.
This was for category menu links. (if I can call it like this)

Now I would like to be able to change the underline color of a particular menu link. Let’s say “Carnet de voyage” on my blog. It’s not a menu linking a category but a page.

So to sum up on my blog I would like to be able to change the color of the line underneath “Carnet de voyage” when I hover over it, let’s say red. And “Contact” with a different color. So that every menu link has a different color

Hope it makes sense

Cheers
Laurent

[ZeshanMember]

Hi Laurent,

To achieve that, add following CSS code under Custom > CSS in the Customizer:

/* "Carnet de voyage" item */
.x-navbar .desktop .x-nav > li.menu-item-212 > a:hover, 
.x-navbar .desktop .x-nav > .menu-item-212.x-active > a, 
.x-navbar .desktop .x-nav > .menu-item-212.current-menu-item > a {
    box-shadow: 0 2px 0 0 #ff0000;
}

/* "Contact" item */
.x-navbar .desktop .x-nav > li.menu-item-76 > a:hover, 
.x-navbar .desktop .x-nav > .menu-item-76.x-active > a, 
.x-navbar .desktop .x-nav > .menu-item-76.current-menu-item > a {
    box-shadow: 0 2px 0 0 #000000;
}

Replace #ff0000 to change the border color for “Carnet de voyage” menu item and #000000 to change the color for “Contact” menu item.

Thanks!

[LaurentParticipant]

Ah OK!! Understood!! I need to get the IDs of the menu item and then with the CSS you provided I will be able to change the color of the line beneath.

Great,
Thanks a lot

[John EzraMember]

You’re most welcome!

[soniawillcox1976Participant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please try adding the following CSS:

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

Hope it helps 🙂

[soniawillcox1976Participant]

thank you very much!

[RadModerator]

You’re welcome!

[karankumarParticipant]

This reply has been marked as private.

[Author]

Posts