0

I'm making responsive horizontal menu that fades in background while scrolling down (using jQuery to implement that).

So I was trying to center my menu and I've failed, I've used width: 50%; in ul element in css but it doesn't centering the menu.

.container {
  width: 100%;
  height: 2000px;
  position: relative;
  font-family: 'Trebuchet Ms';
}

.bg {
  background: #000;
  width: 100%;
  height: 100px;
  opacity: 0;
}

.show {
  opacity: 0.4;
}

.transition {    
  -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

ul {
  height: 200px;
  margin: -70px 0 0;
  width: 50%;
}

li {
  direction: rtl;
  float: right; 
  list-style: none;
  padding-right: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #000;
}

a {
  text-align: center;
  font-size: 50px;
  color: #bdbdbd;
  font-weight: bold;
  text-decoration: none;
  letter-spacing: 5px;
  text-shadow: 1px 1px 1px #949494;

  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: block;
}

a:hover {
  color: #a6a6a6;
  text-shadow: 1px 1px 1px #C9C9C9;
}

.down {
  top: 150px;
}

.up {
  top: 1800px;
}

HTML:

<div id="top" class="container">

            <div class="fixed">

              <div class="bg transition"></div>

              <ul>
                <li>אודות</li>
                <li>למה אנחנו?</li>
                <li>What To Eat</li>
                <li>צור קשר</li>
                <li>Get App</li>
              </ul>

            </div>

            <a href="#bottom" class="scroll down">SCROLL DOWN</a>
            <a href="#top" id="bottom" class="scroll up">SCROLL UP</a>

          </div>

JSFiddle

How can I center my menu in a responsive way?

Yotam Dahan
  • 689
  • 1
  • 9
  • 33
  • 1
    Possible duplicate of [How do I center align horizontal
      menu?](https://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu)
     – Yannick Huber Sep 27 '17 at 13:15

4 Answers4

1

There is not yet any specific styling for centering elements. Try

margin: 0 auto;

H--
  • 95
  • 3
  • 14
  • I have already tried this, but it doesn't work. Some thing prevent the auto margin work properly – Yotam Dahan Sep 27 '17 at 13:17
  • 1
    It's working for me in your JS Fiddle, so I'm not sure what part isn't the way you're trying to get it. I put the margin auto on the ul element. Because the width is at 50%, some of of your li elements may drop down to the line below, but you can fix this by increasing the width of your ul. Let me know if I'm missing something. – H-- Sep 27 '17 at 13:26
1

Try using flex on ul with justify-content:center

From

ul {
  height: 200px;
  margin: -70px 0 0;
  width: 50%;
}

To

ul {
  height: 200px;
  display:flex;
  justify-content: center;
}

https://jsfiddle.net/mz61tam2/3/

Frederick Rosales
  • 189
  • 1
  • 4
0

I generally use Flexbox to center items. Make the containing div display: flex and then you can justify and align the content to the center. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

smthngfrnthng
  • 83
  • 5
0

Try this: text-align:center; in parent, and margin:0 auto; for UL menu.

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right:0;
  width: 100%;
  z-index: 1;
text-align:center;
}

ul {
  height: 200px;
  margin: -70px auto 0 auto;
  width: 50%;
}
CoursesWeb
  • 4,179
  • 3
  • 21
  • 27