Hi everybody,
I am reworking a website and have started with the navbar. Class naming is being done according to the BEM convention. Currently, the website shows 2 navbars placed on top of each other:
The top one is a Webflow navbar, selected from add elements → navbar.
In the navigator panel it is marked with a home icon:
The bottom one is a navbar I made myself using div elements, and it does not have a home icon:
The reason I have 2 navbars is because the Webflow navbar includes the “burger menu” (3 lines) and makes it easy to collapse the menu on mobile breakpoints, whereas my custom navbar did not do this out of the box. So basically - I want the layout of my custom navbar and the burger menu functionality of the Webflow navbar. To do this I added a Webflow navbar and assigned it all the classes of my custom navbar so that the 2 navbars become identical.
Both navbars have the exact same structure and same class names. Despite this, one observes that the Webflow navbar has a distinctly different layout than my “custom-built” navbar. And after thoroughly comparing styles, settings and checking for interactions I cannot find any differences! 
However, I did notice this: On the published site, using the inspector, there are pseudo elements affecting the Webflow navbar. Specifically, one property called “content” seems to be the culprit.
If I uncheck content: " " then the two navbars match up identically. I’ve looked into removing this pseudo element using embedding but this does not feel like the right approach. There must be a simpler and better appraoch.
What am I missing here?
Thanks in advance! 
Here is my site Published
Here is my site Read-Only
(how to share your site Read-Only link)
