When the icon is clicked, the text goes over the ul and the mobile slide menu goes beneath it

click here for the image

Is there a way to make the text move below when I click on the hamburger menu icon?

javascripthtmlcssanimationmobile

Answer №1

Hello and welcome to StackOverflow!

Check out this helpful example:

a {
  color: #fff;
  text-decoration: none;
}


/* Hamburger */

.hamburger1 {
  height: 45px;
  margin: 10px;
  display: -ms-grid;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  justify-items: center;
  z-index: 120;
}

.hamburger1 div {
  background-color: rgb(61, 61, 61);
  position: relative;
  width: 40px;
  height: 5px;
  margin-top: 7px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#toggle1 {
  display: none;
}

#toggle1:checked+.hamburger1 .top {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin-top: 22.5px;
}

#toggle1:checked+.hamburger1 .meat {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: -5px;
}

#toggle1:checked+.hamburger1 .bottom {
  -webkit-transform: scale(0);
  transform: scale(0);
}

#toggle1:checked~.menu1 {
  height: 340px;
}


/* Menu */

.menu1 {
  width: 100%;
  background-color: #02173F;
  margin: 0;
  display: -ms-grid;
  display: grid;
  grid-template-rows: 1fr repeat(4, 0.5fr);
  grid-row-gap: 25px;
  padding: 0;
  list-style: none;
  clear: both;
  width: auto;
  text-align: center;
  height: 0px;
  overflow: hidden;
  transition: height .4s ease;
  z-index: 120;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.menu1 a:first-child {
  margin-top: 40px;
}

.menu1 a:last-child {
  margin-bottom: 40px;
}

.navlink {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  font: 700 20px 'Oswald', sans-serif;
}

.navlink:hover {
  background-color: #fff;
  color: rgb(61, 61, 61);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
<section class="p-menu1">
  <nav id="navbar" class="navigation" role="navigation">
    <input id="toggle1" type="checkbox" />
    <label class="hamburger1" for="toggle1">
      <div class="top"></div>
      <div class="meat"></div>
      <div class="bottom"></div>
    </label>

    <nav class="menu1">
      <a class="navlink" href="#">Home</a>
      <a class="navlink" href="#">About</a>
      <a class="navlink" href="#">Blog</a>
      <a class="navlink" href="#">Contact</a>
    </nav>
  </nav>
</section>

For more information, you can also check out W3Schools.

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

backbone.js router failing to recognize URL fragments

I have set up a basic router in my code and initialized it. Issue: I encountered an unexpected behavior when visiting the URL http://localhost/backbone1/#photos/5. Despite expecting an output from console.log() in the JavaScript console, nothing appears. ...

javascriptjquerybackbone.js

What is the best method for storing pug-formatted data in a database?

I am currently developing a JavaScript application where I utilize pug for templates and diskdb for storing data. Within my content, I have implemented pug syntax which may appear in the following format: p some content here p some more content here p: # ...

javascriptnode.jspug

Any ideas on how to potentially establish a default route based on conditions with react-router-dom v6?

Managing two pages, Page1 and Page2, requires conditional configuration for setting one as the homepage based on a specific condition. Additionally, all URLs must be prefixed with an ID. Take a look at the code snippet below: <Routes> <Route pat ...

javascriptreactjsreact-router-dom

Find the item in the pop-up window

When removing a user from my list, a JavaScript popup pops up prompting to confirm the action with two buttons "OK" / "Annuler" : https://i.sstatic.net/BEdH2.png Is there a way to use Selenium to find and interact with these buttons? ...

javascripthtmlselenium-webdriver

Collaborate on documents with fellow users on the Django platform

Summary of the app: The main focus of this application is to enable users to create projects and share uploaded files with others, based on permission settings. Basically, after creating a project using the Project module, when a user uploads a file to the ...

pythonhtmldjangoredis

Ways to eliminate the design from a previously selected list item

I'm working on creating a calendar that displays 3 booking times when a user clicks on a specific day. However, I am facing an issue where the styling (green color) remains on the selected day even if the user chooses a different day. Any assistance o ...

javascripthtmlcss

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

javascripthtmlcssvue.jsvuetify.js

Vue encounters an issue when trying to access a specific field within an array of objects

Consider the following data structure: rules:[ 0:{ subrule1:'', subrule2:'', subrule3:'' }, 1:{ subrule1:'', subrule2:'', subrule3:'' } ...

javascriptvue.jswebvuejs2frontend

Using JQuery to manipulate `this`, its children, its siblings, and more

Can anyone help me determine the most effective way to send data from a get request to a specific div? My challenge is to send it only to a div that is related to the one triggering the action. For example, when I click on the message_tab, I want to send t ...

javascriptjqueryhtml

What is the method for inserting data into an array of objects in JavaScript?

I have a question regarding how to push/replace data into an object of an array of objects. Please excuse any mistakes in my grammar. Here is my dummy data: const dummyData = { id: 1, daerah: "Bandung", date:"1668790800000& ...

javascriptarraysvue.jsarraylistreactive

What is the method for closing an <iframe> element directly?

A web page called room.html contains a table with an onclick function named place(): function place() var x = document.createElement("IFRAME"); x.setAttribute("src", "loading.html"); document.body.appendChild(x); } What is ...

javascriptjquery

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Is it feasible to have the first and last columns of an HTML table fixed while allowing the middle columns to be scrollable? (This functionality is achievable in jQuery DataTables, but what about a basic HTML table?) ...

htmlcsshtml-tablesticky

What is the process for displaying or hiding a large image when clicking on thumbnail images?

How can I toggle the display of a large image by clicking on thumbnails? This is what I am looking for: Check out this JSFiddle version http://jsfiddle.net/jitendravyas/Qhdaz/ If not possible with just CSS, then a jQuery solution is acceptable. Is it o ...

javascriptjquerycssmobile-safari

Excessive white space on WordPress pages is creating a less than ideal

On my WordPress page, I have set up a row with the main side at span10 and the right sidebar at span2. However, the layout leaves too much blank space, causing users to scroll to the right and see nothing. You can view the specific page here Below is the ...

htmlwordpresstwitter-bootstrapbootstrap-4

I'm feeling a bit lost with this JSON example - specifically with JSON.parse, JSON.stringify, as well as localStorage.setItem

As a beginner in learning JSON, I find that W3schools does not provide clear explanations of what each line of code does. While I can interpret some parts, there are sections that still remain unclear to me. // Data storage process: 1. myObj = {name: "Jo ...

javascriptjsonweb-storage

What is causing styled-components to include my attributes in the DOM?

In various parts of my code, there is a snippet like this: import React from 'react' import styled from 'styled-components' type PropsType = { direction?: 'horizontal' | 'vertical' flex?: number | string width ...

javascriptreactjstypescriptnext.jsstyled-components

React error: Unexpected token < in JSON when fetching local file

I've encountered an issue with my React app. I have a JSON file in the public directory that I was successfully fetching data from in my main App.js file without any errors. However, after running `npm run build`, I started getting the error message: ...

javascriptreactjsjson

Polymer element created specifically for this project can be seen in the DOM, yet it does not display any content within the

Snippet: <link rel="import" href="../../../../bower_components/polymer/polymer.html"> <link rel="import" href="../../../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html"> <dom-module id="app-index"> <templa ...

javascriptphppolymer-1.0symfony

My desire is for every circle to shift consecutively at various intervals using Javascript

I'm looking to draw circles in a sequential manner. I am trying to create an aimbooster game similar to . Instead of drawing all the circles at once, I want each circle to appear after a few seconds. The circles I've created currently do not g ...

javascripthtmlcss

Tapping on content within SPAN elements with Selenium Webdriver in Java

Here is an example of what HTML code might look like: <td id="id26a" class="doclisting-name link" style="width: 319px; min-width: 319px;"> <span id="id26b" title="Document"> <span class="ie-fallback-marker"> sample text </span> ...

javaseleniumhtml