Change background color on 1 menu item

Support
#1

I was reviewing this thread and made the adjustments, but nothing happened.

I used this code to Global CSS:
.x-navbar .desktop .x-nav>li.menu-highlight a span {
background-color: #000;
color: #fff;
}

I added menu-highlight to the Custom CSS section in the menu and nothing has changed.

I would like to change the background color on the COVID-19 menu item on this website: https://www.cynergycrossfit.com

I would like it to work on mobile too.

Thanks for your help!

#2

Hello @ccwadsworth,

Thanks for writing in!

Your code is actually correctly. It just that it is not applied to the menu because prior to that CSS block, you have added this custom JS code int he CUSTOM CSS section which is not correct.

jQuery(document).ready(function($){$('.open_accordion.x-btn').click(function(e){var $this = $(this);var thisHref = $this.attr('href');var accordion = $(thisHref).find('.x-accordion-toggle');if ( accordion.length && $(thisHref).hasClass('x-accordion-group') ){e.preventDefault();accordion.trigger('click');}});});

Please remove this JS code in the Custom CSS section. You should be adding the JS code in Custom JS section.

Please let us know if this works out for you.

#3

Ahh! Thank you for identifying that, I appreciate it!
Would you be able to help me increase the size/padding of the black background, so it looks more like a button?
Thanks so much!

#4

Hi @ccwadsworth,

You need to add padding attribute to your CSS just like the example given below.

.x-navbar .desktop .x-nav>li.menu-highlight a span {
  background-color: #000;
  color: #fff;
  padding: 10px;
}

Thanks

#5

Thank you!

#6

Hi @ccwadsworth,

You are welcome.

#7

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