How to change the spacing on the hamburger menu

So first off, there is a large space under all pages that have children. I want that space to be before any page that has children.

Hi @kjc1900 You can use CSS code to remove the padding on top of the submenu area. You can add the CSS code below to the navigation block as shown in the short video.

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
    padding-top: 0px;
}

And finally, if anyone can point me to where the style css is for the main navigation menu I would be so grateful.

Secondly, is there a way to style the list on mobile so it does not indent so far in on the left?

Would you like to move it more to the right or the center of the page?

• This reply was modified 1 year, 7 months ago by thelmachido a11n.

Thank you so much for taking the time to help me. I appreciate it very much! I’m going to go give your solution a shot.

@thelmachido, it isn’t working. Do you have any different ideas?

Hi @kjc1900 – I’m not seeing the CSS Thelma provided in your custom CSS:

https://verbalabusejournals.com/?custom-css=382b8d154b

It looks like the item above your /*navigation menu*/ code comment is missing the closing curly bracket, which could be causing any CSS after that to not render. I see:

@media only screen and (max-width: 651px) {
	#breadcrumbs {
		font-size: .9rem;
	}

Instead of:

@media only screen and (max-width: 651px) {
	#breadcrumbs {
		font-size: .9rem;
	}
}

Try adding the missing curly bracket to see if that fixes the other CSS you’ve added below it. Let me know how it goes!

You are right about the curly bracket and I’m amazed that you saw that! I’m excited to try Thelma’s suggestion again.

@kjc1900 Great! I also just wanted to mention that the CSS Thelma provided can either go in your Customizer’s Additional CSS panel – where it looks like you’ve added your previous CSS – or if you’re using WordPress 6.2, it could also go in the site-wide CSS editor. (It’s not meant to go in the Navigation block’s block-specific CSS editor, which needs its CSS formulated in a very specific way to work correctly.)

Let me know how it goes!

Thank you for your help. The solution provided didn’t work, but I found something else that did. It was a setting in Gutenberg, but I’m sorry, I don’t remember which one. The problem got fixed and I moved on to other problems without taking proper notes.

I appreciate you! It’s as important to know what doesn’t work for my theme as it is to know what does. ??

Hi @kjc1900 thanks you for taking the time to give an update on the issue, that is very helpful. If you have any questions in the future feel free to reach out to us.