Centralize navbar items when viewed on desktop

Question

Centralize navbar items when viewed on desktop

Asked 7 years, 5 months ago

Viewed 194 times

1

I’m using the codes below to create a navbar, but I would like, when viewed on desktop, the items highlighted in green to be centralized, but when viewed on mobile, remain exactly as in gif.

Code CSS

ul.bar-secondary {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #b5121b;
}

ul.bar-secondary li {float: left;}

ul.bar-secondary li a {
  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;
}

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: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;
  }
}

@media screen and (max-width:680px) {
  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;
  }
}

Code HTML

<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>

Code Javascript

function menu() {
    var x = document.getElementById("bar-secondary");
    if (x.className === "bar-secondary") {
        x.className += " bar-secondary-responsive";
    } else {
        x.className = "bar-secondary";
    }
}

2 answers

1

That would be just right for you?

ul.bar-secondary {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #b5121b;
  text-align:center;
}

ul.bar-secondary li {display:inline;}

ul.bar-secondary li a {
  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;
}

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{text-align:left;}
  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 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>

Browser other questions tagged html css html5 css3

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

by Antonio Alexandre • **3,281** points · Answer 1 · 2017-01-26T00:32:36+00:00

Nano, I found the menu super cute.

First, to center your items when viewed on desktop, you need to split the space and fill it. Note that you have 4 items, so this space division is 25% each, when you enter another item you will need to decrease this size to fit all, for example, with 5 items you will need to change the CSS to 20% width (because 100% / 5 = 20%) instead of 25%. So in your CSS, add ul.bar-secondary li {float: left; width:25%; }

Only when doing this, your link does not fill the whole space, put it to pick 100% of the li, adding width:100% in his 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;
}

Only by making these styles up the button became disfigured. Marretei him with ! Mportant so he doesn’t lose the right size (I didn’t visualize otherwise 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 executable example of your code. When running it will appear in mobile size, click on the "Full 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 has helped solve your problem mark as accepted and click the triangle up to give me reputation points. Valew, thanks. Anything we say in the comments.

Edited: I noticed that the item on the mobile was getting crooked and in the desktop version the padding was exceeding the area of the other link. I have now got it right by padding the desktop version to 16px 0px and padding the mobile version to 16px 14px. (See executable code by clicking the Run button and then "Whole page").