Webflow sync, pageviews & more.
NEW

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, select the navigation grid, and delete any auto-generated extra columns.
  • Define exactly 4 columns and 2 rows, place nav links manually in each grid cell, and adjust layout settings to prevent auto behavior and ensure responsiveness.

You're trying to customize a navigation bar layout in Webflow's tablet view, but auto-generated columns are interfering. Here's how to remove excess columns and manually define a layout with 4 columns and 2 rows.

1. Switch to Tablet View

  • Open Webflow Designer.
  • At the top center, click the tablet icon to enter tablet breakpoint mode.

2. Identify the Container or Grid

  • Click to select the navigation container or grid you're working with.
  • Use the Navigator panel if needed to ensure you've selected the correct element.

3. Delete Auto-Generated Columns

  • If you're using a Grid, Webflow may auto-generate columns based on content.
  • Select the Grid, then in the Right Panel (Style tab):
  • Go to the Layout section under Grid.
  • Click the Edit Grid button.
  • Hover over any unwanted columns and click the trash icon to delete them.
  • Keep exactly 4 columns and ensure the grid has 2 rows (you can add a second row if needed).
  • Drag and drop your Nav Link or Text Link elements into each grid cell.
  • You can use Grid Child Settings (under Style tab) to place each link in a specific row and column if needed.

5. Disable Auto Layout Behavior

  • If you've applied any Auto layout (Flexbox) to parent containers, ensure it's not causing content to wrap or overflow unexpectedly.
  • For the grid container, verify that "Auto-fit" or "Auto-fill" options aren't used in the column definition.

6. Adjust Responsiveness

  • After setting up the 4 columns and 2 rows layout:
  • Test in landscape and portrait tablet modes.
  • Adjust widths, padding, and alignment to ensure everything fits cleanly within the container.

Summary

To create a custom 4-column, 2-row navigation layout in Webflow tablet view, switch to the tablet breakpoint, manually edit the Grid layout to remove extra columns, and place each nav item precisely. This ensures a controlled and responsive layout without auto-generated columns interfering.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I add RSS feed to my Webflow site?
How can I switch the color mix blend mode in Webflow to achieve a similar effect, as mix blend mode color is not supported in Safari?
How can I enable user account creation and interaction on my Webflow website without using Firebase integration?
How can I remove the default bullets and padding from a list in Webflow?
Can I change the position of an object in Webflow to be relative to a specific element instead of the body?
How can I create a full-screen mobile menu like the one in this Read-only link in Webflow? Thank you for your assistance!
Is there a way to set the modestbranding and color of a YouTube video element in Webflow, either through the UI or via custom code?
How can I turn off the gel-box styling of Safari's dropdowns using the code -webkit-appearance:none in Webflow?
How can I block form submissions with public emails on a Webflow Collection page template, and only allow submissions from work emails? I've implemented suggested code before the </body> tag, but a form submission still went through. If it's not possible to filter public emails, I'm considering switching to an embedded Hubspot form with their blocking list feature. However, I liked the idea of manually adding and removing domains to the blocking list, which is not possible with Hubspot. Can someone please help me troubleshoot and provide a solution for this issue on Webflow?
Can I integrate NFT minting and MetaMask wallet with a Webflow-designed website for my ERC-721 token collection?
Can I style the slider dots/bullets on a Webflow page in a way other than the default white or black options?
How can I include UTM parameter data in my Webflow form submission to track sources like social media and Google?
How can I link a team member's name in a list on a Webflow team page to reveal more information about them, all served from the CMS?
How can I slow down the scroll speed of a full-view height slider in Webflow that changes slides on mouse scroll up and down? I've tried using the code mentioned below, but it scrolls too fast. Are there any other ways to achieve this while ensuring one action triggers the interaction?
How can I add anchor points within the CMS rich text in Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
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?