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 and select the affected navigation bar.
  • Adjust the Grid Layout in the Style Panel by setting it to 4 columns and 2 rows.
  • Reposition elements as needed to avoid gaps.
  • Check other breakpoints and make further adjustments for consistency.

Webflow automatically adjusts grid layouts in different breakpoints, sometimes adding extra columns in tablet view. To manually control the grid, follow these steps:

1. Switch to Tablet View

  • Click the Tablet icon in the Webflow Designer.
  • Your navigation bar may have more columns than intended due to Webflow's auto-adjustments.

2. Adjust the Grid Layout

  • Select the navigation bar that contains the unwanted columns.
  • Go to the Style Panel (right sidebar).
  • Find the Grid section.

3. Manually Define Grid Columns and Rows

  • Set the columns count to 4 and rows count to 2 under the Grid Layout settings.
  • Adjust column and row sizes as needed (e.g., using FR units or fixed pixel values).

4. Ensure Correct Element Placement

  • Check how items are positioned within the grid.
  • Drag and reposition items if necessary to avoid empty gaps.

5. Review Other Breakpoints

  • Switch to Mobile landscape and portrait views to ensure the layout remains correct.
  • Make further adjustments if needed.

Summary

Webflow may auto-adjust grid columns in tablet view, but you can override this by manually setting a 4-column, 2-row grid in the Style Panel. Ensure elements are positioned correctly and check other breakpoints for consistency.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I use a custom link for form submissions in Webflow? I want to maintain consistency and use our own custom button instead of the default submit button.
How can I correct the issue where the Webflow staging site appears instead of the custom domain when searching for my Client's business name, Jackson Wink, on Google?
How can font color be changed based on background color zones in Webflow? What script can easily achieve this, such as black font for the upper left zone, white font for the lower zone, and white font for the upper right zone?
Why am I getting the error "Collection with this URL already exist" when trying to make changes in page settings on Webflow? I have a page with slug "blog" and a CMS collection with slug "blog", and my structure looks like '…' and '…'. I haven't changed the slugs.
What is the current best workaround in Webflow for adding a "select country" list into forms, without using ecommerce and considering limitations on maximum number of items and characters for custom code?
Is it possible to create an integration/plugin for Webflow that enables bulk upload of image assets from Figma/Sketch/Adobe? Can you please provide information on how to gain API access and the relevant technical documentation for this?
How can I disable scrolling on everything except the modal div in Webflow using custom code?
How can I prevent the home page from scrolling when a modal is open in Webflow, and ensure that the modal always opens at the top of the page?
How can I adjust the left margin of a header container in Webflow when the container margins are locked to keep it responsive?
How can I delete a symbol in Webflow without deleting my original work and create a new symbol from an existing symbol?
What could be causing a large white bar to appear underneath the website when viewed on an iPad Pro 12.9, despite not showing on mobile or PC? I have already tried removing the footer and other elements, with no success.
How can I create a multi-select filter in Webflow for custom dynamic filters, including code examples and a video tutorial? I have already implemented a custom dynamic filter using this forum (), but I want to allow users to make multiple selections for content filtering. Any guidance or assistance would be greatly appreciated. Best regards, Tony
Can Webflow allow me to customize the placement and alignment of buttons in a slider, specifically positioning them on the right side while keeping the content on the left? Additionally, is it possible to prevent the arrows and navigation from overlapping with content, such as a YouTube player, so that users can use all the buttons and features without any issues?
Need help with custom code, embed code, or other integrations in Webflow? Get assistance by sharing your project's Read-Only link, live site's Published link, third-party plugin link, screenshots or videos, a description, and a working example of what you're trying to achieve. Don't forget to include any browser console errors. Tag forum users by using the @ symbol followed by their username.
Can scrolling be prevented when the off-canvas menu is open 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 use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
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 anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
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?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?