[Resolved] Nav Button & Link Formatting

Home Forums Support Nav Button & Link Formatting

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1094807
    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?

    #1095148
    Leo
    Staff
    Customer Support

    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 🙂

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