how to move menu bar top of the right side?-CodePudding

I am making a simple website project. In which step 1 is needed to create the navbar. But as soon as I made the navbar icon. I am not able to do it in the top right.

Which is the 3 lines option of the navbar in the right. How do I make it on the top of the right side?

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap');

body {
  background-color: tomato;
}
/* horizontal threline nav bar */
.navbar {
  width: 60px;
  margin-right: 20px;
  border-radius: 15px;
  float: right;
  border: 4px solid #00bfb6;
  padding: 8px 10px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.navbar div {
  height: 5px !important;
  background: #fff;
  margin: 7px 0px 7px 0px;
  border-radius: 50px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.two {
  width: 35px;
}
.three {
  width: 50px;
}
.navbar:hover div {
  width: 60px;
}

 
  <div >
    <h1 style="font-family:'Kanit', sans-serif; border-width:3px; cursor: pointer; border-style:solid; border-color:#fff; padding: 20px; width: 205px;margin: 20px;">
      KB
      <span style="font-family:'Kanit', sans-serif; color: white;"> OFFICIALS </span>
    </h1>
    <div >
      <a href="" target="_blank" >
        <div ></div>
        <div ></div>
        <div ></div>
      </a>
    </div>
  </div>

CodePudding user response：

Use absolute positioning instead of float:

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap');

body {
  background-color: tomato;
}
.logo{ position: relative; }
/* horizontal threline nav bar */
.navbar {
  width: 60px;
  margin-right: 20px;
  border-radius: 15px;
  position: absolute;
  top: 5px; /* fine tune */
  right: 5px; /* fine tune */
  border: 4px solid #00bfb6;
  padding: 8px 10px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.navbar div {
  height: 5px !important;
  background: #fff;
  margin: 7px 0px 7px 0px;
  border-radius: 50px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.two {
  width: 35px;
}
.three {
  width: 50px;
}
.navbar:hover div {
  width: 60px;
}

 
  <div >
    <h1 style="font-family:'Kanit', sans-serif; border-width:3px; cursor: pointer; border-style:solid; border-color:#fff; padding: 20px; width: 205px;margin: 20px;">
      KB
      <span style="font-family:'Kanit', sans-serif; color: white;"> OFFICIALS </span>
    </h1>
    <div >
      <a href="" target="_blank" >
        <div ></div>
        <div ></div>
        <div ></div>
      </a>
    </div>
  </div>

CodePudding user response：

Add this in css

.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

CodePudding user response：

Let's make your HTML a little simpler and move all styles to CSS. Also let's use "display: float;" in order to put both KB OFFICIALS and navbar into the same horizontal space. In this case you do not need "float: right;"

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap');

body {
  background-color: tomato;
}
h1 {
    font-family:'Kanit', sans-serif;
    border-width:3px;
    cursor: pointer; 
    border-style:solid; 
    border-color:#fff; 
    padding: 20px; 
    width: 205px;
    margin: 20px;
}
.logo {
    display: flex;
    justify-content: space-between;
}
/* horizontal threline nav bar */
.navbar {
  width: 60px;
  margin: 20px;
  border-radius: 15px;
  border: 4px solid #00bfb6;
  padding: 8px 10px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.navbar div {
  height: 5px !important;
  background: #fff;
  margin: 7px 0px 7px 0px;
  border-radius: 50px;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.two {
  width: 35px;
}
.three {
  width: 50px;
}
.navbar:hover div {
  width: 60px;
}
.white-span {
    font-family:'Kanit', sans-serif; 
    color: white;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Practise Website</title>
</head>
<body>   
    <div >
        <h1>KB<span > OFFICIALS </span></h1>
        <div > 
            <a href="#" target="_blank">          
                <div ></div>
                <div ></div>
                <div ></div> 
            </a>            
        </div>
     </div>     
</body>
</html>