Archived topic

logo in header

8 replies · Started by Jos on January 19, 2018

Viewing posts 1–9 of 9

January 19, 2018 at 6:48 am #474929

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

January 19, 2018 at 7:07 am #474942

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?

January 19, 2018 at 7:54 am #474973

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

January 19, 2018 at 7:10 pm #475326

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

January 20, 2018 at 7:34 am #475672

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

January 20, 2018 at 7:36 am #475674

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

Greets,
Jos

January 20, 2018 at 9:53 am #475782

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/

January 21, 2018 at 5:47 am #476260

I will check it out.

Thanks for your quick reaction again,

Greets,
Jos

January 21, 2018 at 5:49 am #476264

No problem!

This archived topic is closed to new replies.

Start building better websites today.