CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lo Siu Fung
Lo Siu Fung

Reputation: 137

how to centre this menu in mobile latout with Responsive design

Now the menu in mobile layout is at the left, and I want to put it at centre? Ii must be horizontal in my design. Could someone tell me how to do that?

$('#nav-toggle').click(function() {
  $('nav').toggleClass("active");
  $("#nav-toggle").toggleClass("menu-selected");
});
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  font-family: sans-serif;
  font-size: 100%;
}
#top-bar {
  position: relative;
  max-width: 1000px;
  height: 85px;
  background-color: #22bbff;
  margin-left: auto;
  margin-right: auto;
}
nav {
  position: relative;
}
#nav-toggle {
  display: none;
}
ul {
  list-style-type: none;
}
li {
  float: left;
}
a {
  text-align: center;
  text-decoration: none;
  display: block;
  color: #fff;
  background-color: #294C52;
  border: 1px solid #fff;
  width: 150px;
  padding-top: 15px;
  padding-bottom: 15px;
  position: relative;
}
a:hover {
  background-color: #1BBC9B;
}
/*Desktop*/

@media screen and (min-width: 767px) {
  #nav-toggle {
    float: right;
    display: block;
    width: 85px;
    height: 85px;
    background-image: url(../menu.jpg);
  }
  #nav-toggle.menu-selected {
    background-image: url(../menu_hover.jpg);
  }
  nav {
    float: right;
  }
  .active ul {
    display: block;
  }
  ul {
    display: none;
    top: 85px;
    width: 150px;
    position: relative;
    right: -85px;
  }
  li {}
}
<div id="top-bar">
  <a href="#" id="nav-toggle"></a>
  <nav>
    <ul>
      <li><a href="services.html" title="專業服務">專業服務</a>
      </li>
      <li><a href="join.html" title="如何參與">如何參與</a>
      </li>
      <li><a href="contact.html" title="想了解更多">聯絡我們</a>
      </li>
    </ul>
  </nav>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Upvotes: 3

Views: 58

Answers (2)

azium
azium

Reputation: 20614

Use text-align: center and display: inline-block instead of float: left

codepen

ul {
  list-style-type: none;
  text-align: center; 
}  
li {
  display: inline-block;
}

EDIT: bonus for vertical center as well

nav {
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

Upvotes: 1

Nitekurs
Nitekurs

Reputation: 451

Try this

nav {
  position: relative;
  display:table;
  margin:auto;
  text-align: center;
}
li {
  display:inline-block;
}

https://jsfiddle.net/zbnwwh96/1/

Upvotes: 1

Related Questions