Home › Forums › Jevelin Theme › Set Viewports for mobile versions
Home › Forums › Jevelin Theme › Set Viewports for mobile versions
Dear Support Team,
as full responsive theme I am missing the setup for the viewports. My problem is that there is a range for the viewport where the mobile menu is not appering yet but the menu is too long and even the Logo in the header is deformed in a very ugly way – please see screenshot attached (one with deform logo – one with normal logo)
My solution would be to set the viewport for the mobile menu to appear much earlier but I can not find any setup for this – do I have to use some custom css code?
Thanks for your help.
All the best
Ulf
Hi @Ulf,
I hope you are well today and thank you for your question.
My solution would be to set the viewport for the mobile menu to appear much earlier but I can not find any setup for this – do I have to use some custom css code?
Yes but this solution will be specific to your site and generic for all theme users as many theme users add small number of menu items in menu and some add large numbers of it.
Could you please share me your site URL where it’s displaying so that i can help you to achieve it?
Best regards,
Shufflehound team
Dear Support tEam,
I tested my page on several screen resolutions and devices again and the results are not nice ;(
Please find attached some screenshots where the menu is not scaled but gets 2 lines – which looks really shiddy. The customer does not want smaller menu font size because on big screens the menu looks to small altready for his taste ;(
My page: http://selbsteinwechslung.de/language/en/en/
(Password: GünterNetzer)
Screenshots attached:
Furthermore I still have the issue with smallerscreen resolutions where also the logo is deformed as discribed before.
I hope for a fast solution…
All the best
Ulf
Please find attached some screenshots where the menu is not scaled but gets 2 lines – which looks really shiddy. The customer does not want smaller menu font size because on big screens the menu looks to small altready for his taste ;(
Then could you please try using different header layout or is it ok if we reduce font size only when it displays on two lines?
Furthermore I still have the issue with smallerscreen resolutions where also the logo is deformed as discribed before.
This is because you have set too much large image for logo as displayed here http://selbsteinwechslung.de/wp-content/uploads/2017/07/Selbsteinwechslung_Logo_quer.png
Instead do not add logo image having width greater than 400px
@ulf-meyer have you tried using a different header style, like Header 4? It would have the nav bar under the logo, giving you full width for your navigation.
Otherwise, I had a similar issue with break points. I switched the break point of my navigation to mobile version at 1250px with this custom CSS
@media (max-width: 1250px) {
header.primary-desktop {
display: none!important;
}
header.primary-mobile {
display: block!important;
}
}
Dear Support Team,
thanks for present several options to me. I discussed all of your suggested possibilities with my customer and finally we reduced the menue font size to 12px in combinition max-width: 1420px primary desktop header.
Thanks for your patients and help.
All the best
Ulf
You are always welcome here 🙂