[Resolved] Styling nav bar

[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

[David]

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.

[Gabrielle]

Thanks, David–done.

Cheers,
Gabrielle

[David]

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

[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

[David]

Try this CSS:

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

[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

[David]

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;
}

[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

[David]

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

[Author]

Posts