Tagged: Burger Menu, Hamburger-Menu, mobile, secondary menu
-
AuthorPosts
-
April 4, 2022 at 11:57 pm #1347196
Hi, I’m trying to find a way to put the burger menu in the top bar/secondary menu (left aligned), where the cart icon is.
URL below.
Thanks,
April 5, 2022 at 11:06 am #1347243Hey c3idesign,
Thank you for the inquiry.
Looks like you are already trying to move the mobile menu icon to the top bar. Please remove the current modifications temporarily, the use this css code instead.
@media only screen and (max-width: 767px) { #top .av-burger-menu-main { position: absolute; top: -60px; } #header_main { z-index: 20; } }
You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.
Best regards,
IsmaelApril 6, 2022 at 1:33 am #1347336When I add the above, the burger menu disappears on mobile. (I did update compression settings also)
April 6, 2022 at 9:18 am #1347379Hi,
Please try this instead:
@media only screen and (max-width: 767px) { #top .av-burger-menu-main { position: absolute; top: -35px; right: -5px; } .logo img { margin-top: 10px; } #header_main { z-index: 20; } }
Best regards,
RikardApril 6, 2022 at 3:10 pm #1347437No change – is there a way (using css or functions) to move the burger menu to the fixed secondary menu? I would like the burger menu icon visible after scrolling. Thanks,
April 6, 2022 at 5:14 pm #1347445Hi,
Please post admin WordPress login details in private, so that we can try the CSS out for ourselves.
Best regards,
RikardApril 7, 2022 at 4:51 pm #1347594Info in private content (I thought I posted this yesterday)
April 7, 2022 at 7:35 pm #1347609Hi,
Thanks for that. I’ve adjusted and added the CSS for you, and it’s working as it should. Please review your site.
Best regards,
RikardApril 7, 2022 at 9:03 pm #1347618Thank you so much.
When scrolling on mobile, the burger menu disappears. Is there css I can add to always display like the cart does?
April 8, 2022 at 10:05 am #1347684April 8, 2022 at 4:26 pm #1347728Hi, unfortunately that is not what I wanted.
I removed the custom css at the top:
@media only screen and (max-width: 767px) {
#top .av-burger-menu-main {
position: absolute;
top: -35px;
right: -5px;
}
}.logo img {
margin-top: 10px !important;
}#header_main {
z-index: 20 !important;
}
.responsive #top #wrap_all .main_menu {
top: 48px;
left: -80px;
position: fixed;
}
}Now the menu font is not how it was. See 2 urls below.
The menu font is set in the Enfold settings, but is getting overwritten somewhere. I’ve cleared cache and changed the css file merging, but no change.
April 8, 2022 at 6:10 pm #1347741Hi,
You might have left some CSS or media queries open, you can check your code using a tool like this: http://csslint.net/
Best regards,
RikardApril 8, 2022 at 7:58 pm #1347750Thank you.
April 9, 2022 at 9:32 am #1347765 -
AuthorPosts
- You must be logged in to reply to this topic.