Targeting a Single Navigation Menu Item to Create a Button

[Max]

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!

[Leo]

Hi Max,

Try this:

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

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Max]

.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/

[Leo]

Hi Max,

Your site is password protected.

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Max]

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.

[Leo]

Does your navigation label/link text show up?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Max]

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.

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Max]

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/

[Max]

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.

[Tom]

Would definitely help to be able to see the site 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Leo]

Tom I will send the login/password to you 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts