Navigation Bar Modifications
 

Hello!

I'm trying to change the style (color, size, etc.) of my website navigation bar, but it seems like only some solutions I've found on this forum work. I'm using a free "Digital Template" (X-Cart 5.3.6.4). What my problem boils down to is trying to understand how to refer to website's elements.

For example:

.navbar-inverse {background-color: green !important;} (rovided by default) Didn't work, while it worked when I reffered to the element as:
.navbar.navbar-inverse { background: green !important;}

This is even more complicated for me.
This works:
.navbar.navbar-inverse .navbar-nav>li.active>a
This doesn't:
.navbar-inverse .navbar-nav > .active > a

Does it have to do with the version of X-cart I'm using? Is there an easy way to learn how to refer to all the elements of the website besides the navigation bar (keep in mind I'm a noob)?

Anyways, things I'm currently struggling to change are:
Navigation bar hover color and drop-down menu color (main color + hover color)

I appreciate any help!

Re: Navigation Bar Modifications
 

You could try copying the CSS selector using the inspection tools provided by chrome. Ctrl+Shift+C will open the Element inspector. Click on the element you want to apply custom styles to and you will see it highlighted in the HTML shown in your inspection console. If you right-click the element that was highlighted in your console, you have the option to "copy selector" which you can then paste into your custom CSS to apply your rules. Keep in mind that the selector provided will be super specific, so you may need to tweak it. (ie: changing #top-main-menu-with-hor-fly-cats > li:nth-child(9) > a > span to #top-main-menu-with-hor-fly-cats > li > a > span.

Re: Navigation Bar Modifications
 

It might differ from a version of xc to another. But it depends a lot on template. I would suggest using developer feature of your browser.