[Resolved] mobile header tweaks needed

[Michael]

Hi. I have my desktop logo centered successfully in GP Pro at https://michaelfeerer.com . My mobile header sat to the left side though and there didn’t appear to be a setting to change its position. I found your doc at https://docs.generatepress.com/article/centering-logo-mobile-header/ about centering the mobile logo with some CSS, which I have now done using the below…

#mobile-header .site-logo {
position: absolute;
left: calc( 50% – 120px); /* 50% from the left – half your image width */
}

#mobile-header button.menu-toggle {
position: absolute;
left: 0;
}

Good. 🙂 But there are still three problems:
1) The hamburger Menu icon on the left overlaps the logo.
2) The logo is still too small for my needs. (Doesn’t seem to scale larger for mobile, even if I load a larger logo image into the mobile header settings.)
3) My slide-out mobile navigation menu is okay but its menu names are oddly offset from being justified left or right or centered. The same nav menus appear perfect in desktop view.

Any way to (in mobile view only) place the hamburger menu centered under a larger centered logo? And to fix the weird slide-out menu justification issue? Thanks.

[Tom]

To center the mobile toggle under the centered logo, you can just disable the mobile header. Default behavior has the logo on top of the centered mobile menu toggle.

As for the justification issue, try this CSS:

.slideout-navigation .menu-item-has-children .dropdown-menu-toggle {
    position:  absolute;
    right: 0;
    padding-right: 20px;
}

body:not(.rtl) #generate-slideout-menu .slideout-menu .menu-item-has-children > a:first-child {
    padding-right: 50px;
}

[Michael]

Thanks Tom for your rapid reply, especially on a Friday night! 🙂 Turning off the mobile header would have solved all of it, except when I tried it just now…
1) My desktop logo is offset to the right 300+ pixels (via transparent pixels in the .png) to get it actually centered in desktop view (for some unknown reason), so now that same logo in mobile view is offset weird to the right.
2) My social media widget in the top right corner of desktop view now appears relatively huge on top of my desktop logo… in mobile view. They’re the right size for desktop but not mobile, and the SiteOrigins Social Media widget provides no sizing options for different formats. Ideally, I need to hide the widget in mobile view (like what was happening for some reason when Mobile header was turned on)… my mobile slide-out navigation has the same social media buttons.
Perplexing. 😉

The CSS to cleanup my mobile slide-out menu worked fine… now all of the menu items are centered relative to each other, which works well enough for me.
~ Michael

[Tom]

1. Instead of doing that, let’s figure out a way to center the regular logo on desktop without all that extra space.

2. You can do that like this:

@media (max-width: 768px) {
    .header-widget {
        display: none;
    }
}

[Michael]

Thanks, Tom. I’ve loaded a 350×70 desktop logo (and retina logo at 2x that), turned off the mobile header, and added the CSS above. The logo didn’t shift. THEN I removed the WP social media widget at the far right of the header container. NOW it all appears centered. 🙂

Any way to keep the logo centered and still have a social media widget to the far right? I tried your lightweight social media widget earlier, but it forces all of the icons used to use the same color, instead of native colors of each (the latter is the look I prefer). Any ideas about this remaining piece of the puzzle, without creating the shift problem? Thanks again.

[Tom]

You could try this:

.header-widget {
    position: absolute;
    right: 10px;
}

Let me know 🙂

[Michael]

BINGO! (for solving the social media buttons position). Thanks! 🙂

So now the only remaining issues are…
1) in tablet and mobile view, the site logo is still too small. Would like it to be about 1.5x larger than what is currently used in those views.
2) In mobile view only, the hamburger menu still overlaps the site logo. I’d prefer it stacked underneath and centered in just that view size, if possible. In tablet mode, its side-by-side location works fine, but can be underneath centered as an alternative.
Any further tweaks to solve these two items? Thanks again!

[Tom]

Have you tried turning off the mobile header option?

[Michael]

Oh! I thought I had!! SOLVED! Thank you VERY much, Tom. And BONUS tech support points for being so helpful on the weekend!! 🙂 You’re terrific!

[Tom]

You’re welcome – glad I could help! 🙂

[Author]

Posts