Logo in Menu Offset on Tablet Size

Support
#1

As you can see in the screenshot provided below, on specific screen sizes, my logo pops up above my menu when I would rather have the menu turn into the hamburger menu to prevent this. How do I do this?

Screen Shot 2020-03-09 at 9.43.30 AM
Screen Shot 2020-03-09 at 9.43.30 AM1077×692 567 KB

Additionally, one way I think this would be avoided is that (as you can see in this screen shot), the logo and the menu on laptop and desktop sizes are pushed more toward the center than I would like. I’d like to have the logo more on the left and the menu pushed more to the right. Is there anyway to do this?

Screen Shot 2020-03-09 at 9.45.04 AM
Screen Shot 2020-03-09 at 9.45.04 AM933×484 278 KB

#2

Hi Brock,

Thank you for writing in, please add this to Theme Options > CSS, this should show your mobile menu sooner before the menu gets wrap.

@media (min-width: 980px) and (max-width: 1146px) {
	header .x-nav-wrap.desktop,
	header .x-nav-wrap.mobile.x-collapsed {
		display: none;
	}
	header .x-nav-wrap.mobile {
		display: block;
		
	}
	header .x-btn-navbar {
		display: block;
		float: right;
	}
}

The second solution you mentioned might work, but it will affect some things since we’re going to change your container width and max-width.

Thanks,

#3

Thanks!

The only issue I’m seeing is what you see in the screen shot below.

Screen Shot 2020-03-10 at 5.16.41 PM
Screen Shot 2020-03-10 at 5.16.41 PM1109×760 630 KB

Is there anyway to make it so the header changes like a smaller device does as seen in this screenshot below. I think it then would allow the menu to push the slider down when opened.

Screen Shot 2020-03-10 at 5.16.51 PM
Screen Shot 2020-03-10 at 5.16.51 PM767×651 150 KB

#4

Hi Brock,

Unfortunately, it is not possible unless full-blown customization which is outside of our support scope. Alternatively, you can consider converting to Pro theme and use the header Builder feature. It will not push the content down but you will have the Navigation Collapsed, Navigation Modal, Navigation DropDown, and Navigation Layered to achieve something similar.

For more information:

Thank you.

#5

OK, so instead of making the menu turn into the hamburger menu at those screen sizes, is there a way to make the menu/logo smaller so that I don’t have this issue?

#6

Hey Brock,

You can adjust the logo size via Theme Options > Header > Logo - Image > Logo Width (px) (see screenshot)

image
image420×590 5.81 KB

Adjust the value as you need. Hope this helps!

#7

Is there a way to do this only on tablet sized screens?

#8

Hi Brock,

This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. You can try adding the following code in the Theme Options > CSS:

@media screen and (max-width: 768px) {
    .x-brand img {
        width: 180px;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#9

Thanks so much

#10

You are most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.