[Resolved] Image in primary navigation scaled up

Home Forums Support Image in primary navigation scaled up

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1372011
    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

    #1372063
    David
    Staff
    Customer Support

    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.

    #1372307
    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.

    #1372322
    David
    Staff
    Customer Support

    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

    #1372369
    Bernhard

    Seems not to work.

    How can I reduce the submenu width?

    #1372693
    Tom
    Lead Developer
    Lead Developer

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

    #1372742
    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.

    #1373044
    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.

    #1373057
    David
    Staff
    Customer Support

    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.

    #1373115
    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.

    #1373127
    David
    Staff
    Customer Support

    Try this CSS:

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

    Perfect.

    A last question: How can I center the flags?

    #1373198
    David
    Staff
    Customer Support

    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;
    }
    #1373233
    Bernhard

    Perfect, thank you 🙂

    #1373260
    David
    Staff
    Customer Support
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.