Hi,
I’ve used the Theme Options>Woocommerce settings to align the cart button in the top nav. However, once I scroll down, the alignment is off. How do I fix this? Thanks.
Hi There @coracle
Thanks for writing in! Could you please try adding the following CSS rule into your X > Theme Options > CSS area.
.x-navbar .x-nav > li.x-menu-item-woocommerce > a .x-cart:not(.stacked) {
margin-top: 0;
}
Hope that helps.
Hi @mldarshana,
I purposely added a 10px margin so that the spacing would look right when it first loads.When I implement your suggestion, the spacing looks off when loading and when scrolled. The padding that I think need to adjust is for
.x-navbar-static-active .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a, .x-navbar-fixed-top-active .x-navbar .desktop .x-nav > li.x-menu-item-woocommerce > a { padding-top: 65px; }
but I don’t know how to target it once scrolled. Thanks.
Hi again,
You can target the button when scrolled with x-navbar-fixed-top class. To fix the issue, just add the following code in the Theme Options > CSS:
.x-navbar-fixed-top .x-btn-navbar-woocommerce {
padding-top: 30px !important;
}
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Cheers!
Glad we could help.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.