Home › Forums › Support › On smaller screens navigation goes below logo when collapsed to Mobile Style.
- This topic has 8 replies, 2 voices, and was last updated 1 year, 7 months ago by
David.
-
AuthorPosts
-
June 26, 2019 at 5:13 am #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/g3KhqwWBest regards,
DimitarJune 26, 2019 at 5:19 am #941610David
StaffCustomer SupportHi there,
you can use the Mobile Header:
https://docs.generatepress.com/article/mobile-header/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2019 at 5:29 am #941621Dimitar
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).
June 26, 2019 at 5:36 am #941632David
StaffCustomer SupportIf you can activate the Mobile Header ill provide some CSS to keep the logo a similar size.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2019 at 5:39 am #941638Dimitar
It’s activated. I would appreciate the CSS.
Thanks!June 26, 2019 at 6:34 am #941695Dimitar
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!
June 26, 2019 at 6:45 am #941706David
StaffCustomer SupportSo 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 26, 2019 at 7:17 am #941885Dimitar
Thanks that did the trick and made it beautiful! Thanks!
June 26, 2019 at 7:20 am #941890David
StaffCustomer SupportGlad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.