Nano, I found the menu super cute.
First, to center your items when viewed on the desktop, you need to split the space and fill it. Note that you have 4 items, so this division of space is 25% for each, when you enter another item will need to decrease this size to fit all, for example, with 5 items you will need to change the CSS to be 20% (because 100% / 5 = 20%) instead of 25%.
Then in your CSS, add ul.bar-secondary li {float: left; width:25%; }
But in doing so, your link does not fill the entire space, put it to get 100% of the li, adding width:100% to your ul.bar-secondary li a
ul.bar-secondary li a {
width:100%;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
text-transform: uppercase;
font-weight: 300;
}
Except when doing these styles above the button was unconfigured.
I made a mistake with it! Important for it not to lose the right size (I did not see another way keeping the same class structure):
.bar-secondary-icon, .bar-secondary-icon a { width:50px !important; }
.bar-secondary-icon a { padding-left:0px !important; text-align: center !important; }
Below is an example executable of your code. When running it will appear in the size of mobile, click on the "All page" link to see how it appears in Desktop.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body { margin:0; padding:0;}
ul.bar-secondary {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #b5121b;
}
ul.bar-secondary li {float: left; width:25%; }
.bar-secondary-icon, .bar-secondary-icon a { width:50px !important; }
.bar-secondary-icon a { padding-left:0px !important; text-align: center !important; }
ul.bar-secondary li a {
width:100%;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 16px 0px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
text-transform: uppercase;
font-weight: 300;
}
ul.bar-secondary li a:hover {background-color: #970008;}
ul.bar-secondary li.bar-secondary-icon {display: none;}
@media screen and (max-width:680px)
{
ul.bar-secondary li a {
text-align: left;
padding: 16px 14px;
}
ul.bar-secondary li:not(:first-child) {display: none;}
ul.bar-secondary li.bar-secondary-icon {
float: right;
padding-bottom: -5px;
display: inline-block;
}
ul.bar-secondary li.bar-secondary-icon a {
padding-bottom: 17px;
}
ul.bar-secondary.bar-secondary-responsive {position: relative;}
ul.bar-secondary.bar-secondary-responsive li.bar-secondary-icon {
position: absolute;
right: 0;
top: 0;
}
ul.bar-secondary.bar-secondary-responsive li {
float: none;
display: inline;
}
ul.bar-secondary.bar-secondary-responsive li a {
display: block;
text-align: left;
}
}
</style>
<script>
function menu() {
var x = document.getElementById("bar-secondary");
if (x.className === "bar-secondary") {
x.className += " bar-secondary-responsive";
} else {
x.className = "bar-secondary";
}
}
</script>
</head>
<body>
<ul class="bar-secondary" id="bar-secondary">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="bar-secondary-icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="menu()">☰</a>
</li>
</ul>
</body>
</html>
If this answer helped resolve your issue, check how it is accepted and click the triangle up to give me reputation points. Valew, thank you. Anything we are talking about in the comments.
Edited:
I noticed that the item in the mobile was getting crooked and in the desktop version the padding was surpassing the area of the other link. I have now set padding from the desktop version to 16px 0px and padding from the mobile version to 16px 14px. (See executable code by clicking the Run button and then "All Page".)
