Mobile Navbar not functioning properly

Design help Animations & Interactions
1

Hello,

I am having trouble getting my mobile navbar to function properly. Here is my public share link: Webflow - Systematic Investing

When I click my burger on mobile, it opens up a blank white navbar. Here’s what I actually want to be shown:

Screen Shot 2020-02-12 at 9.50.53 AM
Screen Shot 2020-02-12 at 9.50.53 AM762×1196 51.8 KB

Could anyone assist?

2

image
image2047×669 127 KB

3

What do I need to do to the elements in the navbar to make them work?

4

The best and quickest way to make them work is… to redo the Navbar from scratch.

The Navbar component is one of the most preconfigured Webflow element. It has a lot of settings pre set for you. When you fiddle too much with a Navbar, it break easily. For instance, your Navbar Menu element is left with no dimensions because of the extra settings you’ve set. And that’s probably because you tried many options while designing your menu.

So now that you know where you’re going, redo it from scratch with new class names if you can. Like delete your navbar, clean unused styles and start over. This way you increase your chances of styling your navbar without breaking it.

That’s an advice for any other section or element or component that you fiddle too much with and starts acting wonky: redo it from scratch, it’s always fast.

1 Like
5

How do I rebuild the navbar from scratch?

6

Hi @nmccullum

Just like @vincent, I too would suggest creating the navbar entirely from scratch, by yourself. It sounds like a lot of work, but it isn’t! If you’re good with interactions, you should do just fine. I’m not going into too much detail in this post, but if you need me to, I wouldn’t mind. Here’s the steps:

  • Add a new div, call it “navbar” or whatever you’d like.
  • Set the display to block, on tablet and mobile views but to hidden on desktop.
  • Give it a “fixed” or “absolute” position and set 0 pixels from top.
  • Set width and height as per your requirement. Now start adding content inside. Add two divs, one for the logo, and one for the burger icon that opens your dropdown. Both divs can be absolute positioned, the logo can be 30 pixels from the left, and the icon div can be 30 pixels from the right.
  • Add another div inside your header, call it “nav link container”, make it absolute, give it a width of 100% and height of auto. The display should be vertical flex-box. Place your nav links inside this box, and set position to -100vh from top so it goes out of the screen.
  • Give your menu icon div an on-click interaction, and on click, bring the nav link down to 0vh from top. On second click, make it go back to its initial position.

This is basically how you create a menu for mobiles on your own. It works perfectly, is highly customizable and works the way you want it to. Of course it wouldn’t appear perfect at first look if you follow my directions, you’d have to tweak the numbers and positions a little bit, but that’s just the most basic way to do it. There’s also numerous other styles and methods to make it work if you have the time to play around with interactions a little bit. Even if it sounds difficult, you should stick to this method of doing it. Once you get the hang of it, it gets super easy and will help you make really creative mobile navigation functionalities!

Good luck and let me know if you need more details, would love to help.
Aditya

1 Like
7

I think I have my mobile navbars functioning properly now! If anyone would like to look over the website to ensure that it is functioning properly, I would appreciate it: https://www.systematicinvesting.io/