- This topic has 13 replies, 3 voices, and was last updated 5 years, 8 months ago by Tom.
-
AuthorPosts
-
July 23, 2018 at 12:22 pm #630937Jay
I have additional css in place to change the size of my logo and the size of the hamburger icon based on screen size, so everything starts out at desktop size and gradually decreases at different breakpoints. I also have the hamburger icon replacing the desktop navigation links at an earlier point than GP does it by default.
Right now all of this working correctly, except the vertical alignment of the hamburger icon is always off by a few pixels (you have to look closely to really notice as it’s only a minor difference, but it’s definitely off a bit) at each breakpoint (starting at 1200px and downward) compared to my logo, which appears to always be centered correctly at every screen size.
I’ve played with the css a little, but I can’t figure out what’s causing this tiny alignment issue or how to correct it.
Any ideas?
Thanks
July 23, 2018 at 4:38 pm #631077DavidStaffCustomer SupportHi there,
try this CSS:
.menu-toggle:before { height: 100%; display: inline-block; vertical-align: middle; }
You could probably get away with just the vertical alignment rule, but this should cover all browsers, fingers crossed.
July 23, 2018 at 5:10 pm #631097JayThanks for the reply. I added it (see url), but it still seems a little off. I actually tried just the vertical alignment rule before posting, but it did pretty much the same thing it’s doing now with the additional code included. It may get a little closer, but alignment is still off a tiny bit.
The addition of the height setting also seems to make the icon align to the top of the header at smaller screen sizes, at least when testing it on a desktop by reducing the size of my browser. I can’t recreate it on an actual mobile device, though.
July 23, 2018 at 5:49 pm #631105DavidStaffCustomer SupportHmmm, could be a font size / line height issue. Try adjusting your menu-toggle font sizes to better suit the navigation lineheight. e.g @1200px the nav line-height is 82px and the toggle font size is 30px. Drop it down to 27px and see if that improves it.
July 23, 2018 at 7:16 pm #631132JayAs best as I can tell, I don’t think that helped.
July 24, 2018 at 3:09 am #631335DavidStaffCustomer Supporthaha, ok the only other things i can see is that icon itself is a little off vertical center. Add a 1px solid border to the :before element to see. The only other suggestion is to try adding some margin-bottom adjustment to the rule.
July 24, 2018 at 8:32 am #631626JayThanks. I’ve added a border, but it looks pretty centered within it. Is adding some amount of margin-bottom to each breakpoint and eyeballing it for accuracy the only way to fix this?
July 24, 2018 at 8:39 am #631635DavidStaffCustomer SupportYou could try forcing the
.menu-toggle { line-height: 100%; }
this may remove the discrepancies between the line height and the font size.July 24, 2018 at 10:25 am #631748JayTried it, but now it’s aligning to the top on larger screens.
July 24, 2018 at 7:45 pm #632062TomLead DeveloperLead DeveloperWhat about using this?:
@media (max-width: 1200px) { .inside-header { display: flex; align-items: center; } .main-navigation { margin-left: auto; } }
You can run it through this tool for maximum browser support: https://autoprefixer.github.io/
July 24, 2018 at 8:07 pm #632070JayThanks Tom. I just tried this, but I can’t see any difference before/after adding it. Did I need to edit anything else?
(Ignore the weird empty space above my header on smaller screens, it’s a separate issue caused by a plugin bug.)
July 24, 2018 at 8:15 pm #632074TomLead DeveloperLead DeveloperThat should be all that’s needed to align the mobile toggle and site logo below 1200px.
I tested it on your site using developer tools and they looked perfectly aligned.
I also see you have this CSS:
.menu-toggle:before { font-size: 27px; }
Try replacing it with:
button.menu-toggle { font-size: 27px; }
July 25, 2018 at 5:02 am #632314JayBingo! I think that did it. Thank you guys for the awesome support.
July 25, 2018 at 8:17 am #632534TomLead DeveloperLead DeveloperNo problem! 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.