-
Posts
-
Quick CSS that a previous dev gave me as I was building this site appears to be now conflicting with the new mobile menu. When I remove all code from the Quick CSS box and refresh the site the mobile menu works. Can you please look at the below code and tell me which parts are causing the conflict? Thank you.
I think it might be this one. Removing this from Quick CSS brings back the mobile menu. However the mobile menu doesn’t have any of the social icons. Please let me know what code to put in place of this one that will do the same thing for the new menu, and what other tweaks are needed to put social back in the mobile menu.
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:
@media only screen and (max-width: 767px) { .responsive #top #header .social_bookmarks { display: block!important; }}If that does not help, please post a link to your website
Best regards,
YigitOk so I tried both. Just adding did nothing.
Put it in as a replacement for the part of code I isolated in my second comment worked but the social icons are in the wrong place. Look at these screenshots. They should be inside the burger menu unless there is a better way to put them outside it.
https://www.dropbox.com/s/4gdrnmmsa1a68zy/Screen%20Shot%202017-08-05%20at%2010.42.35%20AM.png?dl=0
https://www.dropbox.com/s/yczl4y6ip212t24/Screen%20Shot%202017-08-05%20at%2010.42.43%20AM.png?dl=0Hi,
Sorry the social icons can’t be in the burger menu at this time, but we can move them down with some css. Remove your other Quick CSS, and add this:@media only screen and (max-width: 767px) { .responsive #top #header .social_bookmarks { display: block!important; z-index: -50!important; } .responsive #top #header .social_bookmarks:before { content: "\A\A"!important; white-space: pre!important; } .responsive #top #header .av-burger-menu-main { right: -150px!important; }}
Best regards,
Mikethis is not working Mike. I replaced
@media only screen and (max-width: 1024px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}WITH
@media only screen and (max-width: 767px) {
.responsive #top #header .social_bookmarks {
display: block!important;
z-index: -50!important;
}
.responsive #top #header .social_bookmarks:before {
content: “\A\A”!important;
white-space: pre!important;
}
.responsive #top #header .av-burger-menu-main {
right: -150px!important;
}}and there is NO change
All other code in my original post comment is still in the Quick CSS box. i need it for other things.
Hi,
Can you please include a admin login in the private content area so we can take a closer look.Best regards,
MikeHi,
If you post again on the topics, they do go last on the line, so we do miss them.
Please use what ever you want as an email and just provide for us a username / password which we can use.Best regards,
BasilisHi strengthcoaching,
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: 767px) { nav.main_menu { display: block !important; } }If you need further assistance please let us know.
Best regards,
VictoriaIt works. Sort of. These are the following problems…
1. Vertical orientations it shows but no social menu
2. Horizontal orientations both are present but everything overlaps and burger menu should be on far right, not the social
3. iPad resolutions are all kinds of not right.You can see what I mean here http://www.responsinator.com/?url=www.strengthinnumberscoaching.com
In all honesty this was working fine and then you guys broke it by re-engineering the mobile menu. Why?
When it worked before it was burger menu on iPad resolution or lower and when you open the burger menu it showed the social icons above the nav next to the X
Please fix this asap. This has been a long time coming.
Hi strengthcoaching,
@media only screen and (max-width: 1024px) { nav.main_menu { display: block !important; } .menu-item { display:none; } .av-burger-menu-main.menu-item-avia-special { display: block; } }Best regards,
VictoriaThis still doesn’t fix it. It only fixed #3 kind of.
Again, please check http://www.responsinator.com/?url=www.strengthinnumberscoaching.com
Hi strengthcoaching,
Could you please clear the cache, check again and get back to us.
I don’t see the issue you’re describing any more.Best regards,
VictoriaApparently you aren’t reading my notes well so let me restate…
“These are the following problems…
1. Vertical orientations it shows but no social menu
2. Horizontal orientations both are present but everything overlaps and burger menu should be on far right, not the social
3. iPad resolutions are all kinds of not right.”#3 is now corrected
#1 is not
#2 is not (except the overlapping issue)Please read them again, compare to your own screenshots you showed me, and you’ll see exactly what i’m talking about.
P.S. Whatever emulator you used let me know and i’ll use it from now on.
Hi strengthcoaching,
Could you please attach some screenshot of the issues you’re having?
Best regards,
VictoriaWhich emulator are you using so we can be consistent? You didn’t answer that question. I’ll check using that one and post screenshots.
Hi,
You might want to use Google Web Inspector and use device mode: https://developers.google.com/web/tools/chrome-devtools/device-mode/
Best regards,
Nikko
- You must be logged in to reply to this topic.