aligning mobile menu button with site logo

wgbrand · Member · May 29, 2020 at 10:46 pm
Copy link

Add topic to favorites
Hi Taras, Thank you so much for your ongoing support and patience with me.

Is it possible to align both the site-branding logo and the menu-button on the same row for mobile/tablet version? I want the burger menu on the left and the logo on the right.

How do I change the site logo size on mobile?

How do I change the @media breaking point for when the mobile menu shows up? Since my main nav has a lot of items on it, it starts to stack into 2 lines as I resize my browser width which doesn’t look good.

The blog I need help with is: (visible only to logged in users)
tarasdashkevych · Theme Author · May 30, 2020 at 6:28 pm
Copy link
Hello,

“I want the burger menu on the left and the logo on the right. “
– Please use this custom CSS:
```
@media (max-width: 992px) {
  .site-header .site-branding,
  .site-header .header-controls {
    width: 50%;
  }
  
  .site-header .site-branding {
    text-align: left;
  }
  
  .site-header .header-controls {
    margin-top: 0;
    padding-top: 0;
  }
  
  .site-header .header-menu-button {
    margin-left: auto;
  }
}
```
—

“How do I change the site logo size on mobile?”
– You can use this custom CSS to increase the logo in smaller screens:
```
@media (max-width: 500px) {
  .site-logo {
    width: 100%;
  }
}
```
—

“How do I change the @media breaking point for when the mobile menu shows up?”
– Here is an example of the breaking point:
```
@media (max-width: 1200px) {
  .main-navigation {
    display: none;
  }
  
  .header-menu-button {
    display: inline-block;
  }
}
```
Note, if you are planning to use this breaking point then you need to update the breaking point in the fist CSS snippet.

Hope this helps. Please let me know if you have any additional questions.

Kind regards,
Taras
wgbrand · Member · June 2, 2020 at 5:07 pm
Copy link
Thank you! this is very helpful
tarasdashkevych · Theme Author · June 2, 2020 at 6:34 pm
Copy link
You are very welcome!

No items found.