Archived topic

Header Styling

3 replies · Started by Benjamin on January 4, 2021

Viewing posts 1–4 of 4

January 4, 2021 at 11:01 am #1605392

Hi, I want to do some header styling, and after looking around in the GP Customizer I think it will require a little bit of CSS. Would you mind helping me?

Below is a screenshot of what I'd like to happen. There should be a bottom border and if possible can we have the navigation text-centered so that logo sits right and search left. I saw an example in your documentation but that requires the navigation to be used as a header, which I don't want.

If we could get the effect above that would be great. Mobile should preferably just get the border, and then the dropdown and everything else stays the same.

Thank you in advance.

January 4, 2021 at 3:37 pm #1605638

Hi there,

try this CSS:

/* Add border to site header */
.site-header {
    border-bottom: 1px solid #333;
}
/* Center nav between logo and search icon */
@media(min-width: 769px) {
    .main-navigation{
        flex: 1;
    }
    .main-nav {
        margin-left: auto;
        margin-right: auto;
    }
    .main-navigation .menu-bar-items {
        min-width: 125px; /* Set search to min width of logo */
        justify-content: flex-end;
    }
}

January 4, 2021 at 8:07 pm #1605824

Perfect,

Thanks a million David!

January 5, 2021 at 1:17 am #1606046

You're welcome

This archived topic is closed to new replies.

Start building better websites today.