Navbar styling issue

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:

My result looks like this:

111AF99C-F02C-43DD-A03F-D70E15EC83E5_4_5005_c

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!

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.

Thanks so much @ruenel - appreciate your assistance!

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

24F95C17-DEDB-4A1D-9319-0A5FDD44B075_4_5005_c

I’ll attach the info you requested - thanks!

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.

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

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

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.