How do I remove the hamburger menu from the Twenty Twenty Four theme?

Question

I'm trying to remove the hamburger menu from the Twenty Twenty Four theme while in mobile view and have the navigation appear at the top of the page vertically.

I'm able to remove the hamburger button with the following code:

@media (max-width: 600px)

{

button.wp-block-navigation__responsive-container-open
   {
        display: none;
    }


}

And make the navigation icons appear with this code:

.wp-block-navigation__responsive-container
  {

   
display:block; 

}

However, the navigation links don't appear vertically and they appear in the background of the website as I scroll.

Any suggestions?

Answer 1

At its heart this is a CSS question rather than a WordPress-specific question, but there is one aspect of it that's specific to WordPress: since you're talking about extensively overriding a default theme's behaviour you should start by creating a child theme for your edits to live in, so they're not overwritten when Twenty Twenty Four updates.

Once you've done that, it's just a matter of inspecting the element in your browser's Dev Tools and overriding the default behaviour in your child theme's stylesheet.