Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 12, 2018 at 7:46 pm #911287
    Eleina_Shinn

    Hi:

    I wondered if you could take a look at this site, the hamburger icon overlaps the logo on a cell phone, I think because I’ve got the social media icons in the header, not sure how to fix this?

    Welcome

    Thank you!

    February 12, 2018 at 7:58 pm #911294
    Yigit

    Hey,

    Please refer to this post – https://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/ :)

    Best regards,
    Yigit

    February 12, 2018 at 8:25 pm #911316
    Eleina_Shinn

    Hi Yigit:

    That is not the issue, the mobile menu is there… I understand the theme options. The problem is that on very small screens/cell phones, the hamburger icon, although it’s there, it’s overlapping the logo …

    February 12, 2018 at 8:55 pm #911347
    Yigit

    Hi,

    I could not reproduce this but could you please try adding following code to Enfold theme options > General Styling > Quick CSS

    @media only screen and (max-width: 480px) { 
.responsive .logo img {
    max-width: 70%;
}}

    Best regards,
    Yigit

    February 13, 2018 at 5:58 pm #911812
    Eleina_Shinn

    Okay, really struggling with menu responsiveness on this site.

    Have it down to Menu overlaps logo on 10″, 12″ and larger tablets… I”ve tried reducing the logo at different sizes, but don’t know if I’m doing this correctly, the first one works, somewhere in the middle it doesn’t . The way I see it, it’s not working for screen sizes between say 1129px and when it turns over to mobile menu at 980… I have this code in there now, but have tried several size reductions:

    /* REDUCE LOGO FOR SMALLER SCREENS SO MENU WON’T OVERLAP*/

    @media only screen and (max-width: 1100px) {
    .responsive .logo img {
    max-width: 60%; margin-top: 25px;
    }}
    It’s not working, what I’ve done… or what you had

    February 14, 2018 at 11:43 am #912209
    Nikko

    Hi,

    Can you post a screenshot on how it looks on your mobile phone?

    Best regards,
    Nikko

    February 14, 2018 at 3:35 pm #912309
    Eleina_Shinn

    Yes, attached are two imags, showing the 2 problems:

    https://wfuentrepreneurship.info/wp-content/uploads/2018/02/screenshot-wfuentrepreneurship.info-2018.02.14-08-30-51.png
    https://wfuentrepreneurship.info/wp-content/uploads/2018/02/screenshot-wfuentrepreneurship.info-2018.02.14-08-32-03.png

    Oh, and I moved the site, so it’s no longer in the /new directory, it’s here:

    Welcome

    Thank you,
    ~e

    February 14, 2018 at 4:19 pm #912331
    Nikko

    Hi ~e,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:1160px) {
  .responsive #top #header .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top #header .av-main-nav .menu-item-avia-special {
    display: block;
  }
}

    As for the mobile, I checked it and it seems you have removed social media icons which frees the space and I don’t see any overlap. :)

    Best regards,
    Nikko

    February 14, 2018 at 5:18 pm #912373
    Eleina_Shinn

    Perfect, that worked, thank you!

    February 14, 2018 at 5:24 pm #912375
    Nikko

    Hi,

    Glad that we could help :) Let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

    February 14, 2018 at 5:32 pm #912379
    Eleina_Shinn

    You can close the thread, thank you so much for your help. You guys are great!

    February 14, 2018 at 5:37 pm #912384
    Nikko

    Hi,

    Thanks for your kind words, we appreciate it a lot. <3 Thanks for using Enfold and have a nice day! :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Hamburger Icon Overlaps Logo on Cell Phones’ is closed to new replies.