Docs

[Rifft]

Hello guys,

I would like to customize one single menu item on my navbar.
For now, i succeed to change the background color with a class in the dedicated field in wordpress options,
but i don’t know how to change the color of the text and the text hover.

> http://www.ct-band.com/en/ “Pre-order” item.

Also, i met a problem with the translation flag.
If you go on the french flag, before clicking on it, you’ll see a purple line on the top of the item.

How can i delete this space ? Or change the color to white ?

You’ll find my credentials in the next post.

Thanks a lot.

[Rifft]

This reply has been marked as private.

[Darshana]

Hi there,

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

.precommande span {
    color: #336699;
}

.precommande a:hover span {
    color: #ffffff;
}

Flag color is coming from the following custom CSS rule that you have added.

.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 4px 0 0 #383f77 inset;
}

Hope that helps.

[Rifft]

Thanks a lot, it’s perfect.

One more question, is there a way to have a different “Navbar Top Link Spacing” (space between menu items) in the french version and in the uk version ?

My goal is to reduce the space between menu items in the french version.

Thanks a lot, your support is so helpful.

[Paul R]

Hi,

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

:lang(fr) .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 5px;
    padding-right: 5px;
}

Change 5px to achieve your desired spacing.

Hope that helps

[Rifft]

Thanks a lot, it’s exactly what i wanted.

However, i have now a problem with the languague switch which is going over the preorder menu.

Do you have an idea about the css code to align exactly the two flags ?
And maybe reduce the white box around the second language ?

Thanks a lot, one more time your help is amazing.

BR,

[Rupok]

Hi there,

Thanks for updating. This is what I am seeing on my end – http://prntscr.com/bb2qh3

So can’t see it’s going over the preorder menu. Also not sure about reducing white box as it seems fine on my end.

Would you add a screenshot and clarify what you are trying to achieve?

Cheers!

[Rifft]

I’m sorry, i didnt bring enough details.

You can see the problem if you try to switch from french to english only.
It’s all right in english to french because i didn’t modify the space between item menu on this version.

Thanks for your help.

[Joao]

Hi There,

Please the code below you can adjust the values 25px according to your wishes in order to align the flags as you want.

:lang(fr) .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {

padding-left: 25px;

}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {

padding-left: 25px;

}

Hope that helps,

Joao

[Rifft]

All is perfect, thanks a lot !

[Paul R]

You’re welcome! 🙂

[Author]

Posts