Logo and Mobile Hamburger menu stacking on mobile?

[Isabelle_808]

Hello,

Not sure why logo and Menu icon are stacking on mobile/tablet.
Tried reducing the logo size for small screens but still stacking weirdly (Logo left/menu icon right)
Did add some code to have logo spacing aligned with navigation on larger screens (margins), is that what is causing the issue? Even if I remove the code, still stacks on mobile…

Thanks for your help.

[ruenel]

Hey Isabelle,

Thanks for writing in! I can see that you have added this custom CSS:

/* bigger hamburger */
.ubermenu-skin-minimal.ubermenu-responsive-toggle {
  color: #fff;
  text-transform: none;
  font-weight: normal;
  font-size: 40px;
}

You can add max-width: 120px; margin-top: 0.75em; float: right; to your code to make it look like this:

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[Isabelle_808]

Thanks, works great, except I need “max-width: 90px;” to fit/work on mobile.
Could I specify screen size so it could be larger on tablet and landscape mobile?
With “@media only screen and (max-width: 480px)”

Basically trying to replicate what they have on their current site. Their logo takes 3/4 of the screen on mobile.
Sent url via secure note.

[ruenel]

Hello Isabelle,

Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:
https://www.youtube.com/watch?v=EY3CCMWD67o

You will find that the logo image has this CSS code:

.x-brand img {
    width: calc(350px / 2);
}

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

With the @media, you can come up with a CSS code like this:

/* Default (desktop) */
.x-brand img {
  width: calc(350px / 2); /* 175px */
}

/* Tablets (768px and up to 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {
  .x-brand img {
    width: 280px;
  }
}

/* Phones (up to 767px) */
@media (max-width: 767px) {
  .x-brand img {
    width: 200px;
  }
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You must maintain any custom coding to ensure it will still work after any updates or does not create any issues or incompatibility in the future.

Hope this helps.

[Isabelle_808]

All good, tweaked to 250px, bumps the mobile hamburger down on preview but not on actual devices…

Also noticed I can’t close the mobile menu once opened? Is that a normal feature? There is no way to hit “Home” from the logo once menu drops down open, unless navigating to another page.

Thanks again for your help, much appreciated.

[tristup]

Hi Isabelle,

I checked your website on my Android mobile, and found the Mobile menu is closing by clicking into the Cross icon or outside the Navigation area, which is expected. If that is not what you are seeing, please provide any screen-capturing video that helps us to recognize the problem.

Thanks

[Isabelle_808]

Ah, that’s the old site, still currently live, it uses some other theme (terrible theme) . It’s very old and yes menu functions correctly. Must have given you wrong link.

The current staging site built with X and Ubermenu is the one not closing after drop-down menu opens.
Added secure note.

[ruenel]

Hello Isabelle,

Please update your custom CSS block:

.ubermenu-skin-minimal.ubermenu-responsive-toggle {
    color: #fff;
    text-transform: none;
    font-weight: normal;
    font-size: 38px;
    max-width: 80px;
    margin-top: 0.75em;
    float: right;
}

You will have to add position: relative; z-index: 9999; and save your changes. This should make the mobile hamburger clickable when it is open.

Kindly let us know how it goes.

[Isabelle_808]

Works great, thank you.
Should get Pro next website, I think it may be easier to customize menu than through Ubermenu…

Thanks again for your help.

[ruenel]

You are most welcome, Isabelle. And Yes, the Pro theme is much more easier to use especially when you want a custom header and footer designs.