Tweak Logo Ratio

Hi there,

What CSS code can help me tweak the width and height of the logo for both desktop and mobile?

I currently do not see a logo on mobile - only a site title. Can you make the logo show so I can provide the best solution possible?

Thanks.

Secondly, what is the DOM size and how to reduce this? (A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows). 914 elements according to page insights:

This isn't a theme-related or theme-specific question so you can find lots of articles on Google that explains the issue and provide some potential solutions.

I have published the mobile logo. Also getting this from pagespeed on desktop:

Peak Performance Sports

…uploads/2023-peaksports-logo-lg.png(sportpsychology.b-cdn.net)

360 x 175 (2.06) (Expected)

1000 x 175 (5.71)

Your mobile logo image file dimension is 1000px * 175px, while it renders as 114.28px * 20px.

The mobile logo height matches the menu item height of primary navigation on mobile, you can increase the height at Customizing > Layout > Primary Navigation > Menu Item Height (mobile).

There's also a top and bottom padding added to the logo, you can use this CSS to remove the padding:

.mobile-header-navigation .site-logo.mobile-header-logo img {
    padding-top: 0;
    padding-bottom: 0;
}

Thanks--that helps with the mobile logo size. But now the dropdown Navigation items match the logo height. How can I control the spacing between dropdown items?

Also, do you have the CSS to change the line height in the footer hook section? (Footer Template, generate_footer).

Patrick

Also, do you have the CSS to change the line height in the footer hook section? (Footer Template, generate_footer).

Please open a new topic for non-related questions. It's easier for us to categorize the topics and easier for other users looking for an answer. Thanks for your understanding :)

But now the dropdown Navigation items match the logo height. How can I control the spacing between dropdown items?

How do you want to control the spacing? Do you want to increase or decrease the spacing?

I'd like to decrease the spacing on the drop down items in mobile. I've set the menu item height to 60px for the logo to display correctly, but then the dropdown items match this height.

In that case, set the value back to 40px and use this CSS in my reply here instead:
https://generatepress.com/forums/topic/tweak-logo-ratio/#post-2605996