Placing mobile menu alongside header

The following CSS should work well for that. It will place the menu icon next to the site title, and then the mobile menu will open above.

@media all and (max-width: 899px) {

  .site-header {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: center;  
    align-items: center;
  }
  .menu-primary-container {  
    width: 100%;
  }
  .toggle-navigation {  
    width: auto;  
    margin: 0 36px 0 0;
  }
  .title-container {  
    margin-top: 0;
  }
}

Please copy and paste this into the Custom CSS section in the Customizer (Appearance > Customize), and it will take affect right away.

• This reply was modified 6 months, 3 weeks ago by Ben Sibley.

Hi Ben – thanks for getting back to me. That’s almost what I was after – https://wristybizzle.com/wp-content/uploads/2024/09/IMG_8847.jpeg

Would it be possible for the hamburger to be on the right of the title and for the title and the hamburger to be ‘middle aligned’, if that makes sense?

Thanks for your help!

Mark

Sure, that’s doable. It’s easiest to replace the entire snippet with the edits, so please delete the prior code and replace it entirely with the following:

@media all and (max-width: 899px) {

  .site-header {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: center;  
    align-items: center;
  }
  .menu-primary-container {  
    width: 100%;
  }
  .toggle-navigation {  
    width: auto;  
    margin: -40px 0 0 36px;
    order: 2;
  }
  .title-container {  
    margin-top: 0;
    order: 1;
  }
}

Absolutely perfect – https://wristybizzle.com/wp-content/uploads/2024/09/IMG_8851.jpeg – thank you!

You’re welcome ??