Navbar styling issue

[Loutopia]

Hi there! I want to be able to style individual links on the navbar of a site I’m building for a client. So far I have followed the excellent advice offered in the forum link below, which has gotten me 90% of the way:

Would like one menu button to be a different color

How can I define just the “Contact” button in my header menu, so I can change the color of just the one link? Thank you.

My result looks like this:

How can I get the ‘Join a party’ and the ‘Shop’ text to center to the white ‘button’ background? And will it compromise the mobile responsiveness?

Code used for both:

Join a party:
.x-navbar .desktop .x-nav > .menu-join > a {height: 80%; margin-top:8px; margin-right: 5px; background-color: white; border: 1px solid #fff; border-radius: 25px; color: #128798;}
.x-navbar .desktop .x-nav > .menu-join > a:hover {color: #a20078;}

Shop:
.x-navbar .desktop .x-nav > .menu-shop > a {height: 80%; margin-top:8px; background-color: white; border: 1px solid #fff; border-radius: 25px; color: #128798;}
.x-navbar .desktop .x-nav > .menu-shop > a:hover {color: #a20078;}

Thanks for any help you can offer!

[ruenel]

Hello Louisa,

Thanks for writing in! Please remove the top margin in your custom CSS code. If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Loutopia]

Thanks so much @ruenel - appreciate your assistance!

I’ve removed that top margin element, but now I’m left with this:

I’ll attach the info you requested - thanks!

[ruenel]

Hello Louisa,

Please revert back your CSS changes and then add a top and bottom padding of at least 5 pixels. Therefore, your CSS code can be like this:

.x-navbar .desktop .x-nav > .menu-join > a {
	height: 80%; 
	margin-top:8px;
	padding-top: 5px;
	padding-bottom: 5px; 
	margin-right: 5px; 
	background-color: white; 
	border: 1px solid #fff; 
	border-radius: 25px; 
	color: #128798;
}

.x-navbar .desktop .x-nav > .menu-join > a:hover {
	color: #a20078;
}


.x-navbar .desktop .x-nav > .menu-shop > a {
	height: 80%; 
	margin-top:8px; 
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: 
	white; border: 1px solid #fff; 
	border-radius: 25px; 
	color: #128798;
}

.x-navbar .desktop .x-nav > .menu-shop > a:hover {
	color: #a20078;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Best Regards.

[Loutopia]

That works absolutely perfectly, thanks so much for your help I really appreciate it

[ruenel]

You’re welcome!
It’s good to know that it has worked for you.