Mobile menu

Hi there,

Can you try this CSS to remove the default top and bottom 10px padding and see if it works for you?

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

That did not work.

Not seeing my CSS being added.

Can you confirm?

I removed it when it didn't work. I added it to additional CSS exactly as you posted it to me and hit publish. Then I cleared cache and reloaded fresh local copy of the webpage by holding shift while refreshing. The problem persists. I can add it back but it didn't work. When I resize them using the bar this icon still resizes. Should it even be attached to the menu items? Shouldn't the menu bar be sized to the logo height and the menu items size separately?

I can see the CSS working now.

As mentioned the CSS removes the default top and bottom 10px padding so the logo size height is exactly the same as the menu item height instead of -20px by default.

Right now your logo height is 55px which is as big as it can get without going outside the container.

Do you want the logo to go outside the container or something?

Actually yes. I wanted the logo to float over and below the menu. I even wanted it to z-index on top of the sub menu drop down. I'll link a picture of what i'm looking for on mobile and desktop. If i have to get rid of the site logo in the menu and show it in the menu somehow as a class or whatever to get it to work i'm all for it. Not sure how exactly to do it though. If that's what it takes i'm up for swapping it over.

https://imgur.com/a/dHqX4XC

Try this CSS:

.main-navigation .site-logo {
    position: absolute;
    left: 0;
    top: 0;
}
.main-navigation .site-logo img {
    height: 130px;
}

That works great for desktop but it moves it on mobile too. Mobile it's too big and covering items on the menu and desktop it looks fine. Also trying to get my cart to show number of items and value below the number of items. span.amount span.number-of-items not sure how to use the flex or whatever to get them to stack on top of each other and both show up.

Let's solve the logo issue first.

Wrap the CSS above in desktop media query only:
https://docs.generatepress.com/article/responsive-display/

Then we can take a look at the mobile logo.

Alright that issue is fixed. Cart issue now? :D

Can you open a new topic for the cart question?

I'll mark this one resolved so you can open another topic.

Thanks :)

Actually hold up on that. Mobile logo looks fuzzy. I should probably use a different size in it's place right or is that what the retina is for?

I would use the SVG option:
https://docs.generatepress.com/article/adding-svg-logo/

Alright so when I upload the SVG it doesn't allow me to choose any area to crop which is fine but doesn't offer a skip cropping option until I try to drag and drop the svg image on the svg cropping area. Once it get it added in by hitting skip cropping because I can't see anything it put the image up as a black and white even though the SVG is set to color image. I think it has to do with the original file being a PNG because of the transparency to float on the background does SVG not handle transparent properties?
4 images on this link
https://imgur.com/a/nBlbg99