0

I have seen many questions on this topic but I can't seem to figure out what I am doing wrong still. I want to make the menu centered inside of the "menu" div so that it will always be center no matter the screen size/browser.

Here is what I have for my HTML and CSS:

.site-navigation {
    display: block;
    font-family: 'Georgia';
    font-size: 18px;
    font-weight: bold;
 position:relative;
 margin-left:auto;
 margin-right: auto;
  
}

.site-navigation ul {
  background: #202020;
    list-style: none;
    margin: auto;
    padding-left: 0;
}

.site-navigation li {
    color: #d29500;
 background: #202020;
    display: block;
    float: left;
    margin: 0 2px 0 0;
    padding: 12px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}
  
.site-navigation li a {
  color: #d29500;
  text-decoration: none;
  display: block;
}

.site-navigation li:hover {
    @include transition(background, 0.2s);
    background: #000000;
    cursor: pointer;
}

.site-navigation ul li ul {
    background: #000000;
    visibility: hidden;
    float: left;
 min-width: 150px;
    position: absolute;
 transition: visibility 0.65s ease-in;
 margin-top:12px;
    left: 0;
    z-index: 999;
}

.site-navigation ul li:hover > ul,
.site-navigation ul li ul:hover {
   visibility: visible;
}

.site-navigation ul li ul li {
    clear: both;
    padding: 5px 0 5px 18px;
  width: 100%;
}

.site-navigation ul li ul li:hover {
    background: #000000;
} 
<div id= "menu">
<div class="site-navigation" >
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About Us</a>
      <ul class="dropdown">
        <li class="menu-item sub-menu"><a href="#">Location</a></li>
  <li class="menu-item sub-menu"><a href="#">Contact</a></li>
      </ul>
    </li>
 <li class="menu-item"><a href="#">Schedule</a></li>
  <li class="menu-item"><a href="#">Roster</a></li>
    <li class="menu-item"><a href="#">Alumni Corner</a></li>
    <li class="menu-item"><a href="#">Gallery</a></li>
    <li class="menu-item"><a href="#">Support</a></li>
  </ul>
</div>
</div>

Any help would be appreciated!

Kheese
  • 1

4 Answers4

1

Simply add

#menu
{
    display: flex;
}

and it should solve your problem (make sure this is supported on all browsers you need, though)

Jesse
  • 1,262
  • 1
  • 9
  • 19
1

If you want to center an element with margin: 0 auto, it needs to have a set width. You can make it responsive by using percentages.

Community
  • 1
  • 1
fiedlr
  • 106
  • 5
0

You can use flexbox as proposed by Jesse, but I would simply go with the good old display: inline-block; property. If you want to support IE10, you cannot use flexbox (see http://caniuse.com/#feat=flexbox)

  1. Remove background: #202020; and add text-align: center; to .menu
  2. Remove float: left; and change display: block to display: inline-block in .menu-item

The margin between the .menu-items is now larger because of the space character, which is induced by the inline-block property.

ssc-hrep3
  • 15,024
  • 7
  • 48
  • 87
0

Remove float:left rule from your .site-navigatioin li selector, and set display property of li to inline-block: http://prntscr.com/8rqehz Notice IE7 doesn't support inline-block property.

Artem
  • 86
  • 1
  • 5