Hamburger Menu on Same Line as Logo on Mobile

[azwick2]

Hi Themeco Staff,

I would like the hamburger menu to appear to the right of my logo and be flush with the bottom of the image on mobile. How can I get the hamburger menu to appear next to the logo?

Thanks!

[paul.r]

Hi,

You can adjust the position of your navbar button under Theme Options > Header > Mobile Button

You might also need to adjust your logo size in mobile.

To do that you can add the code below in Theme Option > CSS

@media(max-width:767px) {
 .x-brand img {
   width:300px;
}
}

Thanks

[azwick2]

Hi paul.r,

Thanks for your help. None of that shows on mobile, it still stays flush. I adjusted all those options and saw no difference.

[azwick2]

Hi paul.r,

I should note that I think maybe Ubermenu is overriding this controls. Is there any Ubermenu CSS that I can use to get my hamburger menu on the same line as the logo? Can I add padding around the right side of the logo so the hamburger menu can go there, or allocate a percent of the screen for the logo?

Thanks!

[friech]

Hi Ari,

Thank you for writing in, your Logo is taking up the entire width of the navigation bar when the header collapsed, please reduce the width of your logo to 90% so the mobile menu will have a room on the side of the logo.

Hope it helps,
Cheers!

[azwick2]

Hi freich,

Thanks, how do I do that?

I’m trying to keep the logo in native resolution so that when the resolution expands it will retain the details. I want it to just take up a percent of the logo screen justified to the left.

[christian]

Hey @azwick2,

Since you’re already using UberMenu now for desktop and the X Brand Image and Mobile Nav in mobile, you can set the Logo Width in Theme Options > Header to 620.

It will be divided by 2 so your header should look like this on mobile:

Thanks.

[azwick2]

Hi christian_y,

Thanks for your reply. The problem with that approcah is that is the width is any higher before the 960 pixel breakpoint, it just looks like this (see attached). I would like it to scale with the width of the screen as a percentage rather than a set number of pixels. I’m looking for something like this, only this didn’t work for me when I changed it for img instead of text:

@media only screen and (max-width: 900px) {

.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main {
float: right;
width: 30%;
padding-left: 0;
padding-right: 0;
font-size: 18px;
background-color: transparent !important;

}

a.x-brand.text {
float: left;
width: 65%;
margin-bottom: 10px;
}
.ubermenu a.ubermenu-target {
text-align: center;
}
}

[jade]

Hi there,

Please try this code:

@media (max-width: 959px) {
    .x-brand {
        max-width: 90%;
    }

    .ubermenu-responsive-toggle {
        padding-right: 5px;
    }
}

@media (max-width: 480px) {
    .x-brand {
        max-width: 88%;
    }    
}

The mobile menu displays from 959px screen width and less. What the code above does is to set the logo’s width up to 95% so that there’s room for the mobile menu to display on the right and for smaller screen, the maximum with of the logo is 88% of the screen width so that it will be enough space for the mobile menu to be displayed on the same line with the logo.

Please note that since this is modifying the default display of the theme, it requires some customization which goes beyond the scope of our support. If you are not comfortable making further changes and if you require more customization on your site, it would be best to get in touch with a developer.

Hope this helps.

[azwick2]

Hi Jade,

That was exactly what I was looking for! Thank you so much, I really really appreciate it.

[friech]

We are delighted to assist you with this.

Cheers!