I am trying to place a hamburger menu on the right of my page.
I just managed to put it on the same line as the header but there is no desired gap between the elements.
What I did:
margin-left:auto;
margin-right:0px;
does not do anything. If I float the element right it jumps to the next line whereas I want the two elements on the same line
#drop_menu{
display:inline-block;
float: right;
}
Here is the full code:
I also tried:
#title_and_menu{
position:relative;
}
#drop_menu{
display:inline-block;
right: 200px;
/*float: right;*/
}
#drop_menu {
display: inline-block;
/*float: right;*/
}
#hamburger_menu {
width: 35px;
height: 1px;
background-color: black;
margin: 6px 0;
}
img {
width: 100%;
height: auto;
max-width: 100%;
display: inline-block;
}
#myHeader {
display: inline-block;
background-color: white;
color: black;
text-align: left;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 25px;
padding-right: 25px;
}
#myHeader:hover {
background-color: black;
color: white;
}
body {
padding-top: 25px;
padding-botttom: 25px;
padding-left: 25px;
padding-right: 25px;
}
<div id="title_and_menu">
<div id="myHeader">
<h1>9.</h1>
</div>
<div id="drop_menu">
<div id="hamburger_menu"></div>
<div id="hamburger_menu"></div>
<div id="hamburger_menu"></div>
</div>
</div>
<img src="home_image.jpg" alt="home image">
Adding the following code:
#title_and_menu {
display: flex;
justify-content: space-between;
align-items: center;
}
Makes the top bar of the hamburger menu twice as thick as the two bottom ones:
temporal solution
2
Answers
You can use flexbox on
#title_and_menu
, withjustify-content: space-between;
for the left/right distribution andalign-items: center;
for the vertical centering of both:Above solution might actually solve the issue, but if you like to try positioning, you may use
position: absolute;
to the hamburger menu, you can place it on the right side of the page while keeping the header aligned to the left.