-
AuthorPosts
-
July 23, 2018 at 5:18 pm #988777
Hi,
we recently made some ajustments on logo and menu, but unfortunately now the following two issues with the menu on tablets arose:
1. On my iPad the search symbol is overlapping with the logo (see screenshot here).
2. On my iPad the logo background is black instead of white (see screenshot here). On my mobile it is still white as it is supposed to be.
With our old logo and menu we already had some problems with menu and logo overlapping, therefore we added the following CSS-code, which worked fine until the recent changes:
@media only screen and (max-width:1024px) { .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none; } .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special { display: block !important; } } @media only screen and (max-width:767px) and (min-width:480px) { .responsive #top #header .logo img { max-width: 50%; } }
Could you please help me to solve this issue?
Please find the WP-login data in the private content.
- This topic was modified 6 years, 5 months ago by catchbudapest. Reason: small corrections
July 26, 2018 at 3:44 am #990012Hey catchbudapest,
For your header & logo color on tablet I added this css code in the General Styling > Quick CSS field:@media only screen and (max-width: 989px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img { opacity: 1 !important; } #top #wrap_all .av_header_transparency { background-color: #fff !important; } .responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child>li>a { color: #969696 !important; } .av_header_transparency div .av-hamburger-inner, .av_header_transparency div .av-hamburger-inner::before, .av_header_transparency div .av-hamburger-inner::after { background-color: #969696 !important; } }
Please clear your browser cache and check.
For your other issue, I couldn’t reproduce it, has this already been solved?
What is the screen resolution on your device when this occurs?Best regards,
MikeJuly 26, 2018 at 10:21 am #990146Hi Mike,
thanks for the help!
The background is now white but the social media icons are not visible anymore (since they are white as well).
(See screenshot here).The issue with the logo overlapping is not solved yet (see screenshot above).
I have a iPad Air 2 with a screen resolution of 1536 x 2048 pixels.
The problem appears only in portrait mode.Best,
FlorianJuly 26, 2018 at 1:08 pm #990229Hi,
Please try this code in the General Styling > Quick CSS field:@media only screen and (max-width: 989px) { #top #wrap_all .social_bookmarks a { color: #000 !important; } .avia-menu.av_menu_icon_beside { padding: 0px !important; margin-right: 12px !important; } }
Best regards,
MikeJuly 26, 2018 at 2:29 pm #990266Hi Mike,
thanks that work, but could you please change the color code of the social icons from black to grey (same grey as in the mobile view).
Here a screenshot of the tablet view and here of the mobile view).And could you please tell me which CSS-code is still necessary?
I kept the code of your first posting and just added the code of your second posting.
And I also still kept the CSS-code from my first posting above.Can I delete or summarize some of this?
/* logo-menu overlapping Anfang */ @media only screen and (max-width:1024px) { .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none; } .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special { display: block !important; } } @media only screen and (max-width:767px) and (min-width:480px) { .responsive #top #header .logo img { max-width: 50%; } } /* logo overlapping Ende*/ /*header color for tablet*/ @media only screen and (max-width: 989px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a>img { opacity: 1 !important; } #top #wrap_all .av_header_transparency { background-color: #fff !important; } .responsive #top #wrap_all .av_header_transparency .main_menu ul:first-child>li>a { color: #969696 !important; } .av_header_transparency div .av-hamburger-inner, .av_header_transparency div .av-hamburger-inner::before, .av_header_transparency div .av-hamburger-inner::after { background-color: #969696 !important; } } @media only screen and (max-width: 989px) { #top #wrap_all .social_bookmarks a { color: #000 !important; } .avia-menu.av_menu_icon_beside { padding: 0px !important; margin-right: 12px !important; } }
July 26, 2018 at 8:24 pm #990388July 27, 2018 at 5:04 am #990537Hi,
I made some adjusts to your css and added this to solve your logo on mobile:@media only screen and (max-width: 478px) { .avia-menu.av_menu_icon_beside { padding: 0px !important; margin-right: 0px !important; } }
Please clear your browser cache and check.
Best regards,
MikeJuly 27, 2018 at 9:29 am #990585Hi Mike,
looks good now, all issues are solved!
Thanks a lot for your help!Best,
FlorianJuly 27, 2018 at 9:36 am #990590 -
AuthorPosts
- The topic ‘Menu/Logo overlapping and black logo background on tablets’ is closed to new replies.