How can I remove auto-generated columns in Webflow's tablet view to make a navigation bar with only 4 columns and 2 rows?

TL;DR
  • Switch to tablet view in Webflow's Designer to modify the navigation bar.
  • Select the navigation bar, change the display to Grid in the Style panel, and configure it to 4 columns and 2 rows.
  • Remove any extra columns by selecting them and pressing delete.
  • Adjust navigation items to fit within the grid and check other breakpoints for consistency.

To customize your navigation bar to have only 4 columns and 2 rows in Webflow's tablet view, you need to modify the layout settings of your navigation element. Here's how to do it:

​

1. Switch to Tablet View

  • Select the tablet icon (second from left) in the top bar of the Designer to switch to the tablet view for your project.

​

2. Access the Navigation Element

  • Click on your navigation bar in the Designer to select it.

​

3. Adjust the Grid Layout

  • If your navigation bar uses a CSS grid:
  • Open the Style panel on the right.
  • Under Display, ensure it says Grid. If not, change the setting to Grid.
  • Click on the Edit Grid icon to modify the grid layout.
  • Manually set the grid to have 2 rows and 4 columns.
  • Adjust the column widths and row heights to ensure your content fits within these constraints.

​

4. Remove Extra Columns

  • If there are auto-generated columns:
  • Click on any extra columns you wish to remove and press the Delete key.
  • Ensure only the required 4 columns remain for your desired layout.

​

5. Adjust Navigation Items

  • Move or add navigation items so they fit neatly into your new grid layout of 4 columns and 2 rows.
  • Ensure each of the navigation items is properly placed without overflowing the grid.

​

6. Review Responsiveness

  • Check other breakpoints (desktop, mobile landscape, mobile portrait) to ensure that changes in the tablet view do not negatively impact other views.

  

Summary

To remove auto-generated columns in Webflow's tablet view and design a navigation bar with 4 columns and 2 rows, modify the grid settings in the Style panel of your navigation element, ensuring it fits this specific layout requirement while reviewing other breakpoints for consistency.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What are the steps to add a datepicker to a Webflow site using jQuery and jQuery UI?
Is there a way to make images ignore column padding in Webflow without setting their width manually or using separate divs? Providing the images with 72px padding left and right inside a rich text block is also not preferred due to limitations in reordering and organizing. Is there a solution for this? Thank you!
How can I use conditional visibility in Webflow to filter category-related blog posts on a dynamic blog page? Are there any video tutorials available for this? Thank you!
Can the PDF file link displayed in the browser be modified to remove the Webflow reference?
How can I embed a Substack newsletter sign-up form onto my Webflow site using HTML? I've tried adding the code to the head tag following the instructions from the Webflow University article on custom code but it doesn't seem to be working. Any advice?
How can I improve the mobile score above 90 on Google audits for webflow, particularly addressing the issue of First Contentful Paint 3G timing?
Is there a way to add anchor links to specific paragraphs in a blog post on Webflow without using ID's and creating sections?
How can I embed an MP4 video into my Webflow project without using external video hosting and loading it from my local device, since I won't have internet access?
Can I use an embed code to implement a background video in Webflow with better compression and quality compared to the native component? I want to achieve a layout similar to a specific website. Thank you!
What are the limitations of Webflow's CMS, including the maximum number of references, items per collection, and collection items per project? How can these limitations be bypassed with a higher hosting plan?
How can I create different layouts for mobile and desktop versions in Webflow? I have already created a layout for the mobile version, but when I hide it on the desktop, it also gets hidden on the mobile version. Webflow does not have an option to make it visible on desktop or mobile only.
How can I change the text in the footer of my Webflow slider based on the slide being viewed?
Is there a Webflow Slack channel available for Partners, Freelancers, and Agencies to join?
How can I change the hover color of a button in Webflow's Slate design? I've already updated the basic color to green, but it still shows orange on hover.
How can I set the default tab in Webflow when the functionality is lacking?
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?