Magento CSS Index

[WillDobson]

Hi Guys,

So I am trying to change some CSS on our site, We currently have one of our nav buttons colored orange, I want remove this and make it white like the rest of the buttons, However it seems like the CSS I to edit is it Index?

No idea where I would change this as I would normally edit the modules css frontend file.

I have attached an image of what im trying to describe.

Thanks

[WillDobson]

[Vimal Kumar]

HI @WillDobson,

You can define the same class again and add "!important" .

. class_name
{
color: #fff !important;
}

I hope it will help you!

[WillDobson]

Hi Vimal,

This doesnt work as it also sends all the text of the sub cats white as well making them unusable.

Thanks

[Vimal Kumar]

HI @WillDobson,

Could you share your website public url, where you want to change color?

So I can suggest better.  

[WillDobson]

Hi,

Sure its: https://www.fishingrepublic.co.uk

As you can see the category "Clothing" is now white however all the sub cats are also white so you can no longer see the text.

Thanks

[Vimal Kumar]

Hi @WillDobson,

I have checked, there was some extra class for nav7. 

Remove the following class from the css. 

.nav-sections .navigation.megamenu li.level0.nav-7 a span
{
.nav-sections .navigation.megamenu li.level0.nav-7 a span {
    /* color: #ff5000; */
}
}


.nav-sections .navigation.megamenu li.level0.nav-7 a span {
    /* color: #ff5000; */
}


.nav-sections .navigation.megamenu li.level0.nav-7 a span {
    /* color: #FFFFFF !important; */
}

After removing all css class. Result was as following image. 




I hope it will work for you!

[WillDobson]

Hi Vimal,

Unfortunately I cannot do that as I cannot locate the original CSS files, Inspector tool just says they are located in (Index)?

And ideas?

[Vimal Kumar · Accepted solution]

Hi @WillDobson,

It looks like that this css class in added using admin panel. 

Might be in head or header.  Check once in theme configuration in the admin. 

I found below code together.

<style xml="space"><!--
.cms-page-view .bluefoot-wrapper .cms-full-image {
    width: 100vw;
}
.cms-page-view {
    overflow-x: hidden;
}
.cms-page-view .bluefoot-wrapper h2.bluefoot-entity.bluefoot-entity {font-size:40px;}
.nav-sections .navigation.megamenu li.level0.nav-7 a span {
    color: #ff5000;
  }
-->

Or try once search in the whole database for query like "%.nav-sections .navigation.megamenu%".

or in core_config_data table. 

select * from core_config_data where `value` like '%.nav-sections .navigation.megamenu%'

Might be you got some clue. 

[WillDobson]

Hi Vimal,

Thanks for that, I ended up doing a dump of the DB and running a search query and it found the CSS in a random block that has nothing to do with the nav, This website is awfully built it seems.

Thanks for the help