[Resolved] On smaller screens navigation goes below logo when collapsed to Mobile Style.

Home Forums Support On smaller screens navigation goes below logo when collapsed to Mobile Style.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #941601
    Dimitar

    I have added the website url in the specific field for this in order to demonstrate what I am talking about.

    When you switch to developer tools and resize the screen size and reach a point when the logo and the navigation cannot fit the screen the navigation turn to mobile style which is set on the Mobile Menu BreakPoint setting. So far so good

    What I would expect is the Mobile navigation to remain on the same row (level) and be to the right. But it goes below the logo on another row. I’ve experimented with different settings, but could not get the desired effect. Any help would be appreciated.

    Reference: https://kinsta.com/ (works as expected here)

    My Header settings: https://ibb.co/QFdwj6x
    My Navigation settings: https://ibb.co/g3KhqwW

    Best regards,
    Dimitar

    #941610
    David
    Staff
    Customer Support
    #941621
    Dimitar

    Thanks that does the trick. But even if I use the same image for the header it’s resized when I use mobile header. Is it possible to achieve it as in the provided example. Only the menu to collapse to mobile, the header to remain the same size and both to be on the same line (row).

    #941632
    David
    Staff
    Customer Support

    If you can activate the Mobile Header ill provide some CSS to keep the logo a similar size.

    #941638
    Dimitar

    It’s activated. I would appreciate the CSS.
    Thanks!

    #941695
    Dimitar

    Also one more question.

    I want the Logo to the left and the navigation to the right so I’ve set header alignment left and navigation to be Float Right. I also want them not to be completely to the sides (left and right), so I’ve set header padding left and right to 200px.
    On big screens, it looks good, but when you start shrinking the size the padding to the sides stays the same amount and very soon I have to switch the navigation to Mobile style.
    But on other sites, I’ve seen (like the one given for example: https://kinsta.com/) when you start shrinking the size of the page the padding on the sides start to proportionally shrink and the menu is transformed to mobile when there isn’t any more space left and right.

    Is there a way to achieve the same effect? Is the header padding the right setting to use in order to keep the logo and the navigation a little bit more centered?

    Thanks!

    #941706
    David
    Staff
    Customer Support

    So this CSS to keep the logo the same size on mobile header:

    .site-logo.mobile-header-logo img {
        width: 220px;
        height: auto;
    }

    So your content is set to 1020px width (+padding) so easiest thing to do is set a max width for the header:

    .inside-header {
        max-width: 1020px;
    }

    Then put your Header padding back to 40px and 30px for mobile so it matches the content.

    #941885
    Dimitar

    Thanks that did the trick and made it beautiful! Thanks!

    #941890
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.