[Support request] Targeting a Single Navigation Menu Item to Create a Button

[Leo]

ahh can’t believe I miss that.

Max have you added anything else in the additional CSS box? There might be a syntax error somewhere to stop the code from executing.

You can try moving this block of CSS to the top of the additional CSS box?

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

}

[Max]

Ok!

I got the navigation to show up, I didnt realize the text color current would do that.

But now the other CSS isnt showing up on targeting that button specifically.

My CSS class for the menu item is: nav-button

and then the code I have in the Additoinal CSS is:
.main-navigation .nav-button a {
background-color: #90c2b9;
border-color: #90c2b9;

}

P.S. The CSS for letter spacing is working now.

[Leo]

Is the CSS for letter spacing above or below the CSS for nav-button?

[Max]

It’s below the CSS for the nav-button

[Tom]

1. Add the class to your menu item, for example: nav-button

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

2. Add your CSS:

.main-navigation .main-nav ul li.nav-button a {
    background-color: #90c2b9;
    border: 1px solid #90c2b9;
    color: #000000;
}

[Leo]

ahh it’s getting over written. Change your selector to .main-navigation .main-nav ul li.nav-button a

[Tom]

Beat you 🙂

[Max]

Thats it! Nice. Wow, thats a specific tag for that thing. Crazy. Yeah, I tried targeting it the way you had linked before Tom so I was wondering why it wasn’t working.

Is there a list of these type of tags somewhere? That would be so helpful! And I wouldn’t have to bug you guys lol.

Thanks

[Leo]

We just use Inspect element from the browser 🙂 It’s a good skill to learn if you want to play with CSS a lot!

[Max]

Hey Guys,

I wanted to know what to target to change the mobile layout of the button? It looks funny when you switch to mobile.

And is there a way with targeting the mobile navigation to make it centered instead of left justified?

Thanks!

P.S. I tried to inspect too but I couldn’t find it for mobile.

[Leo]

You need to use the media query. Try this:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li.nav-button a {
        text-align: center;
    }
}

[Richard]

Hi Guys,

Two quick questions:

First, regarding the border-bottom line underneath my primary navigation.

I’d like to make sure there’s a little gap at either side when shrinking the overall screen size:

my domain: http://www.acousticpercussion.com

If you gradually shrink the size of the screen you’ll see the pictures have a gap between either side of the screen but the border-bottom line continues right across. I’ve set the container width to a specific width but the line seems to have its own setting. I can’t figure out how to alter this.

Second, is it possible to adjust the height of the just primary menu. I can’t quite line the menu up with the middle of the company logo. I can only seem to adjust the ‘menu item height’ but the only changes the size of the logo. Is there any way of independently adjusting the height on the primary menu without changing the height of the logo?

Hope all of that made sense!

All best,

Richard – UK

[Leo]

Hi Richard,

Can you start a new topic for your questions since they aren’t related to menu buttons?

Thanks very much!

[Roberto]

Tom/leo i need the button highlight but in the secundary nav Thanks

[Leo]

This should help: https://docs.generatepress.com/article/adding-buttons-navigation/

[Author]

Posts