Site logo

Archived topic

Add heading inside a menu

9 replies · Started by Rostyslav on February 7, 2023

Viewing posts 1–10 of 10

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

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

This archived topic is closed to new replies.