[Resolved] Customizing Header

Home Forums Support Customizing Header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1190993
    Craig

    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.

    #1191075
    David
    Staff
    Customer Support

    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.

    #1191097
    Craig

    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?

    #1191113
    David
    Staff
    Customer Support

    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

    #1191124
    Craig

    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

    #1191131
    David
    Staff
    Customer Support

    Awesome – glad to be of help 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.