Debut Theme move mobile menu to the right

Jonas8 · ‎04-21-2021

Hi guys, i am having a problem with my website. It should be easy but i cant make it work and it would be amazing if someone could help me out. It looks fine on the desktop but on the mobile the logo and menu are on the left and it does not look good. It should be like the demo logo to the left and menu to the right. Can you help me move the mobile menu to the right and keep the logo on the left?

g33kgirl · ‎04-22-2021

Fixed the overlap.

/* Navigation Menu */
@media only screen and (max-width: 749px) {
  .site-header .grid {
    display: inline-block;
    width: 45.5%;
    vertical-align: top; }
  .site-header .site-header__icons {
    display: inline-block; }
  .site-header .site-header__icon {
    position: relative;
    top: -2px; }

 .site-header .grid--table:nth-child(2) {
    margin-left: auto; 
    margin-top: 10px;
    position:relative;
    z-index:9;
}

  .mobile-nav-wrapper.js-menu--is-open {
    transform: translateY(100px) !important; }
 }

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

Debut Theme move mobile menu to the right

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links