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

The description in the lower design must not be on the same line or at the same height as the element

I'm facing an issue with CSS regarding achieving the same height. I have a list of designs, each with a description at the bottom. While I've successfully aligned the designs vertically between portrait and landscape orientations, the problem ari ...

htmlcssbootstrap-4

Break the line after every space in words within an element

I have a table/grid view with two words in the <td> like "C2 Sunday". I need a line break after C2 so that it appears as: C2 Sunday Is there a way to achieve this? Please assist me with this issue. Currently, it is showing as "C2 Sunday" and I wou ...

htmlcssasp.netgridviewhtml-table

The window.addEventListener function is failing to work properly on mobile devices

Hey there! I am facing an issue in my JS code. I wrote this code because I want the menu to close when a visitor clicks on another div (not the menu) if it is open. The code seems to be working fine in developer tools on Chrome or Firefox, but it's no ...

javascriptjquerycssresponsive-designmenu

Tips on using JQuery to extract form field information from a drop-down menu, display it in a div, and then compare it with the subsequently

In my HTML file, I am using two dropdown lists and JQuery for validation. First, I need to save the selected items from both dropdown lists in a variable and then compare them with the next selection. If the data from both dropdown lists match, an alert m ...

javascriptjqueryhtmlajaxjson

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

htmlcssangulartypescript

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Link to Codepen My Angular calendar application runs smoothly without any errors. However, I am encountering an issue where the CSS styles are not being applied to the page. When I implemented this separately, everything worked fine. But as soon as I inc ...

javascriptjqueryhtmlcssangular

Clicking the button will remove any previously applied CSS style using jQuery

Is there a way to remove the background color that was applied to a previously clicked button when clicking on another button? The current code successfully changes the background color of the clicked button upon hover, but it doesn't reset or remove ...

javascripthtmljquerycss

What is the best way to add color to a Table Header?

I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code: <table class="contentTable"> <tr class="contentTableHeader"> <th>No.< ...

htmlcss

Interactive feature allowing all embedded YouTube videos on a webpage to play synchronously, with sound disabled, and on a continuous loop

I am in the process of developing a button that, when clicked by a user, will trigger all embedded YouTube videos on a specific webpage to start playing simultaneously, with sound muted, and set to loop. The target page for this button implementation can ...

javascripthtmljquerycss

The Input element's onChange event is not functioning as expected

I am experiencing some issues with my code. I am trying to dynamically change the background color based on user input, but I am struggling to make it work. It seems like a simple task, so I must be missing something. Below is my HTML markup and jQuery: ...

javascriptjqueryhtml

Jquery failing to trigger click() on a div with an id

Within my erb file, there exists a script that looks like the following: function checkJquery() { if(window.jQuery) { jQuery(document).ready(function() { alert('onready'); $('div#habla_topbar_div').click(function( ...

javascriptjqueryhtmlruby-on-rails

To showcase the entire contents of a specific column from one table onto a different table on the following page once the box is ticked

Everything seems to be running smoothly, except for one issue. When a row contains the value "hello world" in a column on the first page, it only displays "hello" in the item column on the second page. I'd like it to show the full value "hello world" ...

phphtml

Tips for resizing a chartjs within bootstrap columns to accommodate various web browsers

I am using chartjs charts within bootstrap rows and columns. The number of columns per row can be dynamically changed. For example, I could rebuild my rows with the following markup: const twoColumn = spacerColumn + "<div class=&ap ...

cssbrowserchart.jsresize

Executing a function in Angular 2 depending on the class assigned to a <div>

In my HTML code, I am using *ngFor to iterate through an array of messages. <div *ngFor="let message of messages; let i=index" [focused]="i === activeIndex;" [ngClass]="{'message-list-active': activeIndex === i }" (click)="onAddtoMessag ...

javascriptcssangularng-class

Is it possible to align a clip-path starting from the right edge?

On my webpage, I have a unique hamburger icon that is positioned 2rem away from the right and top edges. I am looking for a convenient way to create a clip path that grows from its center point. Calculating the center point is not difficult but unfortunate ...

cssclip-path

Utilize jQuery to animate the hiding of my right sidebar

Looking for help with implementing a jQuery animation to hide the right sidebar on my 3-columns page. I created a demo online here - JsFiddle: http://jsfiddle.net/yhfXX/ In my template, the columns are arranged as follows: menu (on the left) is fixed co ...

jqueryhtmlcss

how to position one div above another using css

I currently have a page layout with 7 different div elements structured like this; <div id="container"> <div id="head"></div> <div id="A"> <div id="A1">A1</div> <div id="A2"></div> ...

css

Arrange the items in the last row of the flex layout with equal spacing between them

How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...

htmlangularcssflexbox

Choose only the values that start with a letter in the autocomplete list

I am currently utilizing the datalist feature for my autocomplete field. Everything is functioning properly. In my list, I have the values james, reeta, and mary. For example, if I type in "r" in the autocomplete box, it shows both reeta and mary because ...

html

Utilizing the active tab feature within CSS

I am currently working with a detailed structure of bootstrap theme classes. Currently, I am in the process of designing a menu. This is the code snippet for the navigation bar design in Bootstrap- <div class="navbar navbar-fixed-top navbar-invers ...

jqueryhtmlcssclick