CODEWITHSUNDEEP
htmlcssnavigation
rougeOne
rougeOne

Reputation: 37

How do I center bottom navigation

I need to center the bottom navigation menu in mobile. I've provided an image of what it currently looks like. Can someone help me in getting my code to where it needs to be?

enter image description here

<ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">Current Projects</a></li>
     <li><a href="#">What We Do</a></li>
     <li><a href="#">Call</a></li>
</ul>

@media (max-width: 767px){
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #219ae2;
        position: fixed;
        bottom: 0;
        width: 100%;
        text-size: 10px !important;
    }

    li {
        float: left;
    }

    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 8px 10px;
        text-decoration: none;
    }

    li a:hover:not(.active) {
        background-color: #111;
    }

    .active {
        background-color: #4CAF50;
    }
}

Upvotes: 0

Views: 61

Answers (1)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

You could easily replace li {float: left;} with li {display: inline-block} then center the li's by adding text-align: center to ul, check the below snippet:

@media (max-width: 767px){
ul {
    text-align: center;
    list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #219ae2;
     position: fixed;
     bottom: 0;
     width: 100%;
     text-size: 10px !important;
}

li {
  display: inline-block;
}

li a {
   display: block;
   color: white;
   text-align: center;
   padding: 8px 10px;
   text-decoration: none;
}

li a:hover:not(.active) {
 background-color: #111;
}

.active {
 background-color: #4CAF50;
}
}
<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Current Projects</a></li>
   <li><a href="#">What We Do</a></li>
   <li><a href="#">Call</a></li>
</ul>

Upvotes: 1

Related Questions