Troubleshooting CSS navigation bar hamburger dilemma

Currently, I am facing an issue with a toggle button on my website. When I click on the hamburger menu, the navigation bar does not show up even though the toggle feature is working perfectly fine. I have tried combining different sources to solve this problem since the underlying concept remains the same.

References:

https://www.example.com/toggle-button-video1

https://www.example.com/toggle-button-video2

* {
          margin: 0;
          padding: 0;
        }

        #toggle {
          display: none;
        }

        .hambuger {
          z-index: 1;
          position: fixed;
          width: 25px;
          top: 20px;
          left: 28px;
          cursor: pointer;
        }

        .line {
          display: block;
          width: 100%;
          height: 3px;
          margin-bottom: 3px;
          background-color: black;
        }

        .menu {
          display: none;
          width: 70px;
          line-height: 1.7em;
          margin: 40px;
        }

        .menu a {
          display: block;
          text-decoration: none;
          color: black;
          border: 1px grey solid;
        }

        #toggle:checked~.menu {
          display: block;
        }
<header class="content">
          <label for="toggle" class="hambuger">
            <input type="checkbox" id="toggle">
            <span class="line"></span>
            <span class="line"></span>
            <span class="line"></span>
          </label>

          <nav class="menu">
            <a href="#" class="active">Home</a>
            <a href="#" class="active">About us</a>
            <a href="#" class="active">History</a>
            <a href="#" class="active">Contacts</a>
          </nav>
        </header>

htmlcsshamburger-menu

Answer №1

To use the general sibling selector ~ to choose your .menu item from the input, I made the decision to relocate the input so that it becomes a sibling with the menu within the same parent (the header element).

* {
  margin: 0;
  padding: 0;
}

#toggle {
  display: none;
}

.hambuger {
  z-index: 1;
  /*keeps displaying the icon when it clicks*/
  position: fixed;
  width: 25px;
  /*The parents (hamburger) of siblings (span)*/
  top: 20px;
  left: 28px;
  cursor: pointer;
  /*to able to click it*/
}

.line {
  display: block;
  /*to show the three lines*/
  width: 100%;
  /*Maximize the width of the parents (hamburger: 25px width)*/
  height: 3px;
  margin-bottom: 3px;
  /*to separate and see the icons*/
  background-color: black;
  /*color of the icons*/
}

.menu {
  display: none;
  width: 70px;
  line-height: 1.7em;
  margin: 40px;
}

.menu a {
  display: block;
  text-decoration: none;
  color: black;
  border: 1px grey solid;
}

#toggle:checked~.menu {
  display: block;
  /*The toggle became the parents while menu is the sibling here*/
}
<header class="content">
  <input type="checkbox" id="toggle">
  <label for="toggle" class="hambuger">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
  </label>
  <nav class="menu">
    <a href="#" class="active">Home</a>
    <a href="#" class="active">About us</a>
    <a href="#" class="active">History</a>
    <a href="#" class="active">Contacts</a>
  </nav>

</header>

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

Angular's ng-disabled feature seems to be experiencing a delay in functionality

While editing the file, I have the ability to modify the filename and add additional files for versions. Once a file has been chosen, the filename edit field should be disabled immediately. Despite attempting the following code, the field remains enabled u ...

htmlangularjsfileangularjs-ng-disabled

Get a polished look using HTML and CSS exclusively

Allow me to illustrate what I am intending to accomplish with an example. div{ width:100px;height:100px; border:3px solid #900; border-radius:0px 0px 140px 0px; } <div></div> I am seeking a method to ...

htmlcss

The functionality of Ng-Show is acting up

$scope.stay = function() { alert("Inside Keep me In") $scope.timed = false; $scope.isLogStatus = true; } $scope.displayAlert = function() { $scope.timed = true; alert("inside display") } function idleTimer() { var t; $window.o ...

htmlcssangularjsmean-stack

Viewing all album titles simultaneously using the Flickr API

After trying a different approach due to lack of responses to my previous question, I am still facing the same issue. My code successfully retrieves all album names and corresponding photos from Flickr API, but it displays all album names at once followed ...

htmljqueryflickr

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

javascriptjqueryhtml

Personalize the pagination or other elements of Splide in a Svelte component to suit your needs

I am currently integrating Splide into my Svelte application and facing an issue with the pagination styling. The pagination is appearing on top of my images and is too transparent for my liking. I'm utilizing Svelte Splide to incorporate this library ...

htmlcsssveltesplidejs

I am developing a JWT authentication and authorization service for my Angular application. However, I am running into issues when trying to implement observables

I have created a user class and required interfaces as outlined below: user.ts import { Role } from '../auth/auth.enum' export interface IUser { _id: string email: string name: IName picture: string role: Role | string userStatus: b ...

htmlangulartypescriptangular-materialjwt

Different options for determining network connectivity on a website

Seeking Network and Location Information on ASP.Net Core MVC Web Application After some investigation, I came across the Navigator API online. For acquiring location data, it functions flawlessly. navigator.geolocation.getCurrentPosition(function (posi ...

javascriptasp.net-mvchtmlasp.net-core-2.0

Next.JS CSS modules are experiencing issues with functionality

Organizing the CSS structure for a project by creating a module of CSS for each component or page can sometimes present challenges. Take a look at the code snippet below: .navbar { display: flex; justify-content: flex-start; align-items: center; pa ...

cssreactjsnext.jsfrontendcss-modules

Unable to perform the 'setSelectionRange' function on the 'HTMLInputElement' due to the input element's type being 'number', which does not allow selection

My attempt to enable text selection in an input box upon user click by using the code snippet below was unsuccessful: <input type="number" onclick="this.setSelectionRange(0, this.value.length)" name="quantity" /> Instead of achieving the desired ef ...

javascripthtmljquerycsshtml-input

Center flex items along the vertical axis

IMAGE <div className="d-flex align-items-center"> <img src={member.user_profile_image} width="41" height="41" alt="" ...

htmlcsstwitter-bootstrapbootstrap-5

Calculating values within dynamically generated elements requires utilizing JavaScript to target and extract the

I am working on creating input fields inside an HTML table using Vue.js. On click of a button, I want to perform some calculations based on the input values. However, it seems that the calculations are not happening as desired. What I have attempted so fa ...

javascripthtmlvue.js

Learn how to include the srcObject attribute of a video tag and then dynamically inject it into an HTML page using JavaScript or jQuery

media stream object inside console and this is what I am seeing after setting the source attribute The following function is part of my client-side script. I am working on a project that involves WebRTC and this function is called whenever I need to add a ...

jqueryhtmlnode.js

Extracting a parameter from a URL using C#

Imagine having a URL such as http://google.com/index.php?first=asd&second=mnb&third=lkj What is the method to extract the second value (mnb) using C#? ...

c#htmlurlbrowser

How to update the border color of focused elements in ExtJS?

In my ExtJS application running on ExtJS 6 with the default Theme-Triton, I am looking to customize the focus border color. Is there a solution to modify the CSS property that will globally change the focus border color from blue to red, for instance? ...

cssextjs

Switching the ASP.NET XHTML Display Mode

I have been given HTML code from a designer to create a master page. The doctype in the HTML is set to HTML 4.0 Strict. The meta tags in the HTML do not contain closing end tags (they end with > instead of />) and the HTML is compliant when checked ...

asp.nethtml

Why dashes are incompatible with inner <span> elements?

Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like &shy;. The Code (sandbox: https://codepen.io/anon/pen/ayzxpM): .limit { max-width: 50px; ...

csscss-hyphens

The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that. .content{ display: grid; grid-template-columns: 25% 25 ...

htmlcsscss-grid

How can I create a jumping animation effect for my <li> element in JQuery?

I have a horizontal navigation bar with a "JOIN" option. My goal is to make the #jump item continuously jump up and down after the page has finished loading. Currently, I have this code which only triggers the jump effect once when hovering over the eleme ...

javascriptjqueryhtml

Guide to swapping images based on conditions using Angular JS

I am trying to display an image based on data received from an API response instead of text. If the value is true, I want to show an access symbol. If the value is false, I want to show a deny symbol. However, when attempting this, I am only getting th ...

javascripthtmlangularjs