How to center "position: relative"-navigation bar? - html

Question

How can I center a navigation bar with the position property set to relative? It's for this website.
I've found several solutions for doing that, but that requires me to change the position of the navigation bar to absolute. I can't do that, since that ruins the entiry css style for the navigation bar!
body header .bottom-header {
border-radius: 15px 0 0 0;
width: 100%;
height: 125px;
background: linear-gradient(to right, #381107, #993013, #FF5221);
text-align: center;
}
body header .bottom-header ul {
position: relative;
top: 32%;
list-style-type: none;
margin: 0;
padding: 0;
}
body header .bottom-header ul li a {
transition: all .4s ease;
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
body header .bottom-header .button {
transition: all .4s ease;
display: block;
float: left;
top: 40px;
margin: auto;
min-width: 13%;
max-width: 13%;
padding-top: 8px;
padding-bottom: 8px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 12px;
margin-left: 0.4%;
margin-right: 0.4%;
cursor: pointer;
}
body header .bottom-header .button:hover {
border: 2px solid rgba(255, 255, 255, 0.7);
}
body header .bottom-header .button:hover a {
color: rgba(255, 255, 255, 0.7);
}
<center>
<div class="bottom-header">
<ul>
<li class="button" id="top" style="margin-left: 1%;" onclick="window.location='hem.html';">Hem</li>
<li class="button" id="top" onclick="window.location='om.html';">Om Mango</li>
<li class="button" id="top" onclick="window.location='filosofi.html';">Filosofi</li>
<li class="button" id="top" onclick="window.location='personal.html';">Personal</li>
<li class="button" id="bottom-start" onclick="window.location='kontakt.html';">Kontakt</li>
<li class="button" id="bottom" onclick="window.location='hitta-hit.html';">Hitta hit</li>
<li class="button" id="bottom" onclick="window.location='bostaderna.html';">Verksamheterna</li>
</ul>
</div>
</center>
What I've done to center it (which really isn't a good solution) is, I change the margin on each side of the navigation bar depending on the total width of the page. Like you can see if you take a look at the css of the page i linked before. Thank you!

Answer 1

Make yout ul a relatively positioned inline-blockand use margin: 0 auto; on it to center it. And erase all width settings from the lielements / buttons, so they can have the width necessary for their text contents:
.bottom-header {
border-radius: 15px 0 0 0;
width: 100%;
background: linear-gradient(to right, #381107, #993013, #FF5221);
text-align: center;
}
.bottom-header ul {
position: relative;
display: inline-block;
margin: 0 auto;
list-style-type: none;
padding: 0;
}
.bottom-header ul li a {
transition: all .4s ease;
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.bottom-header .button {
transition: all .4s ease;
display: block;
top: 40px;
padding-top: 8px;
padding-bottom: 8px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 12px;
cursor: pointer;
}
.bottom-header .button:hover {
border: 2px solid rgba(255, 255, 255, 0.7);
}
.bottom-header .button:hover a {
color: rgba(255, 255, 255, 0.7);
}
<div class="bottom-header">
<ul>
<li class="button" id="top" onclick="window.location='hem.html';">Hem</li>
<li class="button" id="top" onclick="window.location='om.html';">Om Mango</li>
<li class="button" id="top" onclick="window.location='filosofi.html';">Filosofi</li>
<li class="button" id="top" onclick="window.location='personal.html';">Personal</li>
<li class="button" id="bottom-start" onclick="window.location='kontakt.html';">Kontakt</li>
<li class="button" id="bottom" onclick="window.location='hitta-hit.html';">Hitta hit</li>
<li class="button" id="bottom" onclick="window.location='bostaderna.html';">Verksamheterna</li>
</ul>
</div>
In case you want the buttons aligned horzontally (i.e. other than in the code you posted), apple diplay: inline-block to the lielements, and maybe a fixed min-width setting:
.bottom-header {
border-radius: 15px 0 0 0;
width: 100%;
background: linear-gradient(to right, #381107, #993013, #FF5221);
text-align: center;
}
.bottom-header ul {
position: relative;
display: inline-block;
margin: 0 auto;
list-style-type: none;
padding: 0;
}
.bottom-header ul li a {
transition: all .4s ease;
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.bottom-header .button {
transition: all .4s ease;
display: inline-block;
min-width: 90px;
top: 40px;
padding-top: 8px;
padding-bottom: 8px;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 12px;
cursor: pointer;
}
.bottom-header .button:hover {
border: 2px solid rgba(255, 255, 255, 0.7);
}
.bottom-header .button:hover a {
color: rgba(255, 255, 255, 0.7);
}
<div class="bottom-header">
<ul>
<li class="button" id="top" onclick="window.location='hem.html';">Hem</li>
<li class="button" id="top" onclick="window.location='om.html';">Om Mango</li>
<li class="button" id="top" onclick="window.location='filosofi.html';">Filosofi</li>
<li class="button" id="top" onclick="window.location='personal.html';">Personal</li>
<li class="button" id="bottom-start" onclick="window.location='kontakt.html';">Kontakt</li>
<li class="button" id="bottom" onclick="window.location='hitta-hit.html';">Hitta hit</li>
<li class="button" id="bottom" onclick="window.location='bostaderna.html';">Verksamheterna</li>
</ul>
</div>