Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 4, 2022 at 10:23 pm #1354185
    michaelmiller68

    I’ve got a couple of issues with the logo in my header. When you resize the window size the logo does not adjust so eventually the menu goes over top of it making both illegible. The second issue is that the logo itself seems a bit fuzzy and I can’t seem to fix the clarity having tried numerous file types and sizes. Any advice on either is appreciated

    Home

    June 4, 2022 at 11:22 pm #1354194
    Mike

    Hey michaelmiller68,
    Thank you for the link to your site, your desktop menu seems to start covering your logo at 1160px, so if you are not able to remove some items to make it shorter you can have the mobile burger menu show instead. Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (max-width: 1160px) {
  #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.
    Below I have linked your current logo (300×34) and your full size logo, try using your full size logo in the Enfold Theme Options ▸ Logo, paste the link directly and save the theme options, don’t use the logo “upload” button.
    If you like the display of the larger logo then you might want to change the max-width of the above css to 1440px.

    Best regards,
    Mike

    June 5, 2022 at 7:06 pm #1354245
    michaelmiller68

    Thank you. I’m getting some strange results. On some browsers the logo looks massive, not on others. I’ll play with that a bit. I’m wondering if there is a way to have the logo shrink as the browser window shrinks? At present the size remains the same and the mobile menu kicks in after the main menu overlaps the logo by a bit.

    June 5, 2022 at 7:21 pm #1354247
    Mike

    Hi,
    Typically you would use the Enfold Theme Options ▸ Header ▸ Header behavior ▸ Shrinking Header to have the header shrink on scroll:
    2022-06-05_013.jpg
    You could limit the height of the full size logo like this:

    #header_main .logo img {
    max-height: 60px;
}

    This should help make all browsers uniform.

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.