[Resolved] Setting up custom header element

[Adam]

Hello. I am trying to make a header that has navigation on the left side, a logo and title in the middle then a button on the right side. I used the ‘spacious’ site that came with GP site library as that seemed like a good fit. Then I made a custom global header element, merged it with the navigation and split it up with 3 columns. Is this the best way to accomplish what I am after? One issue I am encountering is currently the menu toggle is overlaying the rest of the header including the custom button, so that it cannot be clicked. Not sure how to fix that or if it could be avoided by approaching this differently.
Thank you

[David]

Hi there,

this may be a better option:

1. Create a Menu and assign it to the Off Canvas Panel and set the Off Canvas Panel to On Both.
2. Create another Blank Menu ( no menu items ) and assign this to the primary navigation.
3. Add you logo to the Customizer > Site Identity
4. Set the Primary Navigation to float left, the toggle should now be on the left of the logo.
5. Add a HTML Widget to the Header Widget area for your Button.
6. Add this CSS:

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: center;
    }

    .inside-header .main-navigation {
        order: -2;
        margin: 0;
    }

    .site-logo {
        order: -1;
        margin-left: auto;
        margin-right: auto;
    }
}

[Adam]

Hey David sorry for the slow reply,

I followed your instructions and things are looking good. I ended up not wanting to use a mobile header, instead I have just resized/edited the desktop header elements with media queries.

My understanding is the CSS I add to the customizer will override the theme CSS? With media queries though, do I need to select the exact same dimensions or will it override them if they just reside within the dimensions I set in the custom CSS? I thought I would just have to define the header/navigation layout using the:

@media (max-width: 768px) {}

@media (min-width: 769px) and (max-width: 1024px) {}

@media (min-width: 1025px) {}
but it seems like there are other breakpoints that I have to use to control the header/navigation layout?:

@media (max-width: 600px) {}

@media (max-width: 840px) and (min-width: 769px) {}

@media( max-width: 870px ) {}

@media (min-width: 871px) {}

You can see what I mean here.

Thank you,

[Leo]

Not sure if I understand this fully.

The CSS selector would be the exactly the same, you would just have to write the breakpoint differently.

Take a look at this article:
https://docs.generatepress.com/article/responsive-display/

Let me know if this helps or I’m not answering the question 🙂

[Adam]

Hey Leo,

There are other breakpoints in the theme that seem to interfere with those 3 breakpoints that are outlined in that article and seem to override the CSS, at least for the navigation/header layout.

I removed the custom ones I had in to make it easier to see but if you use the inspector tool you can see there is a media query from generatepress for @media (max-width: 840px) and (min-width: 769px) for the site-branding class?

Just trying to figure out whats going on there?

I did figure out the display: inline-block was causing all the elements inside the header to stack vertically so I fixed that by setting display to flex for @media (min-width: 769px) and (max-width: 1024px) which is good.

Thank you

[Tom]

If you need to overwrite media queries in the theme, you will need to match the query and then overwrite the CSS within it. That will prevent the theme from executing the code when the query matches (as it will execute yours instead).

[Adam]

Thank you Tom for explaining that. I wasn’t sure how that worked, but matching the query exactly to override it and not just having it included in the 3 main media queries makes sense. Cheers!

[Tom]

Glad I could help 🙂

[Author]

Posts