How to get default nav bar to push down content on mobile?

I’ve been trying to understand the reasoning behind Webflow’s default nav bar overlapping content instead of pushing it down (even when not fixed). After searching the forum I haven’t been able to find any solution. I’ve tried making a second accordian nav bar on mobile but I’m running into a conflict with the CMS collection list limit per page. Is there a way to make the default one push the content down when opened?

Thanks!

You will need to style your open nav menu - currently it is absolutely positioned by default.

Interesting. This is all I need to do? I was always under the impression that a custom accordion had to be made for this to happen. Why do I see recommendations for creating a 2nd nav bar on mobile then if this is the case?

It depend on what your exact goals are.

@dram do you know the best way to go about styling this? I’ve tried setting it to other positions but can’t replicate an accordion to push content down. Would a transformation or interaction need to be added?

Please provide a read-only to what you already have and I will see how to do it if my understanding of your problem is correct of course!

@dram here you go: https://preview.webflow.com/preview/swiig?utm_source=swiig&preview=90e79abfa8da241a2e14a8a558e2d326

If you navigate to a mobile view on the home page, you can see the 2nd nav bar “categories” overlays the slider instead of pushing it down upon opening. As I said, I COULD make an accordion but due to the number of collections I plan to add it isn’t feasible. I believe there’s an appropriate way to style the nav menu but I’m stuck. Thanks in advance :slightly_smiling_face:

So you want a dropdown inside a dropdown?

0ca36be035e2c8c79d6af4543c7a6990

Maybe I am missing something but why don’t you just structure your second nav the same way you’ve built your first? Since the first one works fine the second will too, no?

@dram The dropdown part is covered, but since its listing both categories and products it requires dropdowns in the dropdowns. I had one styled like the top one but since each category (19) needs to be made dynamic with a list, 2 separate nav bars (38) allows for no room to work with on each dynamic page since the limit is 40 for business plans. Unless theres a way to reuse the same dynamic list for multiple categories? Couldn’t think of a good way to filter it

If not, I’m just considering removing the individual products from mobile view and keeping the accordion. It was a clients request to have all products listed. Seemed odd to me too, lol.

I see. Well, I’d opt for categories only on mobile as well (I think I’d remove them from main nav also honestly)

Trust me, I agree. I’m working with a marketing team who frankly doesn’t understand the value of simplicity and mobile real estate :joy: thank you for convincing me

I understand it can be hard to change client’s mind no matter what someone on the web says. Perhaps some examples of sites of respectable companies will convince him the common practice is not showing individual products in the main nav (unless the store is really specialized and sells just a handful!)

Well, I was considering presenting examples as well and feedback from others, which they appreciate. From a design perspective and to keep the integrity of the smooth accordion navs consistent, it is definitely a better move to condense content in a nav bar. To be fair, they’re not exactly web experts, just marketing professionals, so they don’t exactly understand generally accepted principles. Your input will help though!

1 Like