-
Posts
-
Hi, as you can see here – https://trello-attachments.s3.amazonaws.com/5429ce7e717fdf8b6ff5a47b/1106×166/282029d5be84b7bdea2d1baaaa9dd619/2014-10-06_1133.png
There are some cases that the menu goes over the logo. Is there a way to prevent this from happening?
Hi bakbek!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 1140px) { .av-main-nav > li > a { padding: 0 8px; }}Best regards,
YigitDoesn’t seem like it worked – http://screencast.com/t/KI8uAoqS6eg
Also, in the screenshot above you can also see that the social icons are missing for some reason.
Here is another screenshot with the social icons – http://screencast.com/t/abfMiSIceo
Is there an option to make the social icons only appear on desktop and not show on mobile/tablet? That will create more room for the menu and can reduce the chances of the menu overlapping the logo.
Hi!
Please try following code instead
@media only screen and (max-width: 1140px) { .av-main-nav > li > a { padding: 0 6px; }}You may need to adjust the value.
Have you tried checking your website on an actual tablet?Best regards,
YigitYeah, I did. Seems that on this specific page it doesn’t work and the menu is still overlapping the logo – http://polytown.co.il/twinmotion/
Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 1140px) { .av-main-nav > li > a > span.avia-menu-text { font-size: 14px; }}Cheers!
YigitStill no go. I think it will be best to remove the social icons (if possible) or just make the menu appear as a mobile menu.
Hey!
Please add following code to Quick CSS
@media only screen and (max-width: 1240px) { #header_main nav .social_bookmarks { display: none; }}Regards,
YigitSeems better but on one page it still goes over the menu a little when watching on Tablet Landscape -http://screencast.com/t/iDN22q35S3D
Hey!
Adjust the font size as well:
@media only screen and (max-width: 1240px) { #top #header .av-main-nav > li > a { font-size: 16px; } }Please go to Enfold > Header > Mobile Menu panel. Select the Tablet or the second option on the Header Mobile Menu activation setting.
Cheers!
IsmaelI am having a similar issue and have tried many of your css codes with no luck. My menu is hiding under the logo. http://www.stlouisdj.com
I too am having the same issue. I’ve tried a few of the codes your team has posted on this thread and this one too, but nothing has solved all of the issues.
The header is fine at 1140px wide and larger. Smaller than that, the menu begins overlapping with the logo. At approximately 767 pixels wide, the menu switches to the mobile menu which solves the issue. But then, as I downsize further, there’s a point at which the logo becomes distorted. I used some of the code provided in a thread so it’s no longer distorted, but it’s pushed down in the header and not properly vertically positioned.
Hey @apremierdj!
Try reducing your logo size a little bit, add this to Quick CSS:
#top .logo a img { width: 320px; height: auto; top: 28px; }Best regards,
JosueHi Josue. I’ve already switched that setting (activate for smartphones & tablets). It helped “turn on” the mobile menu for a slightly larger window dimension, but there’s still a range of window dimensions (about 768px to 1140px) where the traditional menu overlaps.
Then I’m having that second issue where the logo is a problem once the window is small enough for smartphone. The logo was being distorted, so I tried some code that your team posted, but now the logo is being pushed down and isn’t properly vertically aligned. This is the code I used for that particular issue:
@media only screen and (max-width: 479px) {
#wrap_all .logo img {top: 35px; height: 45px !important;}
#wrap_all .second-logo img {top: 0px;}}Unfortunately that code did not work well either. Reducing the logo size does help but I would rather not go that route of making it too small
Hi!
Unfortunately the only real solution is using a smaller logo or less menu items (if you must keep the same layout). Ultimately, the layout conforms to the content *or* the content conforms to the layout.
Best regards,
DevinThank you, but isn’t there something that tells the menu when to switch to mobile menu mode? Once the menu starts to overlap switch to mobile menu.
Also, I’ve made the logo smaller but is not centered with the menu items. Is there a quick css way to center the logo with the menu items?
Hey!
Try with this code instead:
@media only screen and (min-width: 767px) { .logo a img { width: 350px; height: auto; } .logo a img{ top: 22px; } .header-scrolled .logo a img{ top:0; } } @media only screen and (max-width: 1024px) { .html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;} .html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;} .html_mobile_menu_tablet #mobile-advanced{display:block;} }Best regards,
Josue
- You must be logged in to reply to this topic.