CODEWITHSUNDEEP
jqueryhtmlcss
Yotam Dahan
Yotam Dahan

Reputation: 699

Centering responsive menu

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?

Upvotes: 0

Views: 76

Answers (4)

CoursesWeb
CoursesWeb

Reputation: 4237

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%;
}

Upvotes: 0

Frederick Rosales
Frederick Rosales

Reputation: 189

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/

Upvotes: 1

smthngfrnthng
smthngfrnthng

Reputation: 93

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/

Upvotes: 0

H--
H--

Reputation: 95

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

margin: 0 auto;

Upvotes: 1

Related Questions