Spacing below featured image

Hi there,

try adding this CSS:

.post-image img {
    vertical-align: bottom;
}

@diggeddy thank you for your fast reply! Your support is great!

May I ask one more thing: I am trying to make the mobile menu appear slower and also moves back up slower as well. I tried some css from your website’s forum but it did not work. Could you help me with this? Thank you ??

Try this:

@media (max-width: 768px) {
    .main-navigation ul {
        display: block !important;
        max-height: 0;
        overflow: hidden;
        transition: all 0.5s;
    }

    .main-navigation .main-nav {
        flex-basis: 100%;
        order: 3;
    }

    .main-navigation.toggled ul {
        max-height: 100vh;
        overflow-y: scroll;
    }
}

that sort of works, thanks, but two issues:

– it adds a scroll bar to the menu even though there really isn’t anything to scroll.
– when the menu closes, the first menu item “jumps” up

Is it possible to see this on your site ?

@diggeddy do you have an email I could send it to?

You would have to provide the site link here as WP forbids us to ask for site links and access through private e-mails.

Please start a staging site if you don’t want to provide the URL to the live site.

Thanks.

please see here.
Code 5914.

Hi @stevert,

I can’t seem to replicate the Scroll issue. Can you take a screenshot of the issue?

As for the “jump” issue, try adding this CSS:

.nav-float-right #site-navigation {
    margin-top: 1.5em
}

See here. For a split second there is a scroll bar at the right that quickly disappears again.

I see. Can you try adding this CSS?:

ul#menu-main-menu {
    overflow-y: hidden;
}

Thanks, that works, but now the header is taller for both mobile and desktop…

Try replacing this:

.nav-float-right #site-navigation {
    margin-top: 1.5em
}

With this:

.main-navigation.toggled#site-navigation {
    margin-top: 0;
}

Hi,

thanks, that works! It does remove some top-spacing once the menu is open, but I guess that could be added by giving the menu some top-padding.

Also, just curious, why does the trigger menu icon have a right padding? this way it is not aligned properly with the content…

The icon itself is too small as an accessible tap target, so its sits inside a container with padding all round.

Do you want it aligned to one side ?