Mobile Menu Layout

Hi Aaron,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

He staging site is here:
http://premierhigh.staging.wpengine.com/

It's a bit complicated in your case, since the logo is with secondary navigation on desktop and you want it to be in primary navigation on mobile.

You could try this steps:
1) Use this solution to prevent secondary navigation from being toggled:
https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

2) Add an hook element, the content will be your logo image, choose generate_menu_bar_itemas hook, set entire site as location in display rule.
https://docs.generatepress.com/article/hooks-element-overview/

3) Use this CSS to hide the logo in header:

@media (max-width: 768px) {
    .inside-header.grid-container .site-branding {
        display: none;
    }
}

After that layout is done, we can have another look and help you with some CSS.

Let me know :)

Thank you for the resources and guidance. I was able to get the secondary menu to look exactly how I would like with your direction and some additional css. The primary menu shows the logo and the menu icon now, but I need to switch them where the logo is on the left and the menu is on the right. I can't seem to find a way to do this.

Hi there,

try adding this CSS:

@media (max-width: 780px) {
  .nav-below-header .main-navigation .inside-navigation.grid-container {
      flex-direction: row-reverse;
  }
}

Perfect! Exactly what I needed. I appreciate everyone's help.

Glad we could be of help.