CODEWITHSUNDEEP
htmlcss
hasni
hasni

Reputation: 1

How to center this buttons on the topbar on mobile view

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.

Upvotes: 0

Views: 54

Answers (1)

Mat Sz
Mat Sz

Reputation: 2552

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>

Upvotes: 2

Related Questions