Nikhil Raj A February 2016

how can i make this menu display, like as per in the image using media query?

how can i make this menu display, like as per in the image using media query image

This is what i done now codepen link

<div class="container">
  <div class="row">
            <div class="col-md-12">
                <div class="menu-tags">
                  <ul>
                    <li><a href="#">ALL</a></li>
                    <li><a href="#">STARTER</a></li>
                    <li><a href="#">BREAKFAST</a></li>
                    <li><a href="#">LUNCH</a></li>
                    <li><a href="#">DINNER</a></li>
                    <li><a href="#">DESERTS</a></li>
                  </ul>
                </div>
         </div>
  </div>
</div>

Answers


Krish February 2016

make li as display:inline-block; and add text-align:center to ul

.menu-tags ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: list-item;  
    text-align: center;
}
.menu-tags li {
    display: inline-block;

}
.menu-tags a:link{
    text-decoration: none;
}
.menu-tags ul li a {
    display: inline-block;    
    padding: 14px 16px;
    text-decoration: none; color: black;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;   
    border-bottom: 3px solid transparent;
    font-family: "Josefin sans",sans-serif;
    text-transform: uppercase;
    margin: 0px 20px;
    padding-bottom: 2px;
    padding-top: 5px;
}
.menu-tags ul li a:hover{
    border-bottom: 3px solid #F1CD8F !important;
    text-decoration: none;
}
.menu-tags{
    padding-left: 10%;
}

Demo: http://codepen.io/anon/pen/BjGBLE


Santhosh B February 2016

View the snippet in full screen:

Set width for <li> elements and remove float for last <li>.

.menu-tags li {
        float: left;
        width: 20%;  
        text-align: center;
 }
 .menu-tags ul > li:last-child {
        float: none;
        margin: auto;
  }

Try the below code:

.menu-tags ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: list-item;  
}
.menu-tags li {
    float: left;
    width: 20%;
    text-align: center;
    
}
.menu-tags ul > li:last-child {
    float: none;
    margin: auto;
}

.menu-tags a:link{
    text-decoration: none;
}
.menu-tags ul li a {
    display: inline-block;    
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; color: black;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;   
    border-bottom: 3px solid transparent;
    font-family: "Josefin sans",sans-serif;
    text-transform: uppercase;
    margin: 0px 20px;
    padding-bottom: 2px;
    padding-top: 5px;
}
.menu-tags ul li a:hover{
    border-bottom: 3px solid #F1CD8F !important;
    text-decoration: none;
}
.menu-tags{
    padding-left: 10%;
}
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="menu-tags">
        <ul>
          <li><a href="#">ALL</a></li>
          <li><a href="#">STARTER</a></li>
          <li><a href="#">BREAKFAST</a></li>
          <li><a href="#">LUNCH</a></li>
          <li><a href="#"& 


Nikhil Raj A February 2016

the correct css

.menu-tags ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: list-item;  
    }
    .menu-tags li {
       display: inline-block;
    }
    .menu-tags a:link{
        text-decoration: none;
    }
    .menu-tags ul li a {
        display: inline-block;    
        text-align: center;
        padding: 14px 16px;
        text-decoration: none; color: black;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;   
        border-bottom: 3px solid transparent;
        font-family: "Josefin sans",sans-serif;
        text-transform: uppercase;
        margin: 0px 5px;
        padding-bottom: 2px;
        padding-top: 5px;
    }
    .menu-tags ul li a:hover{
        border-bottom: 3px solid #F1CD8F !important;
        text-decoration: none;
    }
    .menu-tags{
        padding-left: 10%;
        text-align: center;
    }

Post Status

Asked in February 2016
Viewed 3,138 times
Voted 11
Answered 3 times

Search




Leave an answer