Changing Color In Add To Cart Button In Category Display Woocommerce

HI Bojan,
I have another question. Sorry to bother you but you seem to be the only one who answers my questions on the forum! I can’t seem to get the links in my main menu (on the top under my header image) to be evenly spaced apart.
Here is a link: https://www.lisascreativedesigns.com/

Do you have any magic CSS for me?

Thank you so much.

Hey again Lisa,

It really depends on what exactly are you looking to do.

Currently your menu items (li – which are holders of those links) are having 11% width, see screenshot https://screencast.com/t/5u6mBbSd09vI. So what you can do is remove that width and add some padding to the links. This will effectively add the same space between each menu item regardless of the amount of text it has (hopefully this is what you’re looking to do).

To do that please try adding the following:

ul#menu-main-menu {
    text-align: center;
}

#nav-second ul.sf-menu>li {
    width: auto;
    display: inline-block;
    float: none;
}

#nav-second ul.sf-menu>li>a {
    padding: 10px 20px;
}

I’m assuming that you want to center that navigation as well so I added the code for that too, this should be the result https://screencast.com/t/kLumhddxxTkg.

Hope this helps ??

Cheers,
Bojan

Awesome! That did the trick. Thank you so much!

Glad I could help and have a great day Lisa!

Cheers,
Bojan

Hello Bojan,
I have another CSS question for you. How would I decrease the space above and below each footer link? I would like them a little bit closer. Example: The space below and above Customer Login, My Account, Shop Lisa’s under Shopping Info in the footer menu?
https://www.LisasCreativeDesigns.com

Thanks so much.
Lisa

Hey again Lisa,

There is both padding and margin on those links in the footer, you can reduce the space by adding the following:

#containerfooter .menu li a {
    padding-bottom: 0;
    margin-bottom: 0;
}

Hope this helps ??

Cheers,
Bojan

Thank you. ??

Glad I could help ??

Cheers,
Bojan

Hello,

I am having a similar problem – the product title boxes are all different heights. For some reason the code above doesn’t make a difference.

I am using a temporary site – but you can see the problem here:
https://www.podtestsite.co.uk/shop/

Any help would be greatly appreciated!
Thank you ??

Hey there georgia_katieleamon,

In the future please open your own thread rather then posting in such an old thread with different topic.

With that being said this happens because your title goes into 2 lines when it has a lot of text, you can add minimum height for the title which would make them all appear the same regardless of its being in one or two lines.

Please try adding the following as instructed above:

.product-details h3.product-title {
    min-height: 50px;
}

If you have any additional questions please open your own thread.

Best regards,
Bojan