Sean Sean - 17 days ago 7
CSS Question

How to Get Menu Items on Same Row

http://thehamburgercollection.com/shop/

If you look at the menu, you'll notice that all of the menu items are aligned left within a container in a single column. But what I want is for them to spread out evenly in a single row, and then to collapse into a hamburger menu at tablet and mobile size.

I know that

<ul>
is by default a block element, so I tried giving the
<ul>
with the id
"menu-navigation-1"
and the class of
"menu"
a style of

display:inline-block;


But nothing's happening.

I also tried assigning

display:inline-block;


to the div that encompasses the ul, which has a class of
"menu-navigation-container"
, but that didn't work either. Once I'm able to distribute the menu items evenly in a single row, I'll be able to create the hamburger menu. This is a perfect example of how we want the menu to behave.

Answer

Close! The list item (li) elements need to have display: inline-block;, not the list itself (ul).

This will work:

.menu-item {
  display: inline-block;
  margin-right: 10px; /* add a gap between items */
}