[Support request] how to add a side bar on the left into the SHOP page?

[Robert]

Hi

I just wanna ask how to add a side bar with the MENU, on the left into the SHOP page?

I made it but there is no efekt:
https://snipboard.io/x4obVY.jpg

https://snipboard.io/Ccp1iD.jpg

Kr
R.

[Fernando]

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/

[Robert]

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

[Robert]

I think I’m closer :))

How can i make smaller the space between the MENU ?

https://snipboard.io/KnLW9B.jpg

[Robert]

..

[Ying]

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;
}

[Robert]

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.

[David]

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;
}

[Robert]

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

[David]

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;
}

[Author]

Posts