How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?

TL;DR
  • Design a vertical scrolling menu in Webflow by creating a menu-container with vertical overflow and adding menu items inside.
  • Use media queries to switch to horizontal scrolling on smaller screens by applying a flexbox with row direction, then test and refine the design for responsiveness before publishing.

Creating a vertical scrolling menu in Webflow that switches to horizontal scrolling is a great way to maximize space and improve navigation efficiency on your site.

​

1. Designing the Vertical Menu Layout

  • Open Webflow Designer and create a new section for your menu.
  • Add a div block within this section and give it a class name like menu-container.
  • Set the menu-container to a fixed height, ensuring it allows for vertical overflow.
  • Add link blocks or buttons inside menu-container for each of your menu items.

​

2. Adjusting for Vertical Scrolling

  • Set the overflow property of menu-container to auto. This enables vertical scrolling if the items exceed the container's height.
  • Ensure your menu styles (padding, margins) are uniform to maintain consistency in item spacing.

​

3. Enabling Horizontal Scrolling

  • Create a conditional style using media queries to handle smaller screens.
  • Use a CSS flexbox with flex-direction: row; for smaller screens to align items horizontally.
  • Change the overflow property to auto for horizontal scrolling within this media query.

​

4. Testing the Menu

  • Use Webflow's preview mode to test the responsiveness of your menu, specifically how it behaves with different screen sizes.
  • Refine animations (if any) to ensure smooth transitions between vertical and horizontal scrolling.

​

5. Final Adjustments and Publishing

  • Review any interactive elements you applied to ensure they function correctly.
  • Publish your site to test the menu behavior in a live environment.
  • Make necessary adjustments based on user interactions on the published site.

​

Summary

Create a vertical scrolling menu by designing a menu-container and setting it to overflow vertically. Utilize media queries to switch the layout to horizontal scrolling for smaller screens, ensuring a responsive design that adapts to user needs. Test and adjust as needed for optimal user experience.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I upload a folder containing necessary files like ruby files, js files, CSS files, and SCSS files to a Webflow project in order to add Slick Slider?
How can I target checkboxes instead of a div using custom embed code in Dave's Webflow project about multi-field reference checkboxes?
What could be causing the issue of a custom js code not displaying properly on Google indexed pages for a Webflow landing page? Is it possible that there is a bug in the code?
Has anyone successfully integrated Nowpayments into a Webflow E-commerce website and can provide guidance on how to do it?
Is there a code editor within Webflow where I can fix issues with rows/tables that are outside of the viewport?
What is the cause of the "429 Too Many Requests" error in Webflow that is disrupting client work and how can it be resolved?
What is causing the navigation menu to not appear on top in the vertical view on mobile devices in Webflow compared to tablet and horizontal mobile views?
How can I add a date and time picker to a simple Webflow form without using a CMS collection item?
Is it possible to dynamically update the price in Webflow based on the number selected in a dropdown menu, while keeping the dollar amount blank?
What are some image compression tools for both Mac and Windows users that are web-based?
How can I get the script for a form/survey to work properly in Webflow?
How can I fix the "Uncaught ReferenceError: $ is not defined" and "Uncaught SyntaxError: Unexpected token <" errors on my Webflow site?
How can I embed iFrame code from a Collection onto my Webflow site?
How can I edit specific classes that I have created in Webflow? I am unable to locate the option box mentioned in an old response from 2014, and I do not see it to the right of the classes text field. The only dropdowns I see are for renaming or duplicating a class and selecting pseudo-classes. Here are screenshots for reference: [Include screenshots here]
How can I upload an After Effects animation to my Webflow site so that the entire animation appears correctly with all elements, including text and stroke write-on effects, using Bodymovin?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?