Css on hovers etc

HTML & CSS
1

I have a menu here:

http://www.muslimahwebdesign.co.uk/wofwt2

When you hover over connect and then hover over the sub menu items the word connect turns yellow which I want to change. The problem I am having is finding the code to change it as I am unable to inspect it’s element as I have to hover away from it.

How do I fins the code to change this?

2

When you have Inspect Element open, from opening it from one of the sub-menu items, you can then select in the Inspector panel, select other elements above it.

1278×681 115 KB

3

I tried that but none seem to be showing the yellow color that I want to remove?

I also tried :hover but that is not making any difference.

The yellow I want to change is the yellow the word " connect " turns when you hover onto the sub menus

4

The color is being applied from line 45 of the Dark Pink skin style.css file you are using.

I hope this helps.

5

I checked in my style.css and on line 45 is:

display: block; for .woocommerce-message:before, .woocommerce-error:before, .woocommerce-info:before

which is not what I’m looking for I think?

I’m looking to change the word connect in the menu as it turns yellow when you hover into the submenu and I want to change it from that yellow

6

The color is being applied by one or more of these selectors:

http://www.muslimahwebdesign.co.uk/wofwt2/wp-content/themes/lms/skins/dark-pink/style.css?ver=4.1.1
(line 45)

#main-menu > ul > li:hover > a, 
.header-register ul li a:hover, 
.dt-sc-button.filled:hover, 
.slider-search a, 
.dt-sc-custom-course-type:hover .dt-sc-course-details h5 a, 
.blog-entry:hover .entry-details .entry-title h4 a, 
.blog-entry:hover .entry-meta .date, 
.blog-entry:hover .entry-meta .entry_format, 
.widget.widget_text .textwidget .dt-sc-contact-info .icon i, 
h5.dt-sc-toggle a:hover, 
h5.dt-sc-toggle-accordion a:hover, 
.portfolio .image-overlay .links a:hover, 
.dt-sc-callout-box.type1 .dt-sc-button:hover, 
.dt-sc-callout-box.type5 .dt-sc-button:hover {
    color: #f1ad26;
}

Since this looks like a WordPress stylesheet, you should override the appropriate selector(s) on your local stylesheet.

1 Like
7

Ah I see what you mean now. There are different style shhets for different theme colours and it seems I was looking int he worng style sheet but just out of interest how did you get that as inspecting the element only shows this:

#main-menu > ul.menu > li > a {  padding: 13px 14px 11px;}

I’m having a similar problem with the background of the circles on this page:

http://www.muslimahwebdesign.co.uk/wofwt2/our-offerings/

If you hover over the circles it opens to a redish / pinkish background and I want to change it to green so i added:

.ch-info .ch-info-back: hover { background: #4f5a3a; }

but that doesn’t change the background when hovered over and I can’t eem to find that code?

8

I cannot answer the first question because you have already repaired the trouble

As far as the pink to green background goes, this might help. I use Firefox and Firebug. As shown in the screen shot below, I changed the following color to demonstrate that this is where the color is set.

http://www.muslimahwebdesign.co.uk/wofwt2/our-offerings/
(line 347)

.ch-item:hover .ch-info-back {
    background:rgba(230,132,107,.6) none repeat scroll 0 0;
}

1061×635 101 KB

9

Ahhhhhh I see from your answer why I have been having difficulties. I was only using inpect element on forefox and not firebug. I didn’t realise but it had been uninstalled. I reinstalled it and I was able to see the code like you demonstrated.

many thanks @ronpat;

10

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