Removing background from widget area menu items

Support
#1

Hi there,

I have a widget area with a horizontal menu on one of my pages, and I changed the background of the widget area to a semi-transparent one. Unfortunately the three menu items have a white background and I would like to remove that.

  1. Do you have any idea of how I could change my page CSS to remove that white background behind the widget menu text?

  2. It would also be great if I could have the current (widget-area) menu item text a different color and underlined. Is that an easy fix?

Thanks so much for your assistance - your team is so helpful and wonderful!

#2

Hello There,

Thanks for posting in!

Do you want something like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-widget-area .widget_nav_menu .current-menu-item>a {
    background-color: transparent;
    text-shadow: none;
}

.x-widget-area .widget_nav_menu .menu-item:hover >a {
    color: red;
    text-decoration: underline;
}

We would loved to know if this has work for you. Thank you.

#3

This worked perfectly - thank you so much!

I have changed the colors so it all fits the theme, and it works really well.

One question though - I have replicated this on the other three main pages (Participate in the Market, Code of Conduct, Policy Landscape), but the text in the menus are dark blue (#1c2542 HEX), whereas they should be light blue (#62abc2 HEX) as per the first Market Intelligence Page.

Is there a page specific code I need to put in global CSS to make sure the color carries across to all the pages?

For reference, the pages are:

Participate in the Market - http://marketplace.carbonmarketinstitute.org/participate/
Code of Conduct - http://marketplace.carbonmarketinstitute.org/code/
Policy Landscape - http://marketplace.carbonmarketinstitute.org/policy-landscape/

Thanks again for your invaluable support - it’s just amazing :slight_smile:

#4

Hi There,

Please also add this custom CSS:

.x-widget-area .menu {
    background: #248379
}
.x-widget-area .menu > li a {
    color: #fff;
    text-shadow: none;
}

Hope it helps :slight_smile:

#5

Hi there,

Thanks for your support - unfortunately it’s not quite what I was looking to do. I don’t need to change the background color, I need to change the text color.

On the market intelligence page, the top menu text is light blue. On the other three pages, the top menu link text is black. Are you able to assist in changing the top menu link text color on the other three pages? See image comparing two of the pages below:

Thanks again!

#6

Hi There,

Thanks for writing in!
I can see the top menu is black on every page including marketing intelligence.

To change the color Please use this CSS.

.x-widget-area .menu > li a {
 color: #62abc2;
}

Hope this helps!

#7

That worked perfectly - thanks so much!

Really appreciate the help - you and your team are legends :smile:

#8

You’re more than welcome, glad we could help.

Cheers!

#9

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