Difficult to use css on header

This topic has 15 replies, 2 voices, and was last updated 3 years, 10 months ago by Elise Noromit.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
January 15, 2021 at 10:36 am #258639

Davey
Participant

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??

January 15, 2021 at 4:15 pm #258791

Elise Noromit
Member

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

January 16, 2021 at 2:36 pm #259001

Davey
Participant

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.

January 16, 2021 at 10:09 pm #259078

Elise Noromit
Member

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

January 18, 2021 at 9:18 am #259281

Davey
Participant

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.

January 18, 2021 at 10:50 pm #259534

Elise Noromit
Member

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

January 19, 2021 at 9:35 am #259658

Davey
Participant

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.

January 19, 2021 at 6:47 pm #259814

Elise Noromit
Member

Hello,

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

Best Regards

January 20, 2021 at 9:23 am #259989

Davey
Participant

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.

January 20, 2021 at 9:09 pm #260122

Elise Noromit
Member

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

January 21, 2021 at 10:06 am #260263

Davey
Participant

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.

January 21, 2021 at 10:20 pm #260436

Elise Noromit
Member

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

January 22, 2021 at 9:32 am #260556

Davey
Participant

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.

January 22, 2021 at 2:06 pm #260654
Elise Noromit
Member
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
January 22, 2021 at 2:10 pm #260658

Davey
Participant

Hello,

Thank you for your help.

Kind regards.

January 22, 2021 at 2:11 pm #260660

Elise Noromit
Member

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

Best Regards
Author

Posts