Navigation mobile - align logo and hambuger navigation

Hi,

I wish to do the following:
for mobile devices (tablets and phones) I want to have the logo on the left side and the navigation menu on the same line on the right side. Currently the logo is centered on the first line and the navigation icon on the second line.

Thanks for your help.

Hello there,

Thank you for contacting us about our theme Astrid.

To achive that mobil navigation change, try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
    	 .site-header > .container {
    		 position: relative;
    	}
    	 .site-header .site-branding {
    		 text-align: left;
         max-width: 80%;
    	}
    	 .site-header .site-branding * {
    		 position: relative;
    		 z-index: 5;
    	}
    	 .site-header .btn-menu {
    		 position: relative;
    		 z-index: 3;
    		 text-align: right;
    		 margin-top: -45px;
    	}
    }

Regards,
Kharis
aThemes Support

Hi there,
thanks for getting back. I have tried the css code, but unfortunately it doesn’t work. There is no actually no change in appearance. It all stays the same. Any ideas?
Thanks so much,
Olivier

Hi Olivier,

Thank you for updating me.

Can you share a link to your website here when the code remains there, so I can take a look?

Did you cleared any site caching (if it is enabled)?

Please also try clearing your web browser’s cache, history, and restarting it before rechecking. Because there might be some data hung up there.

Regards,
Kharis
aThemes Support

Hi Kharis,

thanks for taking time to help - really appreciate it. I cleared cache, but still don’t see any changes. Here’s my website - www.wohnen.com.ar

Thanks a lot,
Olivier

Hi Olivier,

Thank you for updating me.

Try replacing the code with this one:

    @media only screen and (max-width: 1024px) {
      .site-header > .container {
         position: relative;
      }
      .site-header .site-branding {
         text-align: left;
         max-width: 80%;
         margin-bottom: 0;
      }
      .site-header .site-branding * {
         position: relative;
         z-index: 5;
      }
      .site-header .site-branding a.custom-logo-link {
        display: inline-block;
      }
      .site-header .btn-menu {
         position: relative;
         z-index: 3;
         text-align: right;
         margin-top: -45px;
      }
    }

    @media only screen and (max-width: 991px) {
      .site-header .btn-menu,
      .site-header .site-branding {
        width: 50%;
      }
      .site-header .btn-menu {
        margin-top: 17px;
      }
    }

Let me know how it helps.

Regards,
Kharis
aThemes Support

thank you so much! works fine!!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support