Archived topic

Button in Primary Nav Menu

12 replies · Started by Janine on December 31, 2020

Viewing posts 1–13 of 13

December 31, 2020 at 12:16 pm #1601033

Hi.

I used the code in your documentation to place a button on my primary nav menu.

@media (min-width:769px) {
.main-navigation .main-nav ul li.nav-button a {
background-color: #fff;
border: 2px solid #0920d5;
color: #222;
line-height: 35px; /*this number will likely need to be adjusted*/
}
}

.button.ghost, .button.ghost:visited {
background: transparent;
border: 2px solid #FFF;
}
.button.ghost:hover,
.button.ghost:active {
background: #FFF;
color: #222;
border: 2px solid transparent;
}

I would like to do three things:

(1) I want my button to be a solid #0920d5 and then go white with a border on hover.
(2) I would also like the border radius to be a 4 or 5.
(3) I would like to have a CTA button on mobile.

Thank you.

December 31, 2020 at 3:43 pm #1601143

Hi Janine,

Try to replace your css with this:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li.nav-button a:hover {
        border: 2px solid #0920d5;
        background-color: white;
        border-radius: 4px;
    }
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #0920d5;
        border: 2px solid #0920d5;
        color: #222;
        line-height: 35px;
    }
}

Let me know :)

January 1, 2021 at 3:07 am #1601397

Hi.

Thank you. But not quite.

When the button is not visited I want it 0920d5 with white text and a border radius of 4.

On hover it looks fine, though.

January 1, 2021 at 12:57 pm #1601969

Then use this css:

@media (min-width: 769px) {
    .main-navigation .main-nav ul li.nav-button a:hover {
        border: 2px solid #0920d5;
        background-color: white;
        border-radius: 4px;
        color: #0920d5;
    }
    .main-navigation .main-nav ul li.nav-button a {
        background-color: #0920d5;
        border: 2px solid #0920d5;
        border-radius: 4px;
        color: white;
        line-height: 35px;
    }
}

January 1, 2021 at 2:40 pm #1602033

Thanks for trying. But it didn't work. In fact, the button disappeared completely.

I will try something else.

BE SAFE in 2021.

January 1, 2021 at 6:03 pm #1602124

That CSS shouldn't make the button disappear.

Let us know if you need another look.

January 2, 2021 at 3:31 am #1602372

Hi.

I have sent a before and after screenshots for your review.

Thank you.

January 2, 2021 at 8:04 am #1602760

Hi there,

what is the CSS class you're adding to your Button Menu item ?
In your working CSS it looks like it is btn-1 - you will need to change it to nav-button for Yings CSS to work.

January 2, 2021 at 12:59 pm #1603021

Thanks, David. That got me almost there.

How can I change the colour of the button text on hover to 0920d5? Right now, when I hover, I get a blue border but the button text is white or not visible. Thank you.

January 2, 2021 at 3:14 pm #1603104

Hi Janine,

Edited CSS here:
https://generatepress.com/forums/topic/button-in-primary-nav-menu/#post-1601143

Let me know :)

January 2, 2021 at 5:05 pm #1603165

Thanks, Ying. I don't like this button. So I will keep searching for one.

January 2, 2021 at 5:52 pm #1603202

OK, hope you'll find the one you like :)

January 2, 2021 at 6:02 pm #1603210

;-))

This archived topic is closed to new replies.

Start building better websites today.