Help me before I loose my marbles (problem with modified template)

[Clearview]

Hi.

I am making some small changes to the header.tpl and custom.css files to more closely match the WHMCS template to the rest of my website.

I have managed to do most of what I need but have created a bit of a problem which I have spent a couple of days trying to find the cause for. I will have a background image in the header (not currently uploaded) which has a black 50% opacity overlay. For some reason the overlay has stopped the mouseover action for the main menu to work, The cursor doesn't even change to a hand as you pass over the menu items. I have tried changing the z-index of the overlay with no effect. If I turn the overlay class off, the menu works perfectly.

Also I have no idea and cannot find the property that sets the menu background to the green colour. I have spent hours looking at the style sheet and the code. I have used both Google Chrome and Firefox element inspectors and nothing appears to set the menu background colour (screenshot attached)

The webpage can be seen at https://bit.ly/2JyYUuK

Please help me before I loose the will to live with this.

Thanks

Richard

 

[brian!]

Hi Richard,

under normal circumstances, i'd have said to contact Themelook's support (as it's their GreenSSD template and they'll know it better than anyone!) - but I can see by your posts in their f0rum that you have posted there previously on other topics... were they of no help?

failing help from their support, your best bet might me to do a file search of the css files and see where that green color (#82b440) is defined... I can see it's set in style.css and theme-color-1.css, but as it's part of the sticky menu script, i'm not sure if it's defined in js or elsewhere.

 

[Clearview]

Thanks for the reply. Unfortunately Themelook's support does not cover customisation of their templates and I have customised this one quite a bit.

I have managed to sort the issue with the menu colour. I now just have the strange overlay behavior to sort.

Thanks

Richard

[Experthost]

for green background:

 in /css/custom.css, line 150

	.is-sticky .header--navbar-wrapper:before {
    background-color: #82b440 !important;
    opacity: 1;
}
	

Get rid of "!important" or keep it along desired color code

[Clearview]

Thanks.

Both issues are sorted now.

Cheers for the help

[yggdrasil]

Use the developer tools in your browser (Ctrl+F12). They are your friend and you will find any issues with JS or CSS. Using that, you can see exactly what changes what on a page.

Edited June 15, 2018 by yggdrasil

[Experthost]

Posting  Frenzy? 

I bet that @Clearview would appreciate if  you've could be helpful while posting instead giving  him irrelevant "hints". 

Edited June 15, 2018 by Experthost

[yggdrasil]

3 hours ago, Experthost said:

Posting  Frenzy? 

I bet that @Clearview would appreciate if  you've could be helpful while posting instead giving  him irrelevant "hints". 

Irrelevant hints?

If he manages to use the developer tools which is what I suggested him, she/he will not need to come back here and ask each time he wants to see what some CSS does and where its located since it will take him a click or two. In fact, my advise was better than yours because instead of giving someone a fish when hungry I told him how to learn fishing 

Edited June 15, 2018 by yggdrasil