[Resolved] Image in primary navigation scaled up

[Bernhard]

Hello,
I want to use images instead of text in the primary navigation. I inserted one and I found it scaled up.
The original image is 150x95px and you see the original size as navigation logo on the left. On the right of the language switch is the image which I inserted into the menu and it is scaled up to something like 190×120. The menu item height is set to 95px.
What shall I do?
Thank you

[David]

Hi there,

you would need some CSS like so:

.main-navigation .main-nav ul li a img {
    max-height: 60px;
    vertical-align: middle;
}

Make sure your images have an Alt attribute so they still display something if the image doesn’t load. It should also serve as a label for screen readers.

[Bernhard]

This works, thank you.

I’ve seen that the menu item width exceeds the image width. I’ve set the width to 0 in the layout customization, but this makes no change. How can I configure this?

Furthermore, the minimum value for the submenu width is 100 px, but I need it only for the language switcher and it would be good to have a smaller value.

[David]

You can remove the left and right padding from the menu items like so:

.main-navigation .main-nav ul li:not(:keep-padding) a {
    padding-left: 0;
    padding-right: 0;
}

For those menu items you wish to keep the padding add a CSS class of keep-padding to them:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Bernhard]

Seems not to work.

How can I reduce the submenu width?

[Tom]

You can adjust the sub-menu width in Customize > Layout > Primary Navigation at the bottom 🙂

[Bernhard]

It’s strange. In the customizer everything looks fine.
I have set the submenu width typing in 40px (otherwise the min width is 100px) and it looks fine in the customizer but on the live side it’s wider.

Also the code which David gave me shows correct in the customizer but not on the live site.
I’ve purged the cache (using A2 Fixed W3 Total Cache) and the browser cache.

[Bernhard]

I tried now to insert the image with the plugin Menu Image, Icons made easy
but the result is the same. The padding disappears in the customizer but on the live page it is still there.
The same is with the submenu width.

[David]

Try this code to remove the padding:

.main-navigation .main-nav ul li:not(.keep-padding) a {
    padding-left: 0;
    padding-right: 0;
}

Try disabling the cache plugin and then testing to see if the sub menu width works.

[Bernhard]

The padding is ok now, great.

Still have the problem with the submenu width. I disabled the cache plugin but no change.

I’ve set the width to 40px and it shows correct in the customizer but not on the site. When I close the customizer and reopen it, also in the customizer the submenu width is shown larger (I think 100px) until I don’t change again the value. Then it shows the smaller width in the customizer but not on the site.

[David]

Try this CSS:

.main-navigation ul ul {
    max-width: 40px;
}

[Bernhard]

Perfect.

A last question: How can I center the flags?

[David]

Try adding back a little left padding to just the language items:

.main-navigation .main-nav ul li.pll-parent-menu-item a,
.main-navigation .main-nav ul li.lang-item a {
    padding-left: 10px;
}

[Bernhard]

Perfect, thank you 🙂

[David]

You’re welcome

[Author]

Posts