how to add a side bar on the left into the SHOP page?

Hi Robert,

What you can do is enable the Sidebar through Appearance > Customize > Layout > WooCommerce > Sidebar Layout. Reference: https://docs.generatepress.com/article/woocommerce-overview/#shop

Then, create a Block Element - Sidebar, and set it to display on the Product Archive page. Reference: https://docs.generatepress.com/article/block-element-sidebar/

Add a WP Navigation Block there. Reference: https://wordpress.com/support/site-editing/theme-blocks/navigation-block/

Hi

I can see it now but I can't make any changes for the side bar on the left
for example - the background color, font size ect.

https://snipboard.io/Y59sKc.jpg

I think I'm closer :))

How can i make smaller the space between the MENU ?

https://snipboard.io/KnLW9B.jpg

..

Hi Roert,

Try this CSS:

.is-left-sidebar ul.wp-block-navigation__container > li >a {
    padding-top: 0;
    padding-bottom: 0;
}

.is-left-sidebar ul.wp-block-navigation__container {
    row-gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

Hi

yep - it works :)
thx!

Just 2 thing more:
- do I need extra CSS code to edit/change the 2 colors of my links if I move with the cursor overt it?

https://snipboard.io/dqNl9m.jpg

In the ELEMENTS settings I can't find it:
https://snipboard.io/7ylfJh.jpg

Thx
R.

Hi there,

try this CSS:

/* parent menu */
.wp-block-navigation .wp-block-navigation-item:hover a {
    background-color: #00f;
    color: #000;
}
/* sub menu */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item:hover a {
    background-color: #0f0;
    color: #fff;
}

Hi

Thx for Your code...

I wanna ask how could I change the background color of the whole links in the sub-menu
https://snipboard.io/MNvEOT.jpg ?

Now it is red.

R

If you want the sub menu items to have a different normal color then add this CSS:

/* sub menu not hover */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
    background-color: #0f0;
    color: #fff;
}