Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 5, 2022 at 2:46 pm #1339031
    markus-fischer

    Hello,

    The logo size as well as the menu look great on Desktop. Please see attached Screenshot “#1 Desktop”.

    1. However, the logo looks too large / oversized on Mobile in Portrait Mode. Please see attached Screenshot “#2 Mobile Portrait Mode”. How can I adjust it so it appears a bit smaller and looks more elegant?

    2. When putting Mobile to Landscape Mode, the logo size looks good, however the menu doesn’t scale and goes on top of the logo. How is it possible to adjust it? The best solution would be to make the logo a bit smaller to avoid the overlay. How can I achieve this?

    Thank you in advance! :)

    February 5, 2022 at 4:41 pm #1339047
    markus-fischer

    …

    February 7, 2022 at 12:05 am #1339242
    markus-fischer

    Hi @Mike

    Do you possibly have an idea / solution for how to solve for this as well? :)

    I’d basically like the logo in the header to display smaller for Mobile.

    February 7, 2022 at 11:12 am #1339298
    markus-fischer

    Hi Team,

    Does someone know the CSS for this – how to adapt the logo size in the header (make it a bit smaller)?

    Thank you,
    Markus

    February 7, 2022 at 1:22 pm #1339343
    Yigit

    Hi Markus,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

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

    Best regards,
    Yigit

    February 7, 2022 at 8:51 pm #1339454
    markus-fischer

    Hi Yigit,

    Perfect, thanks!

    The logo is still overlapping with the menu bar – when expanded – though:
    Screen Shot 2022 02 07 at 8.48.29 PM

    Would you be able to share the Quick CSS to have the menu bar expand only from min-width 890px, please?

    I believe it should work perfect then.

    Thank you,
    Markus

    February 10, 2022 at 1:46 pm #1339976
    Mike

    Hi,
    To use a custom screen width for the burger menu please see here in our documentation:

    @media only screen and (max-width: 890px) {
  #top #header .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header .av-burger-menu-main {
      cursor: pointer;
      display: block!important;
  }
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 10, 2022 at 2:49 pm #1339992
    markus-fischer

    Thank you!! :-)

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Logo Size Mobile/Tablet + Scaling of Menu Bar on Medium Size Screens’ is closed to new replies.