My client wants some of the main menu items to be bold. I have created a class (bold-item) and styled it, but I don't know how to add that class to the menu from backend or by editing menu? Could someone help me?
Jul 26, 20188:23 AM - edited Jul 26, 20188:24 AM
Key Advisor
How to add a class to main menu?
SOLVE
Hi there!
If you want to make an element bold, you can wrap it in "<b>" tags, like this:
<b>Roller Blinds</b>
which should work:
"class" itself is an attribute that's used within an HTML tag so, if you were adding a class to something, you would typically add it to it's HTML tag, such as a div, span, header, paragraph... etc.:
Jul 26, 20188:23 AM - edited Jul 26, 20188:24 AM
Key Advisor
How to add a class to main menu?
SOLVE
Hi there!
If you want to make an element bold, you can wrap it in "<b>" tags, like this:
<b>Roller Blinds</b>
which should work:
"class" itself is an attribute that's used within an HTML tag so, if you were adding a class to something, you would typically add it to it's HTML tag, such as a div, span, header, paragraph... etc.:
Its not a custom HTML menu first of all... I have used built in module to create that menu. So how do we add a class to an inner <li> <a> tag. I know i can add a class to the menu wrapper.
I'm not sure you can add HTML tags into the default menu module, although I'm curious as to how you added in the <class="bold-item>? If you were able to add that in, you should be able to add in something like <span class="bold-item"> instead.
You can also use "nth-child" selectors to style specific items. For example, below I've targeted the second and seveth menu items:
Note that this means that if they change their menu, whatever is in the "nth" position will be styled.
The content manager asked me to create a class for menu so that he can make some of the submenus bold. This is how this started. I have then created a class called "bold-item", and he added that class wrongly into the backend. That's why the class is appearing wrongly.
Is there any solution for this?
Targetting via CSS and make it bold will not work here .