Home > front end >  How do I place my Hamburger Menu icon on the right side of my Title?
How do I place my Hamburger Menu icon on the right side of my Title?

Time：07-18

How do I place my hamburger menu icon on the right side of my Webpage name? So it would look like this: (Hamburger Icon) Tools

The image below shows the word "Tool" overlaps with the Hamburger icon. I want them side by side. I've tried placing the hamburger and the word into separate container but it didn't came out right.

Below the images, are my current codes.

Current Navbar

Navbar

Wanted Navbar

navbar

* {
  margin: 0;
  padding: 0;
}

.my-container {
  border: 1px solid green;
}

.my-row {
  border: 3px solid red;
  height: 300px;
}

.my-col {
  border: 3px dotted blue;
}

.navbar-custom {
  background-color: #bb0008;
}

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked .menu__btn>span {
  transform: rotate(45deg);
}

#menu__toggle:checked .menu__btn>span::before {
  top: 0;
  transform: rotate(0deg);
}

#menu__toggle:checked .menu__btn>span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu__toggle:checked~.menu__box {
  left: 0 !important;
}

.menu__btn {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu__btn>span,
.menu__btn>span::before,
.menu__btn>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: white;
  transition-duration: .25s;
}

.menu__btn>span::before {
  content: '';
  top: -8px;
}

.menu__btn>span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
}

.menu__item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.menu__item:hover {
  background-color: #CFD8DC;
}
<nav >
  <!--Hamburger Menu-->
  <div >
    <input id="menu__toggle" type="checkbox" />
    <label  for="menu__toggle">
      <span></span>
    </label>

    <ul >
      <li><a  href="#">Home</a></li>
      <li><a  href="#">test</a></li>
    </ul>
  </div>
  
  <h1>Tools</h1>
</nav>

CodePudding user response：

use flexbox. See the example below just a basic example.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  width: 100%;
  height: 100px;
  display: flex;
  padding: 0 2rem;
  column-gap: 1rem;
  align-items: center;
  background-color: brown;
}

.hamburger {
  border: 0;
  width: 32px;
  height: 32px;
  display: grid;
  background: none;
  place-items: center;
}

.hamburger svg {
  fill: white;
}

ul {
  display: none;
  column-gap: 1rem;
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
  font-family: sans-serif;
}

h1 {
  color: white;
  font-family: sans-serif;
}
<nav>
  <button >
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
      <path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"></path>
    </svg>
  </button>

  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">test</a></li>
  </ul>

  <h1> Tools </h1>
</nav>

CodePudding user response：

It isnt the best practice, but an easy fix in this case could be to add the following to the stylesheet for the menu button:

margin-left: 95%;

this is better than using a pixel specific margin as it will be relative to the screen (keep this in mind for the other parts of the style sheet when considering cross compatibility as px amounts stay the same across all devices, whereas if you use % instead, it's relative to screen size)

Adding the left margin has the following result: edited_example

like I said it's obviously not the best way to do this, making some use of parent containers or a grid layout or something similar would be more acceptable, but this line in the stylesheet should suffice for a quick easy fix

could be worth looking at the following on w3 schools if you aren't familiar with css layouts: https://www.w3schools.com/css/css_website_layout.asp

Could also be worth looking at the following on responsive web design if you aren't already familiar with it: https://www.w3schools.com/css/css_rwd_intro.asp

EDIT:

I now realise I didnt really answer the question you were asking, however I think your best way forward is to look at wrapping everything in parent div's and using those to style your elements accordingly.

I also think you should try making use of tags rather than the , and use an tag within the tag to add your icons. There is a tutorial on this which you can find below @ W3 Schools https://www.w3schools.com/howto/howto_css_navbar_icon.asp

CodePudding user response：

If you change the Icon to position relative, it is relative to other objects. Afaik you can't do this with position: fixed.

You also need to change the display property to inline-block on both (or else they are block mode and take the complete row)

Because your menu-box is position fixed, it will be on top of the button, you will need another button to close or make the box smaller (height - the top bar)

h1, .hamburger-menu{ display: inline-block; }

.hamburger-menu{ width: 32px; position: relative; }


* {
  margin: 0;
  padding: 0;
}

.my-container {
  border: 1px solid green;
}

.my-row {
  border: 3px solid red;
  height: 300px;
}

.my-col {
  border: 3px dotted blue;
}

.navbar-custom {
  background-color: #bb0008;
}

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked .menu__btn>span {
  transform: rotate(45deg);
}

#menu__toggle:checked .menu__btn>span::before {
  top: 0;
  transform: rotate(0deg);
}

#menu__toggle:checked .menu__btn>span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu__toggle:checked~.menu__box {
  left: 0 !important;
}

.menu__btn {
  /*position: fixed; this needs to leave*/
  top: 20px;
  left: 20px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu__btn>span,
.menu__btn>span::before,
.menu__btn>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: white;
  transition-duration: .25s;
}

.menu__btn>span::before {
  content: '';
  top: -8px;
}

.menu__btn>span::after {
  content: '';
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #ECEFF1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  transition-duration: .25s;
}

.menu__item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.menu__item:hover {
  background-color: #CFD8DC;
}
<nav >
  <h1>Tools</h1>
  <!--Hamburger Menu-->
  <div >
    <input id="menu__toggle" type="checkbox" />
    <label  for="menu__toggle">
      <span></span>
    </label>

    <ul >
      <li><a  href="#">Home</a></li>
      <li><a  href="#">test</a></li>
    </ul>
  </div>
  
</nav>

CodePudding user response：

body {
 margin: 0px;
}

.my-container {
  border: 1px solid green;
}

.my-row {
  border: 3px solid red;
  height: 300px;
}

.my-col {
  border: 3px dotted blue;
}

.navbar-custom {
  background-color: #bb0008;
}

#menu__toggle {
  opacity: 0;
}

#menu__toggle:checked   .menu__btn > span {
  transform: rotate(45deg);
}

#menu__toggle:checked   .menu__btn > span::before {
  top: 0;
  transform: rotate(0deg);
}

#menu__toggle:checked   .menu__btn > span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu__toggle:checked ~ .menu__box {
  left: 0 !important;
}

.menu__btn {
  position: fixed;
  top: 32px;
  left: 30px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: white;
  transition-duration: 0.25s;
}

.menu__btn > span::before {
  content: "";
  top: -8px;
}

.menu__btn > span::after {
  content: "";
  top: 8px;
}

.menu__box {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: #eceff1;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  transition-duration: 0.25s;
}

.menu__item {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: 0.25s;
}

.menu__item:hover {
  background-color: #cfd8dc;
}

.navbar {
  display: flex;
}

.nav-brand {
  margin-left: 55px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav >
      <!--Hamburger Menu-->
      <div >
        <input id="menu__toggle" type="checkbox" />
        <label  for="menu__toggle">
          <span></span>
        </label>
        <ul >
          <li><a  href="#">Home</a></li>
          <li><a  href="#">test</a></li>
        </ul>
      </div>

      <h1  >Tools</h1>
    </nav>
  </body>
</html>

Page link：https//www.codepudding.com/frontend/479001.html

Prev:How do I extend an <li> element?
Next:1px wide element looks thicker than a border of 1px width
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding