Menu
I'm trying to move the register button from the middle to the right (as see on the following photos) Without it affecting the 3 items in the middle.
So this is what I have:
This is what I'm trying to get:
Here is my code:
body {
background-color: #323642;
}
.menubar {
justify-content: center;
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
align-items: center;
height: 100%;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 22px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
#login_button {
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}<head lang="Eng">
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div class="menubar" id="hey">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
<button id="login_button">Register</button>
</div>
</body>I have tried adding margin-right:auto; though it just completly shifter the button to the right and didn't leve any space between it and the window. I have also tried adding justify-content: space-between; but it didn't give me what I wanted. if anyone could help that would be greatly appreciated!
556
you can put the position of the button absolute like this :
#login_button {
position: absolute;
right: 10px;
margin-top: 2px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
justify-content: flex-end;
}
https://jsfiddle.net/fh3cj02d/
121
You could use a flexbox inside a flexbox like this
body {
background-color: #323642;
}
.menubar {
display: flex;
flex-direction: row;
background-color: #272a33;
margin-top: -10px;
margin-left: -10px;
margin-right: -10px;
height: 100%;
}
.left {
flex: 1;
}
.middle {
display: flex;
}
.right {
flex: 1;
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.menuitem {
padding: 11px;
padding-top: 17px;
padding-left: 29px;
font-size: 22px;
font-family: "Ostrich Sans";
color: #ee5f95;
text-decoration: none;
}
#login_button {
margin-top: 2px;
margin-right: 10px;
border-radius: 5px;
background-color: #ee5f95;
width: 100px;
height: 34px;
text-align: center;
border: none;
font-family: "Ostrich Sans";
font-size: 22px;
color: white;
line-height: 33px;
transition: 0.7s;
}
#login_button:hover {
width: 110px;
background-color: #ae466d;
transition: 0.7s;
}<html>
<head lang="Eng">
<meta charset="UTF-8">
<title>test </title>
</head>
<body>
<div class="menubar" id="hey">
<div class="left"></div>
<div class="middle">
<a class="menuitem" id="firstmenuitem" href="./buy_sell.html">Buy & Sell</a>
<a class="menuitem" href="./exchange.html">Exchange</a>
<a class="menuitem" href="./events.html">Events</a>
<div id="delimeter"></div>
</div>
<div class="right">
<button id="login_button">Register</button>
</div>
</div>
</body>
</html>I like this because it's purely flexbox, no absolute positioning or margin auto. Also the .middle div is naturally centered this way.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
