Dear 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

Hello 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

now it works: I found the error:
if in the input fields of Open Street Map under the option> Zoom the ‘Initial Zoom Level’ is changed (no 0) then it works.

This thread can be closed. I don’t need any more help with this topic.

Kind regards, Diana

Hi Rikard

I updated the theme to the new version. The burger menu is now displayed on the mobile phone again. Very good.

However, I still have the problem that the burger menu is displayed in red, even though I was at
Enfold> Main Menu> Burger / Mobile Menu styling> Menu Icon Color specified the color black. How can I display the navigation in the burger menu in black?
And even in the CSS I have the additional code:
/ * Burger Menu Navigation * /
# av-burger-menu-ul .avia-menu-text {
color: # 000000 important;
}
entered.

Can you help me here?
Greetings, Diana

Hi Rikard,
I have no more questions, my concern has been resolved. Thank you and best regards, Diana

Dear Rikard,

Works great!!!! Thank you so much for your support!
Have a good time!
Best regards Diana

hi Ismael,
good news: I solved the problem for design.osmosis.de (point 2 is now also done!)
It took a while for its own additional CSS script to collide with.

Now everything works wonderfully on all cell phones, browsers and also on the most diverse sites.

Thank you for your patience.
Many greetings Diana

Hello Ismael,

please ignore the previous post, because I have to correct myself: the problem is now partially solved:
– On the https://hotel-admiral.de/ page, the script is now partially effective:
@media only screen and (max-width: 1080px) {
.responsive .avia-cookiemessage-top-left, .responsive .avia-cookiemessage-bottom-left, .responsive .avia-cookiemessage-top-right, .responsive .avia-cookiemessage-bottom-right {
width: 90%! important;
left: 5%;
right: auto;
bottom: 5px;
}
}

Here I entered 5px (instead of 60px) for bottom and so there is now enough space for the cookie banner to be fully displayed.
(see Scrennshot https://www.osmosis.de/support%20/cookie/admiral_Chrome-2.jpg)
But it works regardless of whether I change the setting in Performance …
What does not work is the script with the information on the font transformation: `@media only screen and (max-width: 1080px) {
.avia-cookie-consent a.avia_cookie_infolink, .avia-cookie-consent p, .avia-cookie-consent .avia-cookie-consent-button {
font-size: 8px;
letter-spacing: 0.5em;
}
}`

Nothing changes here even when entering other values. But it is no longer so important to me, especially since the cookie banner is now fully displayed. Point 1 above is hereby solved.

!!!! However, referring to point 2, I still need support:
Because the same CSS script (which I used on the hotel-admiral.de page) does not work on the https://design.osmosis.de/ page: Screenshot: https://www.osmosis.de/support%20/cookie/osmosis_Chrome-2.jpg . The settings for performance are also exactly the same. The following points in the cookie banner – display on the mobile phone – do not fit here:

– Font is centered: how can I get it left-justified? I have already inserted the following in css: .avia-cookie-consent .container {
text-align: left;
}
(The script works for the desktop and tablet – only not on the mobile phone)

– completely different buttons are displayed on the mobile phone: angular and sometimes with pink letters ??? (The script works for the desktop and tablet – only not on the mobile phone)

– and also the alignment with bottom: 5px; it does not work

And above all the big question, why does it work on one side https://hotel-admiral.de and why not on https://design.osmosis.de?

If you could help me here, I would be very, very grateful!
Many greetings Diana

Hey Ismael,

Thanks for the new link to change the JS file for the Megamenu. I’ve included the following code in the js> avia-snippet-megamenu.js file:
// bind event for mega menu
megaItems.each (function (i) {

$ (this) .hover (
function () {
delayCheck [i] = true;
setTimeout (function () {megaDivShow (i);}, options.delay);
},

function () {
delayCheck [i] = false;
setTimeout (function () {megaDivHide (i);}, options.delay);
}
);

$ (this) .find (‘> a’). focus (function () {
delayCheck [i] = true;
setTimeout (function () {megaDivShow (i);}, options.delay);
});

$ (this) .find (‘>. avia_mega_div> ul li: last-child> ul li: last-child a’). focusout (function () {
delayCheck [i] = false;
setTimeout (function () {megaDivHide (i);}, options.delay);
});
});

I also activated “file merging and compression” for CSS and Javascript at Perfomance.

But unfortunately it still doesn’t work!
Where is my mistake?
Please help again.

Kind regards, Diana

Hey Mike,
many thanks for the exact explanation! It works perfectly and with the exact description I was able to implement the same feature on several customer sites.
THANK YOU
Kind regards, Diana

Hey Victoria
I have now checked the whole thing again. Now it works for me and also for the customer himself – even if I haven’t changed anything.
Please excuse the request. The problem solved itself.

Dear Ismael

thank you for the script. I changed the “max-width: 1024px” to 1200px, then the script works wonderfully for the tablet. The problem has already been solved.

However, I still have the problem with the cookie banner on my mobile phone that it is only partially displayed: see screenshot: https://www.osmosis.de/support%20/cookie/mobile.jpg
The solution with the widening of the window does not work here.
But there is still space at the bottom of the cookie banner: Would it be possible to align the cookie banner for the mobile phone at the very bottom of the website – without any gap (margin or padding)?
On the other hand, I would like to set the font size to 10px for the mobile phone only. But I’m not sure how to set the width information here, so that this is only set to the font size 10px on the mobile phone:
Maybe somehow like this: – ??? -:
@media only screen and (max-width: 767px) {
#top .av-toggle-switch .toggle-label-content {
font-size: 10px! important;
font-weight: lighter! important;
}
}

Do you have a solution here?
Thank you for your editing!
Many greetings Diana

Thank you. this solutions worked.
Best reagrds Diana

Thank you for your good explanation and briefing.
Everything went very well with the plugin!
Kind regards Diana

Hi Victoria

The differing view only resulted from the fact that at this moment the English version had not yet been reworked in the new layout and they had a look at the English version and not, like me, at the German version. In the meantime, however, the English version has also been reworked and the problem described still persists. So I ask you to read my previous post with the problem description again and please help me.
Greetings Diana