I’m new to webflow and working on my very first project. I’m having problems formatting the navigation for tablet and mobile. When viewed on a tablet I would like the menu to be hidden with just the hamburger button showing and the logo centered. Then when clicked, the menu will drop down. My live site can be seen at www.fishhawkelectronics.com.
drag a navbar widget under your current nav section
delete the three default links, and instead, in the Navbar element, copy the dropdown elements from your old navbar. You’ll have to adjust the styles because you’re going to lose the font here but it’s ok.
put your image into the brand element and give it a class “brand”.
select the element above the brand, the container, and name it nav-container
click on tablet breakpoint
select the nav-container element and give it text align center
select the brand element and cancel the float left property: it centers itself
Vince thank you for your expert advice! Very much appreciated. The nav is look and working a lot better. But I can’t seem to get the Support button to align to its correct location. It should come after the About button. I’ve tried moving it but it there must be a CSS setting that’s not correct. Any idea what I’m not doing correctly?
I got this part but the problem is when I’m viewing the site on a tablet. Then the menu item “Support” is to the right of the “Products” button. It must be a css problem. I can’t get the “Support” button to align correctly after the “About” button.