Archived topic

Customizing Header

5 replies · Started by Craig on March 10, 2020

Viewing posts 1–6 of 6

March 10, 2020 at 8:14 am #1190993

I am trying to customize the Header I want to do something similar as to https://www.anytimefitness.com/ I want to have the logo on the left, menu items center and then a button to the far right. Looked through the forums, couldn't find the best way to go about this.

March 10, 2020 at 9:09 am #1191075

Hi there,

this article explains how to add a button to your navigation:
https://docs.generatepress.com/article/adding-buttons-navigation/

If you can do that and then i can assist with the CSS to style the button and position the logo / nav / button.

March 10, 2020 at 9:24 am #1191097

Thanks for your help on this David, I went in and added the css and added the class to a menu item Join Us. Ready for your help on the next steps. Also, with the button how to I push that down without having to make the border larger?

March 10, 2020 at 9:43 am #1191113

Add this CSS for all the alignment fixes:

@media (min-width: 769px) {

    .inside-header,
    .main-navigation ul {
        display: flex;
        align-items: center;
    }

    .main-navigation {
        flex: 1;
    }

    body .grid-container.inside-navigation {
        max-width: 100%;
    }

    .main-navigation li:first-child,
    .main-navigation .main-nav ul li.nav-button {
        margin-left: auto;
    }
    
}

Does that button style work or you need something else? Let me know

March 10, 2020 at 9:56 am #1191124

Hey, thanks, David! Worked perfectly. I just went back and tweaked the button css. So should be good now. If I need anything else that I cannot find in the form, Ill let you know. Thanks for the quick response. -Craig

March 10, 2020 at 10:00 am #1191131

Awesome - glad to be of help :)

This archived topic is closed to new replies.

Start building better websites today.