Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Navigation Bar Modifications

   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)
Thread Tools Search this Thread
Old 10-27-2019, 07:04 PM
egersheld egersheld is offline
Join Date: Oct 2019
Posts: 1

Question Navigation Bar Modifications


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 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>>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!
Reply With Quote
Old 11-01-2019, 12:12 PM
Ian Goodnight Ian Goodnight is offline
Join Date: Nov 2019
Posts: 1

Default 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.

X-Cart 5 Ultimate
Reply With Quote
Old 07-05-2020, 05:28 AM
Ed B. Ed B. is offline

Join Date: Apr 2016
Posts: 401

Default 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.
X-cart 5.2.12, php 5.6
Ed from Grenoble, France
Reply With Quote
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

All times are GMT -8. The time now is 08:59 AM.


X-Cart forums © 2001-2020