-
Posts
-
Hi Folks,
new question: I need a code-snippet to switch to the burger-menu earlier
than at 990px. My new customer-site is working well, but the normal
menu is to large for the tablet if you hold it horizontal. Vertical the burger-
menu appears…so with that view everything is fine, but as I said in
horizontal-view the main-menu does not switch to burger-menu. But I want
it/need it so. :-)I’m looking forward to your answer…thx for your help!
Best regards
CarstenHey Carsten,
Refer to the following:
Best regards,
Jordan ShannonHi Jordan,
thx for your answer and the help-link!
The code works quite well, but not perfect. I only needed the first snippet from
Rikard, but after I embedded it two burger-menus appeared in the header.
One of the right side (which seems correctly) and another within the logo on the
left side, which is def. not correct. I tested it on a ipad-mini in the horizontal-
view. In the vertical view everything is fine. You can test it by yourself…see the
sitelink in the private content box.Best regards
CarstenHi Carsten,
Thanks for the update, I’m not sure what’s going on there since there seems to be a slash after your mobile menu which should not be there. Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.
Best regards,
RikardHi Rikard,
thx for your new answer!
The slash is correct, because I need it as a design element in the desktop-menu.
I don’t realy need it in the burger-menu, but it also not really disturb there. ;-)
But maybe the code-snippet for the slash is the bad boy here. ;-) Look here…this
is the snippet from Ismael:
——————————————————————————————–
#top #header .av-main-nav > li > a:after {
content: ‘/’;
padding-left: 16px;
border: 0;
}
.av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
border: 0;
}
——————————————————————————————–For a closer look I send you also the login-data.
I look forward to your reply.Bon Weekend
CarstenHi,
Seems that the slack is also enabling the vview of Burger menu.
If you try hide it, is the issue been solved? This can help us debug.Best regards,
BasilisHi Basilis,
thx for your answer. I think you mean the slash, not slack, don’t you? ;)
For testing I deleted the code-snippet temporarily, as you wished, but
it doesn’t helped, sorry. :-/ I hope that my answer helps anyway…Best regards
CarstenHi Carsten,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 990px){ #top #header .av-main-nav > li > a:after { content: ''; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
thx for your answer!
Your snippet works, but unfortunately not 100% perfect.
The burger-menu does not appear any longer in the horizontal-view but
instead the normal navigation-menu appears in two lines. ;-/If I change then the max-width only one word (dates) switch back to the
first line. The word °blog“ stands still in line 2. That’s not nice. ;-/
The way is already right but still not perfect. So what can we do now?And – do you think that the only way to fix that burger-problem is to let it
disappear? I ask because I like the burger-menu also in the horizontal-view. ;-)Best regards
CarstenHi Victoria,
thx for your new answer!
Yes, I switched back to the old status, sorry. ;-) Now I changed it again back
to your new snippet. You can test it right now by yourself and see the problem.Best regards
CarstenHi Carsten,
Try this code:
@media only screen and (max-width: 1100px) { nav.main_menu, #menu-item-search { display: block !important; } .menu-item { display: none; } .av-burger-menu-main.menu-item-avia-special { display: block; } }Best regards,
VictoriaHi Victoria,
thx but the new snippet doesn’t help. Unfortunately it’s getting worser,
because now the top bar menu also disappear and the second burger-
menu is still in the logo-area.Sorry, but we have to find another option.
Best regards
CarstenHi,
Sorry for the late reply, I tried to review the past posts and believe that you want your burger menu & sub-burger menu to show until 1100px, you also want the top-bar menu to show, but you don’t want two burger menus to show at the same time. There is also a slash next to the burger menu, and removing it is for extra points :)
So I believe I have done all of this, I won’t know for sure until you remove the old css.
So please remove and add this:@media only screen and (min-width: 766px) and (max-width: 1100px) { .menu-item { display: block !important; } #avia-menu.av-main-nav li.menu-item-object-page,#avia-menu.av-main-nav li.menu-item-object-custom { display: none !important; } .av-burger-menu-main.menu-item-avia-special { display: block !important; } .av-hamburger:after { display: none !important; } #top #header .av-main-nav > li > a:after { content: none !important; } } @media only screen and (min-width: 989px) and (max-width: 1100px) { .av-logo-container nav.main_menu { display:none !important; } } @media only screen and (max-width: 766px) { #top #header .av-main-nav > li > a:after { content: none !important; } }Best regards,
MikeHi Mike,
thx for your answer and help!
Great, I think that was it…now everything works like I wished! :-)
According to the motto: end well, all’s well! :-) Again…thank
you very much Mike for your super analyse and work! Have still
a nice Sunday…see ya next time!Best regards
CarstenHi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)Best regards,
Mike
- The topic ‘Earlier switching to burger-menu than at 990px’ is closed to new replies.