Archived topic
menu icons stack topsy-turvy in mobile view
3 replies · Started by Kim on January 11, 2017
Hi!
I’ve got the search- and hamburger- (slide-out) icons placed in my primary menu in the header. When in mobile view, the search icon slots in above the Header logo whereas the hamburge icon goes underneath it. What I’d like, obviously, is for them both to slot neatly in under the Header logo side-by-side. Here's a screenshot of the phenomenon (url: lesstrash.no). Am I missing something?
Best, Kim
(PS! Sorry if I’ve already posted this question, I thought I did, but can’t find it anywhere.)
Your logo is too wide.
Try doing something like this:
@media (max-width:500px) {
.mobile-header-navigation .mobile-header-logo,
.mobile-header-navigation .mobile-header-logo img {
max-width: 250px;
height: auto;
}
}Hi,
The CSS didn't make any difference for some reason, but uploading a smaller logo obviously did so thanks for pointing me in the right direction! If possible in the future, I suppose it would be eeeven smoother if all 'menu items' (including search icon) lined up next to each other. In other words, even if the logo is too big it pushes all icons down, rather than some up and some down:)
Kim
Hi Kim,
I agree, I'll look into it. Sometimes elements do funny things when they run out of room :)
