Help Needed: Navbar Issues on Tablet and Mobile for My Site

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

4 comments

Matt J.
·
Carter M. 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.
Carter M.
·
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
Carter M.
·
i figure it out, I didnt have the white navbar position set to relative! Thanks for your help.
Matt J.
·
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 component
navbar_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).
Now in this way, we can have a single navbar component, with multiple styles to it. For the logo, you could have both style of logos inside of the component and just do a component property to swap them based on which page they are on. The benefits to this approach is that you dont have to try to style two seperate navbars, or keep tabs on two different navbar links and they share a lot of the same classes.

Help Needed: Navbar Issues on Tablet and Mobile for My Site | Relume Community