Difficult to use css on header

Hi,
i’m having difficult to change something with css on header.
For example, i called .crea-menu a menu item then in custom css -> global custom css i put
.crea-menu:hover{
color: #e31d6c;
}

It doesn’t work. What’s wrong??

Hello,

Thank you very much for choosing our theme and for contacting us.

You can change the font by means of Advanced typography option, which allows to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/basel/advanced-typography-settings-2/

Best Regards

Hi,
thanks for helping me.

Attached screenshot of my configuration.

Unfortunately, It doesn’t work.

What’s wrong?

Attachments:

You must be logged in to view attached files.

Hello,

Please find the items of a menu in the drop-down list. Your custom CSS does not work as you set the incorrect selector. If you still need help, please provide your site admin access and screen what item you want to change I will show you what to chose.

Best Regards

Hello,

done.

Next step where i have problem is to make smaller and lighter the submenu and submenu texts than make search bar open.

I tried to make the submenu section smaller but when i do the text inside is not middle aligned.

Attachments:

You must be logged in to view attached files.

Hello,

In order to show the search bar, you need to chose a certain header layout in the Theme Settings > Header Layout. https://prnt.sc/x5vov2

You need to arrange the text in the center in the HTML block used for the mega menu block. As soon as you settle this, I will provide the correct custom selector or CSS code for the sub-menu.

Best Regards

Hello,

i didn’t create any HTML block in order to use it.

I’m not used to use it, so i don’t know where to start.

I just wanted to make the submenu section height: 40px and submenu items vertical aligned middle, change the weight of the font in there and the backgroud color.

Kind Regards.

Hello,

Please read and follow this instruction to configure the menu properly: https://xtemos.com/docs/basel/create-mega-menu/

Best Regards

Hello,

there are no examples about how to create it. It would be really helpful to have it.

So, that’s what i see in HTML Block (see image), i’ve created the item “il mio account” just putting that text inside. I don’t know if it’s correct because there is no example about it.

Second there is no “Custom fields [for theme] in menu item” in menu settings.

Kind regards

Attachments:

You must be logged in to view attached files.

Hello,

Please remove this item: https://prnt.sc/xbbple

Then you need to enable these options: https://gyazo.com/5c6ffee6043d41eae32da5a2da376835

Finally, insert HTML ID in the field as shown: https://gyazo.com/dfa27a14da7af85fa342db1cd1d310f7

You can see how it is inserted in the instructions: https://xtemos.com/docs/basel/create-mega-menu/

Please let me know if you need any further help.

By the way, if you want to enable WP bakery page builder for HTML block, follow these steps:

Navigate to WP Bakery Page builder > Role Manager http://prntscr.com/lqfzji

Enable WP Bakery Page builder for cms_block http://prntscr.com/lx3o2t

Best Regards

Hello,

thank you Elise.

Now, i added custom css to set background color and height of submenu, but the mega menu seems not follow its container so it display outside the submenu.

So i added a negative margin top to that menu to put inside of its container.

Now i would like to change the font size, weight and normal case instead of all uppercase of submenu. I tried but i cannot find the right class to use in “advanced typography”

Kind regards.

Attachments:

You must be logged in to view attached files.

Hello,

I am checking your menu and see you have already changed the sub-menu font, if you still need help, please use this class:

.main-nav .menu > li > a

Please let me know if you need any help.

Best Regards

Hello,

thanks that’s the class i was looking for, but now i don’t know why the color on hover doesn’t work. Should be pink instead darker black.

Kind regards

Attachments:

You must be logged in to view attached files.

Hello,

Add the custom code to the Theme Settings > Custom CSS:

.main-nav .menu > li > a{
color:red;
text-transform:capitalize;
}

.main-nav .menu > li > a:hover{
color:blue;
}

Set the colors and styles as per your needs and remove the rules from the advanced typography to avoid duplicating.

Best Regards

Hello,

Thank you for your help.

Kind regards.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts