如何将男人图标移动到右侧并删除顶部的空白

Question

I just downloaded an HTML and CSS template online and want to modify the code to adjust the hamburger menu icon to the right and have the menu slide from the right side but I had no idea about which part I should change I have attached a screenshot of the interface below for reference. Thanks!

/*menu*/
#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 50px;

  z-index: 1;

  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;

  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;

  background: #cdcdcd;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #ffffff;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;

  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}
/*----------------------------------menu----------------------------*/

.section {
    position: relative;
    height: 100vh;
}

.section .section-center {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#booking {
    font-family: 'Montserrat', sans-serif;
    background-image: url('../img/dog.jpeg');
    background-size: cover;
    background-position: center;
}

#booking::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: rgba(143, 215, 230, 0.6);
}

.booking-form {
    background-color: #fff;
    padding: 60px 20px;
    -webkit-box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.booking-form .form-group {
    position: relative;
    margin-bottom: 30px;
}

.booking-form .form-control {
    background-color: #ebecee;
    border-radius: 4px;
    border: none;
    height: 40px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #3e485c;
    font-size: 14x;
}

.booking-form .form-control::-webkit-input-placeholder {
    color: rgba(62, 72, 92, 0.3);
}

.booking-form .form-control:-ms-input-placeholder {
    color: rgba(62, 72, 92, 0.3);
}

.booking-form .form-control::placeholder {
    color: rgba(62, 72, 92, 0.3);
}

.booking-form input[type="date"].form-control:invalid {
    color: rgba(62, 72, 92, 0.3);
}

.booking-form select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.booking-form select.form-control+.select-arrow {
    position: absolute;
    right: 0px;
    bottom: 4px;
    width: 40px;
    line-height: 32px;
    height: 32px;
    text-align: center;
    pointer-events: none;
    color: rgba(62, 72, 92, 0.3);
    font-size: 14px;
}

.booking-form select.form-control+.select-arrow:after {
    content: '\279C';
    display: block;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.booking-form .form-label {
    display: inline-block;
    color: #3e485c;
    font-weight: 700;
    margin-bottom: 6px;
    margin-left: 7px;
}

.booking-form .submit-btn {
    display: inline-block;
    color: #fff;
    background-color: #1e62d8;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 4px;
    border: none;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.booking-form .submit-btn:hover,
.booking-form .submit-btn:focus {
    opacity: 0.9;
}

.booking-cta {
    margin-top: 80px;
    margin-bottom: 30px;
}

.booking-cta h1 {
    font-size: 52px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
}

.booking-cta p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
}

footer {
        position: relative;
        height: 0px;
        width: 100%;
        background-color: #333333;
}

p.copyright {
    position: absolute;
    width: 100%;
    color: #fff;
    line-height: 40px;
    font-size: 0.7em;
    text-align: center;
    bottom:0;
    }

HTML Code:

<nav role="navigation">
  <div id="menuToggle">
    <!--
    A fake / hidden checkbox is used as click reciever,
    so you can use the :checked selector on it.
    -->
    <input type="checkbox" />

    <!--
    Some spans to act as a hamburger.

    They are acting like a real hamburger,
    not that McDonalds stuff.
    -->
    <span></span>
    <span></span>
    <span></span>

    <ul id="menu">
      <a href="#"><li>Home</li></a>
      <a href="#"><li>About</li></a>
      <a href="#"><li>Info</li></a>
      <a href="#"><li>Contact</li></a>
    </ul>
  </div>
</nav>



<div id="booking" class="section">
        <div class="section-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-7 col-md-push-5">
                        <div class="booking-cta">
                            <h1>Bring Your Pet to Work</h1>
                            <p>Caring and Loving Pet service
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4 col-md-pull-7">
                        <div class="booking-form">
                            <form>
                                <div class="form-group">
                                    <span class="form-label">Where do you work? </span>
                                    <input class="form-control" type="text" placeholder="Enter an address or zipcode">
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <span class="form-label">Drop off</span>
                                            <input class="form-control" type="date" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <span class="form-label">Pick up</span>
                                            <input class="form-control" type="date" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">

                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <span class="form-label">Pet?</span>
                                            <select class="form-control">
                                                <option>Cat</option>
                                                <option>Dog</option>
                                                <option>Others</option>
                                            </select>
                                            <span class="select-arrow"></span>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <span class="form-label">Service</span>
                                            <select class="form-control">
                                                <option>Day Care</option>
                                                <option>Boarding</option>
                                                <option>Sitting</option>
                                            </select>
                                            <span class="select-arrow"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-btn">
                                    <button class="submit-btn">Check availability</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

//about the white space try set the margin-top of the body at 0;
//about the the hamberger icon try this:
nav {
display:flex;
flex-direction: flex-end; }

Answer 2

To move the hamburger to the right side, make sure your #menuToggle position is fixed or absolute , then remove left: 50px; and add right: 50px; and if you want more top space you can increase top attribute value, ex: top: 100px; or top: 0; if you don't want any top space.

I've commented the CSS bellow, in case you were wondering what i've changed.

Here is the CSS code you should use: ( I've tested it and it's working for me )

      #menuToggle {
         display: block;
         position: fixed;
         top: 50px;  /** NOTE: decrease The pixels if want less space */
         right: 50px;/** NOTE: Change This line */

         z-index: 1;

         -webkit-user-select: none;
         user-select: none;
      }

      #menuToggle a {
         text-decoration: none;
         color: #232323;

         transition: color 0.3s ease;
      }

      #menuToggle a:hover {
         color: tomato;
      }


      #menuToggle input {
         display: block;
         width: 40px;
         height: 32px;
         position: absolute;
         top: -7px;
         left: -5px;

         cursor: pointer;

         opacity: 0;
         /* hide this */
         z-index: 2;
         /* and place it over the hamburger */

         -webkit-touch-callout: none;
      }

      /*
 * Just a quick hamburger
 */
      #menuToggle span {
         display: block;
         width: 33px;
         height: 4px;
         margin-bottom: 5px;
         position: relative;

         background: #cdcdcd;
         border-radius: 3px;

         z-index: 1;

         transform-origin: 4px 0px;

         transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
      }

      #menuToggle span:first-child {
         transform-origin: 0% 0%;
      }

      #menuToggle span:nth-last-child(2) {
         transform-origin: 0% 100%;
      }

      /* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
      #menuToggle input:checked~span {
         opacity: 1;
         transform: rotate(45deg) translate(-2px, -1px);
         background: #ffffff;
      }

      /*
 * But let's hide the middle one.
 */
      #menuToggle input:checked~span:nth-last-child(3) {
         opacity: 0;
         transform: rotate(0deg) scale(0.2, 0.2);
      }

      /*
 * Ohyeah and the last one should go the other direction
 */
      #menuToggle input:checked~span:nth-last-child(2) {
         transform: rotate(-45deg) translate(0, -1px);
      }

      /*
 * Make this absolute positioned
 * at the top left of the screen
 */
      #menu {
         position: absolute;
         width: 300px;
         margin: -100px 0 0;/** NOTE: Change this line */
         padding: 50px;
         padding-top: 125px;
         right: -50px; /*NOTE: Add this line */

         background: #ededed;
         list-style-type: none;
         -webkit-font-smoothing: antialiased;
         /* to stop flickering of text in safari */

         transform-origin: 0% 0%;
         transform: translateX(100%);/** NOTE: Change this line */

         transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
      }

      #menu li {
         padding: 10px 0;
         font-size: 22px;
      }

      /*
 * And let's slide it in from the left
 */
      #menuToggle input:checked~ul {
         transform: none;
      }

      /*----------------------------------menu----------------------------*/