X-Cart forums

[NockingPoint]

Hi!

I'm having some troubles trying to modfy the CSS of my main menu,
I'm using Look & Feel > Custom CSS feature.

First: I've modify the normal nav bar (was grey and white letters) but when I do it then I can see a border (I took all borders from nav bar class) Img 1. Then I have make that on Hover I have letter changing and border bottom, (Img1.) But when I see the Sales Section It doesn't change (Img2.) and I can't figure out what is that I have to change to make this same as the others..
(I have changed the Span and class that it has and nothing happens)

Img 1.



Img2.


Is there any another way (other than Look and Feel Feature) to change the style that I want to give to the page? And if so. Could you comment it so I can try it ?

Thanks for the help!

[qualiteam]

Is the site available from Internet? It would help a lot if we can check its source code.

Also, do you use the "Inspect this element" function built into modern browsers? It can show you where the wrong CSS rules are coming from. Before using the function it makes sense to disable the widget cache and the CSS & JS aggregation (Look & Feel -> Performance).

[NockingPoint]

Alex Thanks for the response,

No, it's not online yet because I'm trying to first figure out how to use x-cart, Yes I've been using "inspect element" feature but when I see the specific css for the element I don't see where the ":hover background:grey"(example) is..

disable widgets? Okey, I will do that first then...

Thank you,

[xplorer]

Not widgets. You should disable the cache that stores the HTML code of widgets and the CSS & JS aggregration function.
All these settings are on the Look & Feel -> Performance page.

[NockingPoint]

Salva!
Thanks for the response!
I did that and for now is going well! hahaha x)

Thanks for the help guys!

EDIT:

I could manage to change the full navbar... The only problem that it is still there, is that when I hover over the ul in Sales or My Account the buttons turns background to grey (Like the default behavior).. How can I change this?

Here's an image of what happens (this is when I hover over Sale or Bestsellers buttons):

[qualiteam]

Here is the CSS rule that adds the background (and that you are to override to remove it):

.top-main-menu>li>span.primary-title.tap,
.top-main-menu>li>a.tap,
.top-main-menu>li:hover>span.primary-title,
.top-main-menu>li:hover>a {
    background-color: #363636;
}

You can simulate the :hover effect in the Google Chrome's developer toolbar.
Please check the attached screenshot.