My Next question is how do I change the nav bar links and hover color on each page?
Also, I want to change the mobile button colors on various pages as well.
What is the best way to do that?
My Next question is how do I change the nav bar links and hover color on each page?
Also, I want to change the mobile button colors on various pages as well.
What is the best way to do that?
Hello @quituck,
Thanks for updating the thread.
To change the nav bar links and hover color for each page, you will have to use WordPress page id feature. Here’s a sample code.
.page-id-3252 .x-nav-wrap.desktop a span {
color: #ddd;
}
.page-id-3252 .x-nav-wrap.desktop a span:hover {
color: #731616;
}
You need to change the page id 3252
. To find the page id, please take a look at following resource.
To change mobile button color for each page, please add following CSS under X > Theme Options > CSS:
.page-id-3252 .x-btn-navbar.collapsed {
background-color: #000;
}
.page-id-3252 .x-btn-navbar.collapsed:hover {
background-color: #ededed;
}
Please change page id 3252.
1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g
2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI
Thanks.
Hi, that worked perfectly! Thanks!
My next question is how to I change the color of the line that appears below the current menu item?
I tried using the following css and had no luck.
.page-id-153 .x-navbar .desktop .x-nav > .current-menu-item > a,{
color: #0ca265;
}
Hi @quituck,
Please add this to Theme Options > CSS
header .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: 0 2px 0 0 #ffffff;
}
Change the #ffffff with the desired color.
If that did not work, please provide your site URL.
Thanks,
Okay that worked for the page I am on. However, when I hover over the other menu items it’s not my color.
See the image attached for reference. I want the other lines that I hover over to be yellow not blue.
.
I tried using the following code:
header .x-navbar .desktop .x-nav > li.current-menu-item > a > span:hover {
box-shadow: 0 2px 0 0 #ffffff;
}
Also the woocommerce widget I put in the nav bar is giving me trouble it looks different from the setting options I chose for it. Is there a short code for the cart widget?
Please advise.
Hi @quituck,
Please change the above CSS to this
header .x-navbar .desktop .x-nav > li.current-menu-item > a > span, header .x-navbar .desktop .x-nav > li > a:hover > span {
box-shadow: 0 2px 0 0 #ffffff;
}
And would you mind providing a sample URL where this Woocommerce widget is?
Thanks!
That worked.Thanks!
My cart widget also worked, I just had to clear my cache to see my changes. I would like to have to cart icon in my top bar instead of my nav bar. Do you know the best way I can do that?
Hello @quituck,
Please be informed that the Cart Button is only available on the navigation menu. Regretfully there isn’t a way to transfer the cart icon in your topbar. It can only be doen with custom development which is outside the scope of our support.
Alternatively, you can place a cart icon, yes only the icon and the link with no dropdown or cart information details in the topbar by adding a basic icon and link code in the topbar content. You can use something like this:
<a href="http://example.com/cart/"><i class="x-icon-shopping-cart" data-x-icon-s="" aria-hidden="true"></i></a>
Hope this helps. Please let us know how it goes.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.