Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 25, 2020 at 1:43 pm #1187683
    rob2701

    Small correction hamburger icon in layout.css for next update (to make hamburger icon consistent in all breakpoints).
    Now smaller breakpoints get uneven line thickness.

    line 407 and 411 in layout.css respectively.

    .av-hamburger-inner::before {
top: -8px; /* was -10px; */
}

.av-hamburger-inner::after {
bottom: -8px; /* was -10px; */
}

    Also the color setting in Theme Options > Main Menu > Burger/Mobile Menu Styling at the moment does not apply to breakpoint between 768px and 989px.
    You may want to fix that as well in the next update.

    @media only screen and (min-width: 768px) and (max-width: 989px) {
  .av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after {
    background-color: #xxxxxx !important;
  }
}

    Kind regards,
    Rob

    March 3, 2020 at 2:00 am #1189551
    Ismael

    Hey Rob,

    Thank you for the info.

    We can’t really reproduce the issue when we try to resize the browser. Do you have a test page? Please provide the link in the private field so that we can check it.

    Best regards,
    Ismael

    March 3, 2020 at 10:01 am #1189639
    rob2701

    Hi Ismael,

    No, sorry, local installation.

    But I can also see it on a standard Enfold 4.7.3 installation with child theme, default demo imported. (using FireFox 73.0.1)

    When resizing the browser from max to smaller, if you look closely you can see the top and bottom lines of the hamburger icon are thinner than the center line (because of the negative top and bottom you apply in the layout css)
    .
    And the color only applies below 768px when set in the Main Menu options, not from 768 to 989px.

    Kind regards,

    Rob

    March 3, 2020 at 2:21 pm #1189741
    rob2701

    Hi Ismael,

    I have set up access on the test server for the development theme and the clean theme.
    See private links.

    Regards,
    Rob

    March 6, 2020 at 7:46 am #1190768
    Ismael

    Hi,

    Thank you for setting up the test sites. It’s all the same though. The lines in the burger menu look similar. Please check the screenshot taken from Firefox Developer on Windows 10.

    Screenshot: https://imgur.com/a/sYuBbbE

    Best regards,
    Ismael

    March 6, 2020 at 11:14 am #1190814
    rob2701

    Hi Ismael,

    The uneven lines thickness is there to my eyes… :-)
    Beste visible at around 900px, in you own default demo: https://kriesi.at/themes/enfold/

    FF 73.0.1 > top and bottom lines thinner
    Opera 67.0.3575.53 > center line thinner
    Chrome 80.0.3987.132 > center line thinner

    The visibility of what I mention could maybe have something to do with the fade-in transition you apply to the icon, which makes it sometimes very visible sometimes not so much. Maybe only on a cleared browser cache.

    Anyway, it was just something I noticed and fixed on my own devsite.
    But if no one else sees it, then please close this as solved, by all means.

    Kind regards,

    Rob

    Additional info:
    This is on Win8.1, when I see the same version FireFox on Linux Mint 19.3 there is no uneven line thickness… ????
    I think the transition applied could be the issue on Win8.1 FireFox and other browsers.
    Anyways, the color not applying after setting it in Theme Options > Main Menu > Burger/Mobile Menu Styling between 768px and 989px is valid on all platforms and browsers, you may want to check that.

    • This reply was modified 4 years, 8 months ago by rob2701.
    March 9, 2020 at 10:45 am #1191418
    Ismael

    Hi,

    This is a screenshot of the demo in a Firefox browser/device emulator — view port width is set to 900px. The lines in the burger menu are still the same.

    Screenshot: https://imgur.com/a/5E4pJkK

    We can’t reproduce the styling issue either. This screenshot is taken in the same browser — width is set to 800px.

    Screenshot: https://imgur.com/a/kvWPxxu

    As you can see, burger menu is still orange as set in the theme options panel.

    We’ll close this thread for now. Please don’t hesitate to open a new one if you require more assistance.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Small correction hamburger icon in layout.css for next update’ is closed to new replies.