Solution 1 :

You can use display: flex; and justify-content: center; to achieve this effect.

Example:

nav {
    display: flex;
    justify-content: center;
}

a {
    margin: 0 5px;
}
<nav>
  <a href="#">item</a>
  <a href="#">item</a>
  <a href="#">item</a>
</nav>

If you want to apply this only on mobile devices you can use the @media queries. (Try resizing your browser window down to notice the change.)

@media screen and (max-width: 500px) {
    nav {
        display: flex;
        justify-content: center;
    }

    a {
        margin: 0 5px;
    }
}
<nav>
  <a href="#">item</a>
  <a href="#">item</a>
  <a href="#">item</a>
</nav>

Problem :

I need your help to make the top navigation bar responsive like this:

Screenshot showing the desired result.

I would like to make these buttons centered on mobile.

Comments

Comment posted by Martin

Please show your code. Edit your question and show your HTML and CSS so far

By

Leave a Reply

Your email address will not be published. Required fields are marked *