[Resolved] Box-shadow not showing?

[David]

Not sure what is causing this because its been fine for a while.

If you look at my Primary Nav, I added a button by adding a CSS class to the menu item (BUY NOW).

The button AND button:hover is supposed to have a box-shadow.

Problem:
1) Box shadow is no longer showing

2) Box shadow:hover shows when you hover but it’s below the actual box by about 20 px.

You have to look closely but you can see it in the screenshot (hovering)

I can send you temp admin access if you can please take a look?

[David]

You can see the shadow below it

[Tom]

Any chance you can send me the link to the site? Admin access shouldn’t be necessary.

Let me know 🙂

[David]

Is it possible to send it to you privately? It’s pw protected while I develop

[Leo]

Yup you can send it through Account Issue here: https://generatepress.com/contact/

Please reference the topic. Thanks!

[David]

Thank, I just sent the info

[David]

If you’re taking a look, I just realized that the product thumbnail is not showing in the cart page on mobile. If you could give me your thoughts on that, much appreciated 🙂

[Tom]

You need to add spacing below the navigation, so the menu item shadow isn’t cut off by the bottom of the element.

For example:

.main-navigation {
    margin-bottom: 20px;
}

WooCommerce hides the product image in the cart on mobile by default.

You should be able to bring it back like this:

@media (max-width: 768px) {
    .woocommerce #content table.cart .product-thumbnail, .woocommerce table.cart .product-thumbnail, .woocommerce-page #content table.cart .product-thumbnail, .woocommerce-page table.cart .product-thumbnail {
        display: block;
    }
}

[David]

Thanks Tom, it worked!

[Tom]

You’re welcome 🙂

[Author]

Posts