How to center a fixed menu (div)?

Asked

Viewed 48 times

1

The menu should be fixed and so I used the position: fixed;. When I use the margin: auto, that is to centralize a div, doesn’t work...

#menubarra {
  position: fixed;
  height: 50px;
  width: 80%;
  background-color: #cccccc;
  border-radius: 5px;
}
<div id="menubarra"></div>

1 answer

5

Fixed shall relate to viewport, then you have to declare a left and right for the element

#menubarra {
  position: fixed;
  height: 50px;
  width: 80%;
  background-color: #cccccc;
  border-radius: 5px;
  
  margin: auto;
  left: 0;
  right: 0;
}
<div id="menubarra"></div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.