After 6.3.3 update, burger menu icon not showing anymore

I have updated my site to 6.3.3. On narrow screens I use “navigation collapsed” element in the header, which is supposed to show the burger menu icon.
Two things happened after the update:

  • The place where the burger icon should be shown suddenly has a background color that was not there before the update; it basically looks like a colored square (red arrow in screenshot below). Clicking the colored square opens the menu, so it does functionally work like the menu toggle.
  • The burger icon is not shown. With the Firefox inspector tools, one can highlight the region where the burger icon actually is (green arrow, purple frame from the inspector)

image

The background color comes from this element. I cannot find anywhere that I have set the background color:

I have figured out why the burger icon is not shown: there is excessive padding-left of 4em (red arrow in the screenshot below). When I un-check this padding-left in the inspector, then the burger icon moves further to the left and becomes ~half visible within the colored region. Now, the second padding-left with 2em takes effect (green arrow). When I un-check this padding-left as well, the burger icon moves all the way to the left and a bit outside of the colored region


Here are the steps how it looks with only 2em padding-left and no padding-left:
image image
These screenshots are taken from within the cornerstone builder. When I do the same on the live site (i.e., unchecking the padding-left in the inspector), the burger icon also moves into the colored region and becomes visible. However, on the live site, the icon is also further up, so that one only sees the lower 2 lines of the burger, and the first line is cut off outside of the colored region.

Hi @striata,

Thanks for reaching out.
I have checked your staging site and found that the Navigation Collapsed element has been used, which is working like the Navigation Off Canvas element. I have added a separate Navigation Off Canvas element, and it worked perfectly and showed the burger menu icon. It seems there might be some different reason behind this problem, I would suggest you use the newly added Navigation Off Canvas element and adjust styles as per your needs.

Hope it helps.
Thanks

Thank you @tristup. This is of course something I could try. However, there is clearly something that went wrong during the change to 6.3.3. that messed up the styling of the Navigation items that worked fine before updating. I have seen several other posts in this forum about navigation elements that have changed their styling. For example this post: 6.3.3 Bug - Mobile Nav Button Styling
So, is this something that will be fixed within a reasonably short time frame? Because if it will be, I would not invest the time in styling the new Navigation OFF Canvas element.

Hi @striata,

We will surely check that, but the Navigation Collapsed element has been changed a few versions back and has been added to the Navigation Off Canvas element.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.