Move mobile menu below site title

Site URL: https://rubendavies.co.uk/

Can anyone help me move the Menu in mobile view below my site title, I would also like to on desktop mode make my gallery smaller? 

My testing

@bangank36 is it possible to also place the menu by the side of my site logo and have it as an icon just for mobile and tablet? 

6 hours ago, Rubendavies said:

@bangank36 is it possible to also place the menu by the side of my site logo and have it as an icon just for mobile and tablet? 

Can you show me a screenshot of your idea?

On 3/3/2022 at 12:51 AM, bangank36 said:

Try adding to Home > Design > Custom Css

@media only screen and (max-width: 640px) {
  #canvas {
    display: flex;
    flex-direction: column;
  }
  
  #headerWrapper{
    order: 1;
  }
  
  #mobileMenuLink {
    order: 2;
  }

  #pageWrapper {
    order: 3;
  }
  
  #footerWrapper {
    order:4;
  }
}

Let me know how it works

Hi! 

I'm trying to the same thing on the Avenue template and with this code, I am getting the menu index at the very bottom - I was wondering if you had any insight on how to fix this? 

On 3/9/2022 at 8:51 PM, cb3284 said:

Hi! 

I'm trying to the same thing on the Avenue template and with this code, I am getting the menu index at the very bottom - I was wondering if you had any insight on how to fix this? 

 

What is your site url?

@bangank36  Does this code work on 7.1? It doesn't budge the mobile burger menu, which is what I'd love to move below the mobile logo.

My domain is thefolkgrimoire.squarespace.com, password 'magic'

Thank you!

On 6/12/2022 at 8:12 AM, OpenPollination said:

Does this code work on 7.1? It doesn't budge the mobile burger menu, which is what I'd love to move below the mobile logo.

My domain is thefolkgrimoire.squarespace.com, password 'magic'

Thank you!

Add this CSS to move burger under mobile logo

div.header-display-mobile {
    flex-direction: column;
}

15 hours ago, tuanphan said:

Add this CSS to move burger under mobile logo

div.header-display-mobile {
    flex-direction: column;
}

 

Thank you!! That worked perfectly!