Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 23, 2018 at 5:18 pm #988777
    catchbudapest

    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, 4 months ago by catchbudapest. Reason: small corrections
    July 26, 2018 at 3:44 am #990012
    Mike

    Hey 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,
    Mike

    July 26, 2018 at 10:21 am #990146
    catchbudapest

    Hi 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,
    Florian

    July 26, 2018 at 1:08 pm #990229
    Mike

    Hi,
    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,
    Mike

    July 26, 2018 at 2:29 pm #990266
    catchbudapest

    Hi 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 #990388
    catchbudapest

    Addition to my previous text:

    I just realized that on my mobile device the logo is now overlapping again with the search icon.
    Here is a scrennshot how it looks now and here how it looked before the last CSS-modifications.

    July 27, 2018 at 5:04 am #990537
    Mike

    Hi,
    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,
    Mike

    July 27, 2018 at 9:29 am #990585
    catchbudapest

    Hi Mike,

    looks good now, all issues are solved!
    Thanks a lot for your help!

    Best,
    Florian

    July 27, 2018 at 9:36 am #990590
    Yigit

    Hi!

    Glad Mike could help! Let us know if you have any other questions or issues and enjoy your weekend!

    Regards,
    Yigit

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Menu/Logo overlapping and black logo background on tablets’ is closed to new replies.