Need help with formatting nav for tablet and mobile

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.

Any help would be greatly appreciated.

Bob


Here is my public share link: https://preview.webflow.com/preview/fish-hawk-electronics?preview=5aad3c9cd3bcfd301476a53d7657d9db
(how to access public share link)

Today I learned than you can fish with 24 poles for 3 people :wink:

Okay here is what you have to do to get a clean and SEO efficient structure with the result you exactly want.

You’ll get this result : Google Chrome – Tapes

We’re going to redo your navbar entirely.

  1. drag a navbar widget under your current nav section
  2. 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.
  3. put your image into the brand element and give it a class “brand”.
  4. select the element above the brand, the container, and name it nav-container
  5. click on tablet breakpoint
  6. select the nav-container element and give it text align center
  7. select the brand element and cancel the float left property: it centers itself

Now you got pretty much what you’re looking for.

1 Like

No but seriously how do you NOT get all the threads of the poles to tangle? Mystery!

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?

Bob

Hey @bobmagstadt great question! You can select the element and then move it around within the Navigator Tab as well.
Here’s a gif on how to do this:

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.

I think I have it figure out. Thanks Waldo.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.