Menu is not well responsive - Support | Kriesi.at

Viewing 26 posts - 1 through 26 (of 26 total)

Author

Posts
March 29, 2021 at 12:13 pm #1291075

hanna47
Participant

Hi.
The menu on our site is not well responsive when scaling down the browser window. In a large window all menu items are shown in one horizontal row. In a very small window it changes to burger menu. But in medium size window, before it changes to burger menu, the last item is popped down below the first item and below the menu. It looks strange and I want to fix this, but how?

General Layout:
Layout: Streched Layout, Logo and Main Menu: Top header
Dimensions: Responsive site is checked. Maximum container width is set to 1310px,

Header:
Header behaviour: Sticky Header (nothing else checked)

Thank you,
Hanna

April 1, 2021 at 7:08 am #1291687
Rikard
Keymaster
Hey Hanna,

Please try this in Quick CSS, in order to switch to the burger menu at an earlier point:
```
@media only screen and (max-width: 1250px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}
```
Best regards,
Rikard
April 6, 2021 at 11:20 am #1292734

hanna47
Participant

Hi Rikard.

I tried the CSS code and it does switch to a burger menu at an earlier point, solving the problem where the last meny object jumps below all others. But the burger menu is not looking or working properly in this in-between-format compared to the smallest format.
The burger menu itself is centralised in stead of aligned to the right as in the smallest window. And when opening the menu it looks different from the one in the smallest format – the burger menu itself pops to the right, while the X to close it is centralised in the window and not inside the menu to the right. Menu items that are hidden in the smallest view are visible here, but behind the burger menu, and the main menu titles are not readable. Probably because there is white text on white background. Only sub menu titles are readable, they are in white text on grey background. Preferably this opened menu should look exactly like the one in a smaller window, where all the text is grey on white background.
So, how to make this burger menu look and work with the page the same way as with the smallest format (mobile friendly format)?

Best regards,
Hanna

April 7, 2021 at 1:04 pm #1293058

Rikard
Keymaster

Hi Hanna,

Thanks for the update. I checked your site, but I can’t see anything like that on my end. Could you post a screenshot of what you are seeing on your end, and on which screen resolutions you are seeing it on please?

Best regards,
Rikard

April 8, 2021 at 8:46 am #1293207

hanna47
Participant

Hi. Sure. But how do I attach a screenshot here? I can only see options to enclose a link…

April 8, 2021 at 11:32 am #1293238

hanna47
Participant

Oh. and no, you would not see the problem now, because I removed the CSS code so that the page would work for visitors

April 10, 2021 at 8:26 am #1293618

Rikard
Keymaster

Hi,

You can upload screenshots to services like Dropbox, Google Drive, Imgur etc, then link to them here. We would need to see the actual problem on your site in order to help you out, would it be ok if we added it to see the problem? If so, then please include admin WordPress login details with your next reply as well.

Best regards,
Rikard

April 12, 2021 at 9:46 am #1293878

hanna47
Participant

Hi,
Ok, see private content for screenshots and login.

/Hanna

April 13, 2021 at 5:14 pm #1294189
Yigit
Keymaster
Hi Hanna,

Could you please try changing following code
```
#header_main .widget.widget_text {
    position: absolute;
    right: 20%;
    top: -5px;
    z-index: 999;
}
```
to following one
```
#header_main .widget.widget_text {
    position: absolute;
    right: 20%;
    top: -5px;
    z-index: 2;
}
```
Your security plugin locked me out :)

Best regards,
Yigit
April 14, 2021 at 7:56 am #1294264

hanna47
Participant

Hi,
Ok. but where do I find and change this code?
I can´t find it under: Theme Options –> General Styling –> Quick CSS or: Appearance –> Customize –> Additional CSS
I am a rookie in this field, so I am very thankful for a detailed guide.

Thank you!
Hanna

April 16, 2021 at 6:37 am #1294696

Rikard
Keymaster

Hi,

The login details you posted earlier are not working anymore. Please post working login details in private, so that we can try to find the CSS for you.

Best regards,
Rikard

April 16, 2021 at 12:12 pm #1294777

hanna47
Participant

My login seems to only work for me on my computer, not on others. I will have to ask WordPress support to help me with this so that you guys can login too. I will be back.

April 16, 2021 at 12:43 pm #1294786

hanna47
Participant

Try new login in private message:

April 19, 2021 at 8:12 am #1295140
Rikard
Keymaster
Hi Hanna,

Thanks for that. I’ve added this for you in your style.css file:
```
@media only screen and (max-width: 1250px) {
#header_main_alternate .main_menu a {
    	font-size: 17px;  
	}
}
```
Please review your site.

Best regards,
Rikard
April 19, 2021 at 8:59 am #1295164

hanna47
Participant

Hi Rikard.
Thank you.
The burger menu is now working well. And the regular menu is shrinking in a responsive way much longer. But there last meny object “KONTAKT” is still jumping below the menu at a certain size before it switches over to burger menu.

Why is this and is there another fix for it?

Thank you,

Hanna

April 20, 2021 at 10:23 am #1295475
Yigit
Keymaster
Hi Hanna,

Please change following code
```
@media only screen and (max-width: 1250px) {
#header_main_alternate .main_menu a {
    	font-size: 17px;  
	}
}
```
Into following one
```
@media only screen and (max-width: 1270px) {
#header_main_alternate .main_menu a {
    	font-size: 17px;  
	}
}
```
Best regards,
Yigit
April 20, 2021 at 10:26 am #1295479

hanna47
Participant

Sure, but I need guidance as to where exactly this code is to change it. :) Rikard put it in for me, and I don´t know where this is.

Thank you,
Hanna

April 20, 2021 at 10:29 am #1295480

Yigit
Keymaster

Hi Hanna,

I did not notice the new logins. I just logged in and updated the code in Style.css file of your child theme.

Please flush browser cache and review your website :)

Best regards,
Yigit

April 20, 2021 at 10:35 am #1295483

hanna47
Participant

The problem remains. Anything else?

April 20, 2021 at 10:43 am #1295485

Yigit
Keymaster

Hi,

Have you flushed your browser cache? I do not see the issue any more.
It was visible between 1260-1250px.

Best regards,
Yigit

April 20, 2021 at 11:01 am #1295491

hanna47
Participant

Yes I have flushed my browser cashe and history for all time in Chrome. The issue remains.
I also checked in Safari now, after flushing browser cashe and history for all time, and there the problem is double – it happens twice before going to burger menu.

See private content with dropbox link to a screen recording of how it works in chrome and safari after flushing cashe now.

April 20, 2021 at 3:10 pm #1295569
Yigit
Keymaster
Hi,

I added following code to Style.css file of your child theme as well to decrease font size further between 1085-990px
```
@media only screen and (max-width: 1085px) and (min-width: 990px) {
#header_main_alternate .main_menu a {
    	font-size: 14px;  
	}
}
```
Please review your website.

Best regards,
Yigit
April 21, 2021 at 8:08 am #1295713

hanna47
Participant

It works!! :D
In chrome. Not safari though.

April 21, 2021 at 3:07 pm #1295812
Yigit
Keymaster
Hi,

I have updated the code in Style.css to following one and confirmed that works fine on Safari as well
```
@media only screen and (max-width: 1300px) {
#header_main_alternate .main_menu a {
    	font-size: 17px;  
	}
}

@media only screen and (max-width: 1120px) and (min-width: 990px) {
#header_main_alternate .main_menu a {
    	font-size: 13px;  
	}
}
```
Please review your website :)

Best regards,
Yigit
April 23, 2021 at 9:00 am #1296234

hanna47
Participant

Yes! Now it works in both Chrome and Safari!
Thank you so much for dedicated support! :D

/Hanna

April 23, 2021 at 11:22 am #1296292

Yigit
Keymaster

Hi Hanna,

You are welcome! :)

For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

Enjoy the rest of your day!

Best regards,
Yigit
Author

Posts

Viewing 26 posts - 1 through 26 (of 26 total)

The topic ‘Menu is not well responsive’ is closed to new replies.