skip to Main Content

I am trying to place a hamburger menu on the right of my page.

desired outcome

I just managed to put it on the same line as the header but there is no desired gap between the elements.

what the below code produces, as in, what I have

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

what float:right; produces

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


  1. You can use flexbox on #title_and_menu, with justify-content: space-between; for the left/right distribution and align-items: center; for the vertical centering of both:

    #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-bottom: 25px;
      padding-left: 25px;
      padding-right: 25px;
    }
    
    #title_and_menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    <div id="title_and_menu">
      <div id="myHeader">
        <h1>9.</h1>
      </div>
      <div id="drop_menu">
        <div class="hamburger_menu"></div>
        <div class="hamburger_menu"></div>
        <div class="hamburger_menu"></div>
      </div>
    </div>
    <img src="home_image.jpg" alt="home image">
    Login or Signup to reply.
  2. 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.

    #title_and_menu {
      position: relative;
    }
    
    #myHeader {
      display: inline-block;
      background-color: white;
      color: black;
      text-align: left;
      padding: 25px;
    }
    
    #drop_menu {
      position: absolute;
      top: 50%;
      right: 25px;
      transform: translateY(-50%);
      cursor: pointer;
    }
    
    #hamburger_menu {
      width: 35px;
      height: 3px;
      background-color: black;
      margin: 6px 0;
    }
    
    img {
      width: 100%;
      height: auto;
      max-width: 100%;
      display: inline-block;
    }
    
    #myHeader:hover {
      background-color: black;
      color: white;
    }
    
    body {
      padding: 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">
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search