Archived topic

Creating custom padding around header with logo and menu navigation

5 replies · Started by Stefan on July 21, 2020

Viewing posts 1–6 of 6

July 21, 2020 at 2:50 pm #1371412

Hi GP,

I believe Chris and I want to achieve something similar here.

I would to add some padding to the current set-up of the header (please see screenshot: https://prnt.sc/tm52kd). This is the way I would like my homepage to look, logo on the top and to the left of the navigation menu, menu navigation and logo to be centered and with more padding around the logo + menu navigation.

This is what I would like to achieve (please see screenshot: https://prnt.sc/tm55c2). However, this was produced in a different theme.

If I try to use the default settings in GP, I get something like this (please see screenshot: https://prnt.sc/tm5471).

I would appreciate your help.

Regards,
Stefan

July 22, 2020 at 12:56 am #1371766

Hi there,

did you find the Navigation as Header option? As it looks pretty close to what you were trying to achieve.

Let me know.

July 22, 2020 at 4:17 am #1371946

Hi David,

That's the option I am actually using (please see screenshot: https://prnt.sc/tmilp8).
What I would like to do is add some padding. If I deselect the Navigation as Header option, then I cannot adjust the logo to the left side of the navigation menu the way I want.

I hope this clarifies things as well and looking forward to some suggestion to adjust this setting.

Regards,
Stefan

July 22, 2020 at 5:47 am #1372021

With the Navigation as Header you could use some CSS to add padding.:

@media (min-width: 769px) {
    .main-navigation .inside-navigation {
        padding: 40px 10px;
        box-sizing: border-box;
    }
}

July 22, 2020 at 1:42 pm #1372666

Hi David,

That works! Thank you very much!

Regards,
Stefan

July 23, 2020 at 12:08 am #1372976

You're welcome

This archived topic is closed to new replies.

Start building better websites today.