Couple of questions

[prestonsdavis]

I am working on my site and am having issues figuring a couple of things out. First one is I’m trying to center the woocommerce cart button so it doesn’t look out of place pushed up against the line break. Second if I go to the cart page of my site the hover links work but if I go to the main store page the hover links do not. How can I fix that and change the colors of the text, hover, and underline to match the color scheme of the site? The site is housed at https://www.earthtourists.com

Here is my custom CSS that I’ve added to achieve the color scheme so far:

.x-logobar {
background: transparent;
border-style: none;
border-color: rgb(0,0,0);
border-width: 0px;
box-shadow: none;
}
.x-navbar {
background: rgb(41,57,153);
border-style: none;
border-color: rgb(11,103,189);
border-width: 2px;
box-shadow: 2px 2px;
}
.x-colophon.top {
background: rgb(255,255,255);
border-style: none;
border-color: rgb(11,103,189);
border-width: 2px;
box-shadow: 2px 2px;
}
.x-colophon.bottom {
background: rgb(41,57,153);
border-style: none;
border-color: rgb(11,103,189);
border-width: 2px;
box-shadow: 2px 2px;
}
.x-widgetbar {
background: rgb(41,57,153);
border-style: none;
border-color: rgb(11,103,189);
border-width: 2px;
box-shadow: 2px 2px;
}
.x-btn-widgetbar {
border-top: 19px solid rgb(41,57,153);
border-left: 19px solid transparent;
border-right: 19px solid rgb(41,57,153);
border-bottom: 19px solid transparent;
color: rgba(255,255,255,0.5);
background-color: transparent;
}
.x-btn-widgetbar:hover {
border-top: 19px solid rgb(41,57,153);
border-left: 19px solid transparent;
border-right: 19px solid rgb(41,57,153);
border-bottom: 19px solid transparent;
color: rgba(255,255,255,0.5);
background-color: transparent;
}
.x-icon-facebook-square:hover {
color: rgba(255,255,255,0.5);
}
.x-icon-instagram:hover {
color: rgba(255,255,255,0.5);
}
.x-scroll-top {
color: rgba(255,255,255,0.5);
}
.x-scroll-top.in {
color: rgba(255,255,255,0.5);
}
a.x-scroll-top {
border-color: rgba(255,255,255,0.5);
color: rgba(255,255,255,0.5);
}

I appreciate any help or direction I can get cause it’s bugging me.

[friech]

Hi Preston,

Thank you for writing in, but your shop page is empty at the moment and there is nothing for us to inspect.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

[prestonsdavis]

Yes, I haven’t gotten that far with adding content. I was speaking of the menu bar above the store content page. As you can see from your screenshot the cart button sits directly on the line break and I want to center it between the line breaks. Also wanting to change the hover link colors on the menu bar. Just not sure where to change those at. I like to work on the basics of the page look and functionality before I start adding content so I can keep track of what breaks what so I can fix it.

[friech]

Hi Preston,

Thank you for the clarifications, to add right padding on the cart button, please add this to Theme Options > CSS

.x-navbar-static-active .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a {
    padding-right: 20px;
}

To configure the Cart color options, please navigate to Theme Options > Woocommerce

The Navbar links color options are under Theme Options > Header

Hope it helps,
Cheers!

[prestonsdavis]

That fixed all my issues except changing the underline color when hovering over the navbar links and for some reason the links don’t animate when hovering over them on the main page. If you click the woocommerce navbar cart button the links animate fine on that page. I’ve removed all custom CSS code and disabled every plugin and the links still wouldn’t animate on the main page. So I’m not sure what the issue is.

[ruenel]

Hello Preston,

At the moment, your home page is also your shop page. This means that both the home and the shop menu item is the current menu item. If you want to separate the menu items, you will need to disable the shop page as your homepage. Go to Settings > Reading > Front Page Displays and make sure that the Homepage is assigned to “Home” page and not the Shop page.

If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.