How can I center the navigation bar, but have more navigation on the top right in fixed positions
Question
So I have some code here and I wanted to have my main navigation in the middle and then the account and cart tabs on the top right. I want it in a way where the tabs that say "buy,sell,trade... etc" are directly in the middle and not in the middle of the left side of the page and the account and cart containers.
CSS
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30p 10%;
text-align: center;
transition: all 0.4s ease 0s;}
.navigation {
list-style: none;
width: 10000px;
margin: 1%;}
.navigation li {
display: inline-block;
padding: 10px 20px;
float: center;}
.navigation li a {
transition: all 0.4s ease 0s}
.navigation li a:hover{
color:#75593e }
.home {
width: 65px;
height: 55px;
background: url("/images/ClosedBoxLogo.png");}
.home:hover {
background: url("/images/OpenBox.png") no-repeat;}
/* Cart and Account */
.rightside {
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;}
.rightside li {
padding: 10px 20px;}
And this is my HTML
<body>
<header>
<ul class="navigation">
<li><a href="#">Buy</a></li>
<li><a href="#">Sell</a></li>
<li><a href="index.html"><img class="home" src="images/CloseBox.png" alt="Close Box" onmouseover="this.src='images/OpenBox.png';" onmouseout="this.src='images/CloseBox.png';"/></a></li>
<li><a href="#">Sell</a></li>
<li><a href="#">Buy</a></li>
</ul>
<ul>
<div class="rightside">
<li><a href="#"> Account </a></li>
<li><a href="#"> Cart </a></li>
</div>
</ul>
</header>
</body>
2 answers
solution1
0 2020-06-29 07:28:23
One approach you could take is making the header position relative while the right side ul is position absolute. This takes the right list items out of the natural DOM flow so the main navigation is completely centered. By making the header relative, you can align the right list items however you want relative to the parent. Keep in mind that you will have to edit the design for mobile responsiveness as the right links will no longer adhere to flexbox styling while positiond absolute.
Edits I made to your code:
- Added 'position: relative;' to header and fixed your padding missing the "x" in "px"
- Removed the div with class "rightside" and moved the class to that parent ul
- Added 'position: absolute; right: 0; margin: auto 0;' to the class "rightside". Margin: 'auto 0;' vertically centers the li's to the parent
Working JsFiddle: https://jsfiddle.net/bzjxnw4h/
header { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; text-align: center; transition: all 0.4s ease 0s;}.navigation { list-style: none; width: 10000px; margin: 1%;}.navigation li { display: inline-block; padding: 10px 20px; float: center;}.navigation li a { transition: all 0.4s ease 0s;}.navigation li a:hover{ color:#75593e; }.home { width: 65px; height: 55px; background: url("/images/ClosedBoxLogo.png");}.home:hover { background: url("/images/OpenBox.png") no-repeat;} /* Cart and Account */.rightside { position: absolute; right: 0; margin: auto 0; display: flex; list-style: none; align-items: center; justify-content: space-between;}.rightside li { padding: 10px 20px;}
<body> <header> <ul class="navigation"> <li><a href="#">Buy</a></li> <li><a href="#">Sell</a></li> <li><a href="index.html"><img class="home" src="images/CloseBox.png" alt="Close Box" onmouseover="this.src='images/OpenBox.png';" onmouseout="this.src='images/CloseBox.png';"/></a></li> <li><a href="#">Trade</a></li> <li><a href="#">Middle Man</a></li> </ul> <ul class="rightside"> <li><a href="#"> Account </a></li> <li><a href="#"> Cart </a></li> </ul> </header> </body>
solution2
0 2020-06-29 19:26:35
Check this if it will work for you or you want some changes and also remove or change your onhover img if possible cause it will not look good: https://codepen.io/the-wrong-guy/pen/ZEQXRRx?editors=1100
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.