Side by Side Logo/Menu Icon on mobile site

I cannot find an option to select Side by Side for the mobile rendering of the website for the Logo and Menu Icons.

The theme forces an over / under layout for the Logo and Menu Icons. Since cell phones are so small, it is a given that the logo and menu icons should be able to share the same space at the top of the screen in a horizontal array.

Sample site:

Here is a site I created and a perfect example of how the logo and menu icons should be positioned (at the top, side by side.)

http://WACENA.org

While the Sydney theme is being upgrader to accommodate this in a soon coming update, can you help me by providing the code needed and instructions on where to place it? In order to cause this much more intelligent layout for site logo and menu icon on mobile renderings of the site?

I am working on http://WWEL.org as my flagship site migrating to Sydney Pro, but I want to accomplish this on every site I build.

Hello, please check this topic:

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you so much, Roman. I have added a slight modification of that
code and it works!

@media only screen and (max-width: 767px) {
     header#masthead div.col-md-4.col-sm-8.col-xs-12 {
         max-width: 72%;
     }

     header#masthead div.col-md-4.col-sm-8.col-xs-12,
     header#masthead div.col-md-8.col-sm-4.col-xs-12 {
         width: auto;
     }

     header#masthead div.col-md-8.col-sm-4.col-xs-12 {
         float: right;
         padding: 1px 20px;
     }

     header#masthead nav#mainnav-mobi {
         left: -150px;
         width: 250px;
     }
}

I only changed a couple of the padding values. I cannot see in this
code how I could actually tighten up the header a bit more, vertically
speaking. In other words I would really like to see a much smaller
margin above and below the logo.

Is this possible? I greatly appreciate your help.

Dan

Hello Dan, I’m not sure what exactly you want to achieve.

Can you please provide some explanatory screenshots?

Kind Regards, Roman.

Thank you, Roman. You are a really big help! I am just trying to have less space above the logo. On the mobile header. So the header takes less space on the mobile screen. A smaller margin would be a better way to describe.

You can see in this screenshot, above the logo - there is more space than below the logo. Because mobile screens are so small, it seems more logical to occupy a smaller area with the logo and menu icon (header.)

Thank you very much.

Hello, I thought that you mean another website, thank you for the screenshot.

Try to use the following CSS code. You can add CSS code in Customize → Additional CSS section.

@media (max-width: 767px) {
	#masthead {
		padding: 2px 0 5px;
	}
}

.btn-menu {
    line-height: 28px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

It works perfectly, Roman and by modification of the ‘padding’ values I can customize each website to optimize the header area. Thank you very much! Mission accomplished!

Dan

Great, you are welcome Dan! Have a nice day :slight_smile:

Kind Regards, Roman.