What is the best way to position the <h2> heading and <span>hamburger menu</span> next to each other?

I'm attempting to create a 'hamburger menu' that includes the word 'menu', where both the word and the hamburger icon are clickable. I have achieved the desired functionality, but I'm facing an issue with aligning the word 'menu' horizontally with the hamburger lines. Any solutions I've tried so far have disrupted the navigation bar's functionality. If anyone can assist me in placing these two components side by side without affecting functionality, I would greatly appreciate it.

#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;
          left: 20px;
          width: 500px;
          height: auto;
          cursor: pointer;
          z-index: 1;
        }
        .menu__btn > span,
        .menu__btn > span::before,
        .menu__btn > span::after {
          display: block;
          position: absolute;
          width: 25px;
          height: 2px;
          background-color: #616161;
          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;
     <div class="hamburger-menu">
          <input id="menu__toggle" type="checkbox" /&...
htmlcss

Answer №1

  #menu__toggle {
  opacity: 0;
}

#menu__toggle:checked+.menu__btn .menu__hamburger {
  transform: rotate(45deg);
}

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

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

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

.menu__btn {
  position: fixed;
  left: 20px;
  width: 500px;
  height: auto;
  cursor: pointer;
  z-index: 1;
  
  /* Replaced previous selectors */
  display: flex;
  align-items: center;
  gap: 1em;
}

.menu__btn .menu__hamburger,
.menu__btn .menu__hamburger::before,
.menu__btn .menu__hamburger::after {
  display: block;
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: #616161;
  transition-duration: .25s;
}

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

.menu__btn .menu__hamburger::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;
}
<div class="hamburger-menu">
  <input id="menu__toggle" type="checkbox" />
  <label class="menu__btn" for="menu__toggle">
            <h2 id="menu">MENU</h2>
            <div><span class="menu__hamburger"></span></div>
        </label>

  <ul class="menu__box">
    <li><a class="menu__item" href="#">Home</a></li>
    <li><a class="menu__item" href="#">About</a></li>
    <li><a class="menu__item" href="#">Team</a></li>
    <li><a class="menu__item" href="#">Contact</a></li>
    <li><a class="menu__item" href="#">Twitter</a></li>
  </ul>
</div>

I enclosed the hamburger menu in a div and updated the CSS selectors as mentioned.

To ensure the text is aligned with the icon, I utilized display: flex and align-items: center.

For further details on flexbox, you can refer to the MDN documentation:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click the 'expand' button for additional details on every row in the table

I am facing a challenge with my HTML table where I have a lot of information to add for each row. However, displaying everything at once makes the page look cluttered. Therefore, I am looking to add a "view more" button in another column for each row. Des ...

javascriptjqueryhtmlcss

Is it possible to dynamically pass a component to a generic component in React?

Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...

javascripthtmlangulartypescriptbootstrap-modal

I encountered an issue while attempting to execute my php script, but I am unsure of the cause

Below is the PHP code snippet I am utilizing: <?php $to = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa909b999598ba99959e9f9c9b889789d48f89">[email protected]</a>, <a href="/cdn-cgi/l/email-protectio ...

phphtml

Ensuring smooth transitions of the mouse between divs, avoid concealing divs that are not contained within the parent when the mouse leaves the parent using jQuery

Here is the current situation: We have two divs, <script type='text/javascript' src='jquery.min.js'></script> <div onmouseover="$(this).next('#mydiv').show();" onmouseleave="$(this).next('#mydiv' ...

jquerycsshidepositioning

Are there any PHP functions available that can check if the query string is empty?

I have experience with server-side development but not much in PHP. Currently, I'm working on a semi-basic tool with 10-15 pages and using the $_GET parameter for navigation. Is there a PHP function that can check if the query string is empty to dete ...

phphtml

The animation for collapsing a flex-column navigation is appearing oddly strange

I'm currently working on creating a sidebar navigation using the Bootstrap 4 framework. The menu should be displayed at the top of the page on small devices. Here is my approach: .sidebar { background-image: linear-gradient(180deg, rgb(33, 243, ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

When the form is submitted, the value is not refreshed if the button is exited

I need to have a form where the save button is positioned outside of the form elements. However, when I move it elsewhere, the form does not refresh. <form ng-submit="save()" action="" name="addInv" novalidate> <div class="col-md-10 ...

htmlcss

Incorporating multiple classes in an HTML document

Can multiple classes be added in HTML? Here is the code I attempted: <a href="#" class="class1 class2">My Text</a> Appreciate your help! :) ...

htmlcss

Adjust the dimensions of polymer components (checkbox)

When attempting to adjust the size of the paper-checkbox, I experimented with changing the width and height properties in my CSS file. Additionally, I tried using transform: scale(2,2). The scale property resulted in blurriness, while adjusting the width ...

csspolymer

on clicking GTM, obtain a different child element

My HTML code is structured as follows: <div onclick="location.href='https://ford-parts-accessories.myshopify.com/products/ash-cup-coin-holder-with-lighter-element?refSrc=6748959244479&amp;nosto=productpage-nosto-1-fallback-nosto-1';&q ...

javascripthtmlcssgoogle-tag-manager

Receive notification of alert content when it is displayed

Having an HTML page with the following script: <Script> function Run() { alert("The Content Here"); return true; } </script> <button onclick="Run();">I Want It Now</button> If I were to open this page using firefox or Chrome, and ...

c#javascripthtmlvb.netwinforms

Stop Bootstrap IE menu from closing when scrollbar is clicked

When using IE, the dropdown menu closes when clicking on the scrollbar. However, it functions properly when scrolling with the mouse wheel. To see the issue in action and potentially offer a solution, you can visit this Codeply link: I'm seeking sug ...

javascriptcssinternet-explorercross-browserbootstrap-4

Struggling to display the inline navbar

For the past few hours (a little over 3 hours, to be exact), I've been grappling with an issue that seems fairly simple. Despite scouring through various SO posts and other resources, I just can't seem to figure out the problem. The crux of the ...

cssruby-on-railshtml

Struggle with uploading images in codeigniter

My issue lies in saving data to the database after displaying it on the front end. Specifically, I have a problem with the image upload function. When I try to save the image path in the database, it saves the full file path like C:/xampp/www/htdocs/rentoz ...

phphtmlcodeigniter

Obtain checkbox input from HTML using Angular 2 typescript

Within my HTML code, I have defined two checkboxes in the following manner: <label><input type="checkbox" id="checkbox1" /> Folder 1: </label> <label><input type="checkbox" id="checkbox2" /> Folder 2: </label> I am fac ...

htmlangularcheckboxtypescript

Is it possible to revert the div back to its original contents by removing the load() function?

After successfully implementing most of my desired functionality, I've hit a roadblock with the last piece. This has led me to seek help from the knowledgeable community at stackoverflow. The issue I'm facing involves a long list of sub-menu opti ...

jqueryhtmlload

Repeatedly using jQuery to add elements twice

When I run this code, every time I click the '#right' button, the #slide increments by 2 instead of just 1. For example, if there are a total of 6 elements, it displays the 1st, 3rd, and 5th elements. var currentSlide=2; var totalSlides= ...

jquerycss

How can we use a :before tag element to create a hovering effect on an image that remains clickable?

My objective is to create an image that is wrapped in a link. The link will have a pseudo element :before that adds a black overlay on hover. I want the image to remain clickable, but no matter what I try, the pseudo element won't position correctly o ...

css

SideBar does not display Bootstrap ToolTip

The sidebar's "Hover here" feature is not displaying the tooltip correctly: CodeSandbox However, if the bootstrap CSS is removed, it works fine: CodeSandbox I have identified the issue to be related to this particular property: .tooltip { positio ...

htmlcsstwitter-bootstrapreactjs

Issue with the MUI Autocomplete display in my form

Recently, I started using Material UI and Tailwind CSS for my project. However, I encountered an issue with the Autocomplete component where the input overlaps with the following DatePicker when there is multiple data in the Autocomplete. I have attached a ...

csstypescriptnext.jsmaterial-uitailwind-css