[Resolved] Styling nav bar

Home Forums Support Styling nav bar

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1357605
    Gabrielle

    Hi there, I’m moving a client to Generate Press and I’m trying to style the menu as per their current site. I’ve had some success, but now could do with your help.

    The current site is https://qpla.com.au/

    In the staging environment (set to private), I’m using navigation as a header and have recreated the current menu with the logo as the home option. I’d like to have the logo flush to the left, regardless of the container size.

    I’ve created a menu item “Book Now” that I’ve set to float right, but it’s also constrained by the container. I’d also like to style it the same as the current site, with the different background color and padding on either side.

    I’m using a secondary nav bar above the header, with only the phone number, and I’d like to have that flush to the right.

    The biggest issue I’m facing (i.e. where I have the least amount of knowledge–I can see all the css when I inspect, just not sure which parts to grab 🙂 ) is making the mobile menu act the same as it does now–keeping just the logo, “Menu” text and “Book Now” button for tablet, and preventing the phone number in the secondary nav bar from converting to a hamburger.

    Thanks in advance,
    Gabrielle

    #1358094
    David
    Staff
    Customer Support

    Hi there,

    can you provide access to the GP Site?
    You can send login via the Account Issue form:

    https://generatepress.com/contact/

    Please include the URL of this topic.

    #1361560
    Gabrielle

    Thanks, David–done.

    Cheers,
    Gabrielle

    #1361667
    David
    Staff
    Customer Support

    Got the link thank you 🙂
    Need to do a fews in the Customizer setup then i can look at the CSS we’re going to need to style it like the original.

    1. Instead of using the Secondary Navigation can you use the Top Bar Widget Area to display the phone number.

    1.1. Once a widet is added to it you can set it to Full Width in Customizer > Layout > Top Bar. Set both Top Bar Width and Top Bar Inner Width

    2. Likewise you can set the Primary Navigation Width and Inner Navigation Width to Full in Customizer > Layout > Primary Navigation.

    2.1 And whilst you’re there reduce the Mobile Menu Breakpoint to keep desktop and tablet the same.

    Once done, let me know and ill take a look at the CSS

    #1362578
    Gabrielle

    Thanks, David, the top bar widget does the trick. Any idea how to reduce the space between the telephone image and the text? I’ve used a text widget.

    Cheers,
    Gabrielle

    #1362806
    David
    Staff
    Customer Support

    Try this CSS:

    .top-bar .alignleft {
        margin-right: 0.25em;
    }
    #1363842
    Gabrielle

    Hi, David,

    That did the trick of moving the phone image over; I also added margin-top: 0.25em to align it with the phone number text. Thank you!

    However, the telephone and text appear on different lines in the mobile menu. I’ve fiddled around a bit and haven’t been able to resolve it.

    I’ve also fiddle around with the nav-bar button styling for “Book Now,” by setting the CSS class as custom-button and adding this CSS:

    .custom-button a {
    font-weight:600;
    color: #ffffff;
    text-align: center;
    background-color: #193441;
    width: 150px;
    }

    All good, except it’s ignoring the color–I assume it’s inheriting it from the colors I have set up for the main nav bar. I tried making it a:link, but nope.

    If you could point out the error of my ways, I’d appreciate it.

    Cheers,
    Gabrielle

    #1364143
    David
    Staff
    Customer Support

    Yeah align classes are overridden on mobile. Update your CSS to this:

    .top-bar .alignleft {
        margin-right: 0.25em;
        margin-top: 0.25em;
        float: left !important;
    }

    Navigation item menus have highly specific CSS selectors – try this for your CSS:

    .main-navigation .main-nav ul li.custom-button a {
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        background-color: #193441;
        width: 150px;
    }
    #1365047
    Gabrielle

    THANK YOU so much, David! That’s the last bit of the puzzle, now I can go live.

    I really appreciate your help with fiddly CSS things that aren’t actually part of GeneratePress–5-star review left on WP 🙂

    Cheers,
    Gabrielle

    #1365258
    David
    Staff
    Customer Support

    Glad to be of help. And thank you very much for the 5 stars 🙂 We really appreciate it.

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