Archived topic

Nav Button & Link Formatting

1 reply · Started by Joe on December 5, 2019

Viewing posts 1–2 of 2

December 5, 2019 at 9:20 am #1094807

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?

December 5, 2019 at 3:02 pm #1095148

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 :)

This archived topic is closed to new replies.

Start building better websites today.