Bold font for selected page in horizontal menu

Ask the community
, ,
1

Hi,
I am very new to CSS/JS?HTML.
I am looking to have a horizontal menu in WIX that has the font in bold for the current page. In WIX studio, there isn’t the option to change the bold attribute for the selected item in the right hand panel.
I have tried some custom global CSS, but it doesn’t seem to be working, in that it’s not working.

This is what I’ve tried:

.horizontal-menu__item {
font-weight: bold;
}

&

.horizontal-menu__item[data-state=“active”] {
font-weight: bold;
}

Can anyone help?

Many thanks

2

Hi, user4007 !!

Try the following approach:

First, select your horizontal menu, then open the Velo coding panel and navigate to CSS Classes > Custom Classes. Assign any name you like to this custom class. For example, let’s assume you enter example and press the Enter key to confirm it. :grin:

Next, open your global.css file and input the following CSS:

.example .horizontal-menu__item-label {
   font-weight: bold;
} 

.example .horizontal-menu__item-label:active {
   font-weight: bold;
   color: red;
}
3

Hey Onemoretime,

Thanks for your reply.
It’s really appreciated!
I’ve added in the code as instructed, but it gives me all bold text, whether it’s the active page or not.
The piece of CSS that adds bold and red, the red only comes on briefly on a mouse click.
Any ideas how to fix this?
Thanks again!

4

I’m sorry, I think I made a mistake. However, I haven’t found a way to make only the menu item for the current page bold at this time either. I tried applying pseudo-classes other than :active, but it didn’t seem to work. :upside_down_face: