Archived topic
Add heading inside a menu
9 replies · Started by Rostyslav on February 7, 2023
Hello I am trying to add an <h3> heading inside a menu to get this: https://i.postimg.cc/MGzFt2Fv/Captura-de-pantalla-2023-02-07-102751.jpg
My website: Tejados Madrid
How can I do it?
Thanks
Hi there,
the image link you provided isn't working for me ?
Just updated
It is possible to filter the menu item HTML to change the markup, BUT if you do that then it will break the menu styles.
A lot of the CSS relies on the li > a selector and if you add a H3 there, then those styles will break.
Just out of curiosity - what is the purpose of that ?
Hello David. Its a SEO purpose. I would like to add it like on this website: https://agenciaseo.eu/.
I would like to add H3 but not to all elements of the menu, just on few of them.
Thanks
Simplest option would be to add the H3 inside the link.
In HTML 5 this is valid:
<a href....>
<h3>The title</h3>
</a>
and it is no different semantically to this:
<h3>
<a href....>The title</a>
</h3>
It also means the the CSS styles won't break.
And you can simply edit the Menu and add those tags to the Navigation Label
Hello, but how can I mantaine the previous styles: https://liser-cubiertas.es/
It changed all.
Try setting the H2 to inherit using CSS:
.menu-item a h3 {
color: inherit !important;
font-size: inherit;
margin-bottom: inherit;
}
Hello I added this and its working perfect!
.menu-item a h3.h3titulo {
color: inherit !important;
font-size: inherit;
margin-bottom: inherit;
line-height:66px;
font-weight:700;
}
Thanks David
What does inherit means?
In the theme we set styles on the li > a
We now have li > a > h3
The inherit value tells that property to inherit the styles from the elements parent.
So the H3 will get eg. the margin-bottom from the a