Selectors for fake elements and neighboring siblings

I'm struggling to show my menu when the toggle checkbox is selected. I know that my .menu-container is not a sibling of the toggle element, but I'm not sure how to make it work without moving the toggle outside of the div so that .menu-container directly follows it. I'm still new to Javascript (I'm a junior developer), so I prefer using CSS for now unless there's a simple explanation or solution with JS.

I hope this makes sense.

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

a {
  text-decoration: none;
}

.nav-container {
  position: fixed;
  top: 0;
  width: 100vw;
  /*border: 1px solid red;*/
}

.toggle-container {
  display: flex;
  justify-content: flex-end;
  /*border: 1px solid blue;*/
  /*margin: 20px;*/
}

.menu-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 30px 20px 20px;
}

.menu-item {
  padding: 0 10px;
  font-size: 1.1em;
}

#toggle {
  display: none;
}

.toggle {
  display: none;
  font-size: 1.8em;
  padding: 15px 30px 10px 0;
}


/*.menu-container {
    display: flex;
    flex-direction: column;
    border: 1px solid green;
    align-items: center;
}
*/

@media only screen and (max-width: 500px) {
  .toggle {
    display: block;
  }
  .menu-container {
    flex-direction: column;
    margin: 0;
    border-top: 1px solid gray;
    display: none;
  }
  .menu-item {
    padding: 8px;
    width: 100vw;
    text-align: center;
    border-bottom: 1px solid gray;
  }
  #toggle:checked+.menu-container {
    display: block;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Bundles</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Comptible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="mynavtext.css">
  <link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
</head>

<body>

  <nav class="nav-container">

    <div class="toggle-container">
      <label class="toggle" for="toggle"><i class="fas fa-bars"></i></label>
      <input type="checkbox" id="toggle">
    </div>

    <div class="menu-container">
      <a class="menu-item" href="#">Categories</a>
      <a class="menu-item" href="#">How It Works</a>
      <a class="menu-item" href="#">Log In</a>
      <a class="menu-item" href="#">Register</a>
    </div>

  </nav>

</body>

</html>

Thank you,

htmlcss

Answer №1

Currently, the css cannot solve the issue within the html structure. It is recommended to relocate the input element outside of the div element to resolve the problem.

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

a {
  text-decoration: none;
}

.nav-container {
  position: fixed;
  top: 0;
  width: 100vw;
  /*border: 1px solid red;*/
}

.toggle-container {
  display: flex;
  justify-content: flex-end;
  /*border: 1px solid blue;*/
  /*margin: 20px;*/
}

.menu-container {
  display: flex;
  justify-content: flex-end;
  margin: 20px 30px 20px 20px;
}

.menu-item {
  padding: 0 10px;
  font-size: 1.1em;
}

#toggle {
  display: none;
}

.toggle {
  display: none;
  font-size: 1.8em;
  padding: 15px 30px 10px 0;
}

/*.menu-container {
    display: flex;
    flex-direction: column;
    border: 1px solid green;
    align-items: center;
}
*/

@media only screen and (max-width: 500px) {
  .toggle {
    display: block;
  }

  .menu-container {
    flex-direction: column;
    margin: 0;
    border-top: 1px solid gray;
    display: none;
  }

  .menu-item {
    padding: 8px;
    width: 100vw;
    text-align: center;
    border-bottom: 1px solid gray;
  }



  #toggle:checked+.menu-container {
    display: block;
  }

}
<!DOCTYPE html>
<html>

  <head>
    <title>Bundles</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Comptible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="mynavtext.css">
    <link rel="stylesheet" href="..\fontawesome-free-5.12.1-web\css\all.css">
  </head>

  <body>

    <nav class="nav-container">

      <div class="toggle-container">
        <label class="toggle" for="toggle"><i class="fas fa-bars"></i>icon</label>
      </div>
      <input type="checkbox" id="toggle">
      <div class="menu-container">
        <a class="menu-item" href="#">Categories</a>
        <a class="menu-item" href="#">How It Works</a>
        <a class="menu-item" href="#">Log In</a>
        <a class="menu-item" href="#">Register</a>
      </div>

    </nav>

  </body>

</html>

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

Is it possible to invoke this PHP function within an HTML document?

I'm in the process of developing a social networking platform that allows users to receive notifications when someone follows or unfollows them. The purchased plugin includes a function for notifying users about the number of notifications they have. ...

phphtml

Utilizing Z-index for the arrangement of DIVs and elements in a webpage

I am facing an issue with my website design where the content section overlaps with the banner. This causes the content section to be hidden behind the banner, and I need it brought to the front. The problem specifically lies with the search element on my ...

css

Change the formatting to eliminate the file extension while ensuring the page is still accessible

I have a subdomain with .php pages in it and I want to remove the .php extension. After researching on various forums, I came up with the following code: RewriteEngine On RewriteBase / RewriteCond %{THE_REQUEST} (\.php(.*)\sHTTP/1) RewriteRu ...

htmlmod-rewriteweb

Implementing jQuery to showcase an element on the screen

I would like to express my gratitude to everyone who has helped me. Please forgive my poor English :) Can someone provide me with a jQuery script that can extract the name of the currently selected tab and display it in an h1 tag? Whenever the selected ta ...

jqueryhtmlcss

Is there a way to access the origin of an iframe?

I am facing a challenge with an HTML page that includes an iframe. Within the iframe, there are text and buttons that trigger onclick scripts. However, I'm having difficulty retrieving the values of getBoundingClientRect when I specify the ID of the b ...

javascripthtmliframe

using an SVG mask declared in HTML to apply masking

I've been experimenting with masking using an SVG shape that I created in the HTML content. I've tried various options: mask, -webkit-mask mask-image, -webkit-mask-image different MaskUnits and MaskContentUnits mask-type: luminance or not Desp ...

htmlcsssvgmask

Exploring the Excitement of PHP Regular Expressions (preg_replace)

Looking for assistance with a regex preg_replace function to clean up HTML content being submitted to my app's controller/model. The goal is to strip away unwanted HTML and convert specific elements into proprietary tags for the app. $postText = $_PO ...

phphtmlregexpreg-replace

Could there be an issue with the directory path for the file?

https://i.stack.imgur.com/m8F9y.pngThe background-url() function was utilized to set the background screen to PurpleCloud.png. Despite multiple attempts, the image is still not being displayed. What could be the issue? Even after understanding file path w ...

cssurl

Learn the process of updating Datatables' multiple column headers in real-time using ajax and jquery, all without the need to refresh

My goal is to dynamically change the column number and header of a table based on the return value of an AJAX call in conjunction with DataTables jQuery plugin. Below is the JavaScript and jQuery code I am currently using: $( document ).ready(function() { ...

jqueryhtmlajaxdatatables

What is the method for showcasing an image stored in a Mysql database as a Medium Blob on my webpage?

After following instructions from the internet, I have implemented the following code in my HTML: <img src="imagescript.php?id=1"> Additionally, the imagescript.php file contains the following PHP code: <?php $servername="loc ...

phpmysqlhtmlimageblob

Ensure the footer remains at the bottom of the page even with changing

I am encountering an issue with positioning a footer under dynamic content displayed in a div named txtresults. The div is updated with HTML following a query made with an input value, as shown in this example on JsFiddle: JsFiddle Currently, I am struggl ...

jquerycssajaxfooter

Can Rollup be utilized solely for processing CSS files?

I am curious about whether Rollup can be used solely for processing CSS files, such as css, scss, less, etc. For example, if I have a file called index.css in my src folder (the entry folder) and want Rollup to process it in the dist folder (the output fol ...

csssassrolluprollupjspost-processing

Selenium is having trouble reading the text from a dropdown that has the autocomplete feature disabled

It seems that Selenium is having trouble retrieving the text from the dropdown options. Here is a snippet of the code I am working on: WebElement dropdown=driver.findElement(By.id("selFromAccount")); List<WebElement> dropoptions=dropdown.findElemen ...

jqueryhtmlcssseleniumautocomplete

Manipulating values in JavaScript using an onclick event in PHP

I am looking to remove the "http" from the URL part of an input link before sending the data. This is my input code that looks like this when clicked: <input style="outline: none;" type="button" onclick="formatText ('link:url');" class="btn ...

javascriptphphtml

What is the process by which the browser displays pseudo-element selectors?

One thing that's been on my mind is the potential resource cost of using *:after. Would the pseudo element be the primary selector, or would all elements still be processed by the client? In simpler terms, what impact does *:after have compared to ju ...

csscss-selectorspseudo-elementcss-content

Radiant Curvature Background Gradient

On my website, I'm trying to replicate the unique background gradient found here. Unlike a basic linear gradient that can be easily repeated as an image to fill any length, this one poses a challenge. Can anyone share a technique or method to help me ...

htmlcssradial-gradients

What is the most efficient way to remove all typed characters from fields when clicking on a different radio button? The majority of my fields share the same ngModel on a separate page

Is there a way to automatically clear all typed characters in form fields when switching between radio buttons with the same ngModel on different pages? I noticed that the characters I type in one field are retained when I switch to another radio button. ...

htmlangulartypescript

Wait for the Selenium test to continue only when a specific element is visible on

<img style="width: 640; height: 640;" id="img108686545" alt="Loading Word War..." src="www.something.com/anu.jpg"> Is there a way to detect when this particular element is visible on the page? The value of the "id" attributes keeps changing with eac ...

pythonhtmlseleniumbeautifulsoup

Iterate through an Array of Objects and exhibit a single object property in HTML one at a time by utilizing Javascript

I am working with an array of objects that contain two properties: "quote" and "author". I have a container div where I want the quotes to be displayed one by one at an interval of every 2 seconds. Currently, it is showing one letter at a time instead of d ...

javascripthtmlarraysjson

Tips for positioning and resizing an HTML slide

Once again I am faced with my favorite HTML/CSS dilemma and am feeling frustrated. Seeking advice from the experts on SO this time around to solve my problem. Here it is... Imagine you want to create a slideshow in a browser. The requirements are simple: ...

htmlcss