[Support request] logo in header

[Jos]

Hi Tom,

I have a client who wants her logo rather big on desktop and tablet. But when i use this, and the as float right the menu floats all the way up. Leaving a big gap between menu and broad image under it.
How can i get the menu to have some padding like 80 px or so above the navigation to bridge the gap? While keeping the logo without padding on the top?

Also: how can i make the padding a little smaller, with CSS.

Thanks in advance!
Jos

[Leo]

Hi there,

You can add top padding to the navigation to move it down like this:

@media (min-width:769px) {
    .nav-float-right .inside-header .main-navigation {
        padding-top: 180px;
    }
}

What padding are you trying to make it smaller?

[Jos]

Hi Leo,

Thanks for the quick reaction.

This looks nice on desktop. But i would like it, not to have that padding op tablet and mobile.

Jos

[Leo]

Edited the CSS above: https://generatepress.com/forums/topic/logo-in-header-2/#post-474942

[Jos]

Thanks again Leo

This looks good now, but how do i get to see the logo bigger than now on mobile?
I uploaded a logo of 150 px, but it looks much smaller.

Greets,
Jos

[Jos]

Regarding the padding question.
I forgot to mention i mean the padding around the logo.

Greets,
Jos

[Leo]

For mobile header logo, I would recommend removing the padding:

@media (max-width: 768px) {
    .mobile-header-navigation .mobile-header-logo img {
        padding: 0;
    }
}

Then you can increase the navigation height using the mobile toggle:
https://docs.generatepress.com/article/menu-item-height-width/#height

There isn’t a padding around the logo on desktop.

The top padding is from header padding: https://docs.generatepress.com/article/header-padding/

Bottom is the content padding, since you are using page builder, try full width here:
https://docs.generatepress.com/article/page-builder-container/

[Jos]

I will check it out.

Thanks for your quick reaction again,

Greets,
Jos

[Leo]

No problem!

[Author]

Posts