[Resolved] menu icons stack topsy-turvy in mobile view

Home Forums Support [Resolved] menu icons stack topsy-turvy in mobile view

Home Forums Support menu icons stack topsy-turvy in mobile view

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #263076
    Kim

    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.)

    #263182
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #264611
    Kim

    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

    #264633
    Tom
    Lead Developer
    Lead Developer

    Hi Kim,

    I agree, I’ll look into it. Sometimes elements do funny things when they run out of room 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.