-
Hi there!
The mobile version of the left sidebar element, In which I have used a Gutenberg navigation block, displays all the items in the menu with no padding in its open state.
Do you have any suggestions on how to add padding to the open state of the navigation block in mobile?
I am also looking to add the site logo and change the background of the open state to a gradient. Do you also have any suggestions on how to achieve this?
I am using the following CSS code, but I haven’t had much luck getting it to work:
.wp-block-navigation .is-open .menu-item {
padding: 10px;
}.wp-block-navigation .is-open {
background: linear-gradient(to bottom, #ffffff, #f0f0f0);
}Thank you!
-
Hi there,
Try this：
.wp-block-navigation__responsive-container.is-menu-open { padding-inline:20px; background: linear-gradient(to bottom, #ffffff, #f0f0f0); } -
Fantastic, thank you so much! The only thing I still need to do is add the site icon to the top of the menu. The URL for the icon is:
https://boliviatravelernews.com/wp-content/uploads/2024/02/Bolivia-Traveler-News-Icon_White.svg.
How would you sueggest I insert the icon and resize it to 20% using CSS?
Thank you!
-
I don’t think there’s a way as far as I know, it’s a core block, and we don’t have control over it.
I’m not familiar with its functions, not sure if there’s a hook you can use. You might need to contact WP support for this.
- You must be logged in to reply to this topic.