[Resolved] Nav Button & Link Formatting

[Joe]

Hi!

QUESTION 1:
I followed the instructions for adding buttons in the nav here: https://docs.generatepress.com/article/adding-buttons-navigation/ and I got a button (WOOOT!). However, I’m having trouble styling it. I looked at the “adding buttons” article but it’s not helping much because I don’t think my css is calling this button .button.

Here’s the code I have right now that’s working:

@media (min-width:769px) {
.main-navigation .main-nav ul li.login
a {
font-size: 15px;
background-color: #ffffff;
border: 2px solid #4B84B2;
border-radius: 5px;
color: #000000;
line-height: 30px;
}
}

How do I add hover/active states to that?

QUESTION 2:
My nav bar crush is https://get.chownow.com/ – I’ve managed to get a logo, nav links, button & hamburger in my nav like this but can’t figure out how to decouple the nav links and that nav button. I’d love to be able to have the nav links centered and the button all the way to the right next to the hamburger menu.

My site is on staging so I can’t offer you a helpful URL. Is there a way to send a screenshot?

[Leo]

Hi there,

Q1: Hover and active would be:

@media (min-width:769px) {
    .main-navigation .main-nav ul li.nav-button a:hover {
        background-color: #ffffff;
    }
    .main-navigation .main-nav ul li.nav-button a:active {
        background-color: #000;
    }
}

Q2: Screenshots don’t really help with questions like this. Can we revisit the issue once we have something live to look at?

Let me know 🙂

[Author]

Posts