Archived topic

Targeting a Single Navigation Menu Item to Create a Button

29 replies · Started by Max on January 25, 2017

Viewing posts 1–15 of 30

January 25, 2017 at 9:51 am #268508

Hi Tom,

So I am trying to make one of the nav links a button.

I added this code to the Navigation label: <button id="nav-button">BOOK A SESSION</button>

Then in customize --> additional CSS --> I added this code:

.nav-button {
background-color: #90c2b9;
color: white;
}

I can't seem to target the specific nav item. And should I be doing this in a child theme or is the additional CSS an ok place to format.

Thanks!

January 25, 2017 at 9:53 am #268510

Hi Max,

Try this:

#nav-button {
    background-color: #90c2b9;
    color: white;
}

Let me know.

January 25, 2017 at 10:02 am #268519

Or try adding buttons using the instruction below:
https://docs.generatepress.com/article/adding-buttons/

January 25, 2017 at 10:17 am #268535

This method is a lot better: https://generatepress.com/forums/topic/adding-a-button-to-menu-workaround/#post-228678

January 25, 2017 at 10:29 am #268542

.main-navigation .nav-button a {
background-color: #90c2b9;
border-color: #90c2b9;
color: #000000;

}

I have this code added to the additional CSS and now the nav link won't show up at all lol.

I took out the html button tag from the navigation menu as well. Should I put that back in there?

http://christinahouserphoto.flywheelsites.com/

January 25, 2017 at 10:42 am #268555

Hi Max,

Your site is password protected.

Did you add the custom CSS class nav-button as instructed here?

January 25, 2017 at 10:46 am #268557

yeah, I added the custom class CSS as:

nav-button

Then pasted this code into the additional CSS in the customizer:

.main-navigation .nav-button a {
background-color: #90c2b9;
border-color: #90c2b9;
color: #000000;

}

Nothing. No button anymore.

I can post the username and password to the site so you can see if you'd like.

January 25, 2017 at 10:51 am #268567

Does your navigation label/link text show up?

January 25, 2017 at 10:53 am #268570

No, it doesn't show up. I got nothing.

The button will show up if I put the html <button>Book a Session</button> in the navigation label. But then I can't target that element to customize it.

January 25, 2017 at 11:00 am #268573

That's weird not even the navigation links are showing up.

Just want to make sure that you filled the box like this: https://s27.postimg.org/lh5vjtyvn/book.jpg

Are other menu items in the same navigation showing up?

Probably wouldn't hurt to see the site. I'll delete the login/password as soon as I see it :)

January 25, 2017 at 11:03 am #268577

Yeah I filled it out right, strange. Ill take a screen shot after I send the username and password for the site.

http://christinahouserphoto.flywheelsites.com/

January 25, 2017 at 11:07 am #268582

Even when i added some code to the addtional CSS to make the letter spacing larger, that didnt work either:

.main-navigation a {
letter-spacing: 3px;
}

I dont know whats up lol.

January 25, 2017 at 11:15 am #268587

Would definitely help to be able to see the site :)

January 25, 2017 at 11:15 am #268588

Tom I will send the login/password to you :)

January 25, 2017 at 11:17 am #268589

Your current menu item color is set to white, so it's white text on a white background.

Customize > Colors > Primary Navigation.

That will at least make it show up.

I'm not seeing any CSS specific to the nav-button class.

This archived topic is closed to new replies.

Start building better websites today.