hey guys. This might be a dumb question, or an obvious fix but if someone could help me out that would be great. Im trying to build two seperate navbars for my site. One on the home page that is transparent and lays on top of the hero background image and one that is white for my other pages. The white one looks fine on desktop view, but when I go to Tablet and down, the hamburger menu icon disappears. I can see it in the editor, but not in preview or when I publish the site. Anyone know whats happening? here is my read only: https://preview.webflow.com/preview/the-putting-institute?utm_medium=preview_link&utm_[…]7d5e698902&pageId=66a0000f96e6383f99e080b5&workflow=preview
my guess is that both of the navbars share the same classes and you have the white version menu icon with a white color variable.
ah yes that was the problem. Thank you! however i just realized when i click the menu the menu shows beneath the first section lol. Not sure how that is happening
i figure it out, I didnt have the white navbar position set to relative! Thanks for your help.
May I suggest something?
If you don't mind - one suggestion that I would have if you are trying to have different colored navbars is to actually wrap the navbar in a couple of divs and try to have the contents of the navbar inherit from a parent div.
So maybe you have a structure like this
navbar_wrapper - this is the top level wrapper, where you would apply a background color, or position: sticky, or any other visual styles. You would add a combo class like is-dark or is-light here to swap the colors.navbar - this is the div that wraps the actual navbar_component and is what is turned into an actual componentnavbar_component - keep this as is, barely touch it other than to style what might be similar between the two navbar styles (maybe the nav links are always bold).