-
Posts
-
Dear support team,
a customer of mine would like to convert his existing website https://www.schlosswirtschaft-schwaige.de/ to ENFOLD.
So I started to implement this new site and now I have problems with the navigation. Here is the link to my new version: http://neu.schlosswirtschaft-schwaige.de/
The navigation should have the logo – as in the old version – arranged in the middle, I was able to solve this with your script “Logo center split menu” via the CSS.
But unfortunately it doesn’t work well dynamically at all:
1. If you reduce the screen a little, the last navigation point (CONTACT) and the search icon slide into the next line and hang in the middle of the picture: see screenshot: https://osmosis.de/support%20/nav/smaller-screen -1.png2. If you reduce the screen further, the “burger menu symbol” appears on the far left in the picture, it is halfway in the picture and sticks to the left on the outside edge: see screenshot: https://osmosis.de/support%20/ nav / smaller-screen-2.png
3. If the screen is reduced further, the burger menu symbol suddenly jumps to the right-hand side, where it is in the picture again: see screenshot: https://osmosis.de/support%20/nav/smaller- screen-3.png
A. It looks similar on the mobile phone: see screenshot: https://osmosis.de/support%20/nav/mobile-screen-1.png (here, too, the burger menu symbol is in the picture and not above in the white header bar.
B. If you open the burger menu on your mobile phone, another problem arises: the first menu item “Reserve” is shown indented. This is probably due to the fact that it is displayed with a frame on the screen version (which should also be the case), but I don’t want any indentation on the mobile phone. see screenshot: https://osmosis.de/support%20/nav/mobile-screen-2.png
—-
Now to my concern:
Which solution is possible for the navigation so that there are not these unsightly intermediate versions (points 1-3): I would like that the navigation is no longer possible as soon as a single line display of the menu items is no longer possible, that it then changes immediately to the burger menu : but this should always be arranged on the right and always be located in the middle of the logo within the white bar above.The burger menu symbol should be arranged on the smaller screen as well as on the mobile phone: see screenshot: https://osmosis.de/support%20/nav/burger-menu-pos.jpg
And as I said, the view of the burger menu should switch much earlier, even with a reduced screen, and it should always be on the right.
—–
And then the second questions about the menu on the mobile phone:
How can I avoid the menu item “Reserve” on the mobile phone not being indented in the burger navigation. It would be nice if I could display it on the mobile phone either with a frame or in a different color, as it is very important to the customer that it catches the eye.Could you please help me with my inquiries?
Thank you and best regards, Diana
Hey Diana,
Thank you for the inquiry.
Have you tried wrapping the css modification inside a css media query so that it only applies on larger screens? You could also add extra css media queries to adjust the style on mobile view.
@media only screen and (min-width: 989px) { /* Add your Desktop Styles here */ }To remove the indentation of the button item, use this css code.
@media only screen and (max-width: 767px) { #top .av-menu-button > a .avia-menu-text { padding: 0; } }Again, we use a css media query here to adjust the style of the button menu item when the screen width is equal or less than 767px.
Best regards,
IsmaelHello Ismael,
I changed the CSS white (@media only screen and (min-width: 989px) {…). And I also inserted the second script you specified into the CSS:
Unfortunately this does not change anything and the problems mentioned in my last thread (point 1 – point 3) still exist.
Do you know any other solution?Best regards, Diana
Hi,
Thank you for the update.
We adjusted the css code a bit and disabled the Performance > File Compression settings temporarily. The header now reverts back to the default layout when the screen width is less than 989px. This will still require a few adjustments but the site navigation should now be accessible on both desktop and mobile view.
This is how the site looks on our end (screen less than 989px).
Screenshot: https://prnt.sc/133svf1
Best regards,
IsmaelDear support team,
First of all, THANK YOU very much for your support and your adjustments in the CSS have made it work wonderfully on the mobile phone and on the tablet in portrait format! Very nice.
Only on the tablet in landscape format there is still a problem: here the logo is shown in the middle and the burger menu as well and this unfortunately disappears a little behind the logo and is not navigable: here is a screenshot for illustration: https://osmosis.de /support%20/nav/neu_tablet-quer.png
How could this problem still be solved?
Kind regards, Diana
Hi,
Thanks for the update. Please try this CSS as well:
@media only screen and (min-width: 989px) { .av-main-nav-wrap { left: auto; transform: translateX(0); float: right; } }Best regards,
RikardDear Rikard,
thanks for the script:
– it works well in that it now forces the burger icon to the right position on the tablet landscape format. This is already very good: see screenshot https://osmosis.de/support/nav/nav1.png
– HOWEVER, there is now the problem that the burger menu cannot be opened: when opening a small white field only appears in the upper area of the header bar: the menu itself is not displayed: see screenshot https://osmosis.de/support/nav/nav2.png> Why is the menu not opened on the Tablet Querfromat? It works wonderfully with the Hochfromat tablet and mobile phone.
Could you please help me here?Thank you and best regards, Diana
Hi,
We can reproduce the issue on our end, but we cannot figure out what is causing the menu to not open correctly on landscape mode. There seems to be a missing css rule but we cannot find it. It only happens when the screen width is between 1224px and 990px. Please try to play around with the css code, see if anything comes up.
We will let you know when we found the issue.
Best regards,
IsmaelHi Ismael,
I solved the problem, didn’t fully understand it, but it works now.
I removed the following script in the CSS:
@media only screen and (min-width: 989px) {
.av-main-nav-wrap {
left: auto;
transform: translateX (0);
float: right;
}
}Now I open the burger menu again on the tablet in landscape format.
Now there is only a little fine-tuning: In the open burger menu, the first menu item “Reservieren” slides a little to the right: see screen shot: https://osmosis.de/support/nav/reservieren.png. This may be because it is displayed with a frame in the normal menu on the screen. Unfortunately, the customer is annoyed by the indentation: Could you either display the frame around the menu item in the burger menu so that everything is left-justified again? Or alternatively remove the indentation for this menu item in the burger menu?
Thank you and best regards, Diana
Hi,
Please try this CSS as well:
#av-burger-menu-ul .av-menu-button > a .avia-menu-text { padding: 0; border: none; border-radius: 0; }Best regards,
Rikard
- The topic ‘Logo center split menu – problems with reduced screens’ is closed to new replies.