Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need help with a menu bar Reply To: Need help with a menu bar

#245139
Beverleyh
Participant

What does overflow hidden do?

It’s frequently used on a container to clear floated child elements. You might have seen when there are floated elements inside a container and the container is collapsed? Like whatever is inside has “escaped” and the container no longer wraps around or expands to the height of the stuff inside? You have to clear the floats in order to fix the parent’s collapse. Here’s an article with demos to explain https://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/

I see there’s a comment in your CSS that says something about floating list items side by side (maybe the li’s are distributed horizontally on wider screens elsewhere in your CSS?) so I imagine it’s a remnant of that.

But if you do have the menu buttons floated side-by-side on a wider screen (you may have removed that part of the CSS for the benefit of your demo), you’ll probably still need to clear them using something other than overflow:hidden;
You could try the clearfix method from the article above.

Another way is to avoid the need to clear floats by not using floated elements at all. You can do this by setting the li’s display property to inline-block. The down side of this though is the annoying little gaps that emerge between inline-blocks, but they’re easy enough to deal with https://css-tricks.com/fighting-the-space-between-inline-block-elements/.

Alternatively, CSS tables or Flexbox can be used to distribute menu li’s horizontally. Examples of those options can be seen here https://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

All of this only matters if you have your menu buttons laid out horizontally somewhere though.