Isolating a single heading in the navbar to change its color and add a rounded-border

[brian_manning]

Hi guys,

Homepage 2020 - Sunbeam House Services

I want to add a custom link in the navbar as a ‘Donate’ button. I want this item to be a different colour to the other words in the navbar and have a border too.

In the MENU section I created a custom-link and gave it our paypal URL when you click on it and in there there is an option to add a CSS class. I called it donate_nav.

Then I went inot X-theme options-CSS and added the following to no avail. What am I doing wrong?

/donate button in nav/
.donate_nav {
color: red;
}

Kind regards,
Brian.

[prakash_s]

Hi Brian,

Thanks for writing to us.

Add this code in X -> Theme options -> CSS to add different menu colour and border.

.x-navbar .x-nav .donate_nav a{
color:red;
}
.x-navbar .x-nav .donate_nav a:hover span{
border:1px solid #000;
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks