When I click the toggle on my mobile device, I desire for my navigation bar to overlap the content

Is it possible to have my navigation bar overlap the content when toggled on mobile size, without causing the content to scroll down? Below is the HTML, CSS, and JS code for my site. Can someone help me with coding this functionality?

$(function() {

  $(".toggle").on("click", function() {

    if ($(".item").hasClass("active")) {
      $(".item").removeClass("active");
      $(this).find("a").html("<i class='fas fa-bars'></i>");
    } else {
      $(".item").addClass("active");
      $(this).find("a").html("<i class='fas fa-times'></i>");
    }

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

#body {
  margin-left: 10%;
  margin-right: 10%;
}


/* nav */

nav {
  padding-bottom: 30px;
  padding-top: 85px;
}

ul {
  list-style-type: none;
}

ul.menu {
  padding-left: 0;
  margin-bottom: 0;
}

li a {
  text-decoration: none;
  color: #1D1D1D;
  padding-left: 1rem;
}

.menu li {
  white-space: nowrap;
}

.toggle a {
  font-size: 25px;
}


/* mobile menu*/

.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.toggle {
  order: 1;
}

.item {
  width: 100%;
  text-align: right;
  order: 2;
  display: none;
}

.item.active {
  display: block;
}


/* table */

@media all and (min-width: 600px) {
  .menu {
    justify-content: center;
  }
  .logo {
    flex: 1;
  }
  .toggle {
    flex: 1;
    text-align: right;
  }
}


/* desktop */

@media all and (min-width: 900px) {
  .item {
    display: block;
    width: auto;
  }
  .toggle {
    display: none;
  }
  .logo {
    order: 0;
  }
  .item {
    order: 1;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<div id="body">

  <!--navbar-->
  <nav>
    <ul class="menu ">
      <li class="logo"><img src="...jpg" width="100" height="100" alt="" /></li>
      <li class="item active"><a href="motion-graphics.html">Motion Graphics</a></li>
      <li class="item active"><a href="advertising.html">Advertising</a></li>
      <li class="item active"><a href="animation-banner.html">Animation banner</a></li>
      <li class="item active"><a href="others.html">Others</a></li>
      <li class="item active"><a href="about.html">About</a></li>
      <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
    </ul>
  </nav>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="script.js"></script>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an </p>
</div>

view image description here

view image description here

view image description here

javascripthtmljquerycss

Answer №1

Check out the revised HTML code below:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<div id="body">
<!--navbar-->
<nav>
 <ul class="menu">
   <li class="logo"><img src="...jpg" width="100" height="100" alt="" /></li>
   <li class="item"><a href="motion-graphics.html">Motion Graphics</a></li>
   <li class="item"><a href="advertising.html">Advertising</a></li>
   <li class="item"><a href="animation-banner.html">Animation banner</a></li>
   <li class="item"><a href="others.html">Others</a></li>
   <li class="item"><a href="about.html">About</a></li>
   <li class="toggle"><a href="#"><i class="fas fa-bars"></i></a></li>
 </ul>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
 when an 
</p>
</div>

CSS

* {

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

#body {
margin-left: 10%;
margin-right: 10%;
}


/* nav */

nav {
padding-top: 10px;
position: relative;
width: 100%;
height: 150px;
}

ul {
list-style-type: none;
}

ul.menu {
padding-left: 0;
margin-bottom: 0;
}

li a {
text-decoration: none;
color: #1D1D1D;
padding-left: 1rem;
}

.menu li {
white-space: nowrap;
}

.toggle a {
font-size: 25px;
}


/* mobile menu*/

.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 2;
}

.toggle {
order: 1;
}

.item {
width: 100%;
text-align: right;
order: 2;
display: none;
}

.item.active {
display: block;
}


/* table */

@media all and (min-width: 600px) {
.menu {
justify-content: center;
}
.logo {
flex: 1;
}
.toggle {
flex: 1;
text-align: right;
}
}


/* desktop */

@media all and (min-width: 900px) {
.item {
display: block;
width: auto;
}
.toggle {
display: none;
}
.logo {
order: 0;
}
.item {
order: 1;
}
}

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

There is a syntax error that occurs when attempting to begin a key with a hyphen (-)

Upon initializing the following object, an error is thrown. var postData ={ file_path : "https://s3-us-west-2.amazonaws.com/ps/eams/6-48K.mxf", template_type : "1", template_name : "Basic Tests", job_type : "0", user_note : "my job", access-ke ...

javascriptnode.jssyntax-error

I can't figure out why I'm facing a Same-origin policy error when all the files are located in the same local directory

Currently, I am facing an issue with my main html file that loads another html file in the same directory using an iframe. There is a button on the main page that interacts with the html file within the iframe through a function: <script> function m ...

javascripthtml

"Ensuring Username Uniqueness in AngularJS and CakePHP3: A Step-by-Step

<input type="email" id="username" dbrans-validate-async="{unique: isUsernameUnique}" ng-model="username" required class="form-control" name="username"> $scope.isUsernameUnique = function(username) { $http.get(url+'/isUsernameUnique&apo ...

javascriptangularjsapiangularjs-directivecakephp-3.0

c3.js Error: The value of b is not defined

Struggling to create a graph using a JSON object generated in PHP. Despite following the documentation example, I keep encountering a TypeError: b.value is undefined in the JS log. The data seems to be structured correctly. for($i = 0; $i < 10; $i++){ ...

javascriptjsonc3.js

Struggling to reveal concealed items on a webpage using jQuery and attempting to cycle through an array without success

Looking to display or hide certain sections on a page based on specific conditions. I want to only show the sections of the page that contain words from the conditionsToShow array. function hideWorkflowConditions() { // initially hide the elements ...

javascriptjquerycss

Troubleshooting issues with setting jQuery Resizable handles

I am currently using jQuery UI Resizable and I am trying to set the handles option after the initialization. Although the API example for initialization works perfectly fine, I am having trouble with the setter method. Is there something that I am overloo ...

jquerysetterresizablehandles

Retrieve the vector3 that points in the direction of the pointerlockcontrols in Three.js

Exploring the feasibility of using the orientation of the yaw object in pointer lock controls as a direction for a raycaster. I've been experimenting with adding some basic shooter functionalities to the code. Despite trying various methods from stack ...

javascriptmaththree.js

Is it possible to execute node.js code within a Java script environment?

I have a javascript code that functions as a discord bot. Typically, to run this bot, I would open the command prompt in the js path and enter node {file_name}.js. Now, let's say I have another javascript code that I want to execute on button click an ...

javascriptc#node.jsdiscord.js

The issue with the sticky menu not functioning properly may be due to the use

Hey there, I'm facing an issue with the Navbar Menu (White Bar) on my website. It is working perfectly fine and sticking to the top as expected. However, the problem arises when I click on the Menu - the Sticky class stops working. Upon investigating, ...

htmlcssmobilenavbarsticky

Retrieve the URL redirected by JavaScript without altering the current page using Selenium

Is there a way to extract the URL I am supposed to be redirected to upon clicking a button on a website, without actually being redirected? The button triggers a complex Javascript function and is not a simple hyperlink. click() method doesn't meet my ...

javascriptpythonhtmlselenium-webdriver

Creating an adaptable grid system in Vue Material

I am working on a project where I am using Vue-Material to display user-inputted cards in a grid layout. While the cards are rendering correctly, I want to optimize the grid to make it flexible, justify the cards, and stagger them in a way that eliminates ...

javascriptvue.jsflexboxmaterial-designvue-material

Using jQuery to display the values of various keys in a nested array

Within my json data, there exists a nested array structured as such: var json.result= [ {"id":"0","category":"Camera","name":"600D Kit", "condition":"OK"}, {"id":"1","category":"Camera","name":"600D Kit", "condition":"missing cap"}, {"id":"2", ...

javascriptjqueryarraysjson

Flexible layout of perfectly square elements

I am currently working on creating a responsive grid layout consisting of squares that are positioned absolutely within their parent element. The goal is to ensure that when the page is resized, the squares scale proportionally with their parent container ...

javascripthtmlcss

What are some ways to personalize the depth graph in amcharts?

I am having trouble modifying the depth graph amchart and I'm struggling to grasp how it functions and how to design it like the image below. Below is the link to the original graph that I am trying to customize: Link https://i.stack.imgur.com/nbWd ...

jqueryhtmlcsstwitter-bootstrapamcharts

Deciphering jQuery serialized information in C#

I'm working with a ListBox on my webpage and trying to send the selected values through an AJAX call to a C# function. Here's what I currently have in place: $('#btnSubmit').click(function() { $.ajax({ type: "POST", ...

c#asp.netjqueryajax

Issue with Angular CDK table: The element 'td' cannot be placed inside of the element 'table'

In my Angular 7 project in Visual Studio 2017, I am attempting to implement the Angular CDK table. While following the official code sample provided here, everything functions perfectly. However, Visual Studio alerts me with warnings stating: Element &apos ...

htmlangularvisual-studiovisual-studio-2017angular-cdk

Customize the appearance of polygons in OpenLayers 2 by adjusting the fill color and opacity

I am aiming to use different fill colors and opacity values for various shapes (such as Triangle, Circle, Square, Hexagon, etc.). Although I can draw the shapes, set different titles, and stroke colors with the code below, I'm struggling to define th ...

javascripthtmlcssopenlayers

The issue of AngularJS failing to bind object properties to the template or HTML element

Just dipping my toes into angularJS, following Todd Motto's tutorials, and I'm having trouble displaying object properties on the page. function AddCurrentJobs($scope){ $scope.jobinfo = [{ title: 'Building Shed', description: ...

javascripthtmlangularjs

Preventing Jquery Append from Adding Previous Elements

I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...

javascriptjqueryhtml

Mastering Angular: Tackling a Directive with Two Parts

I'm working on a directive that's responsible for embedding footnotes into a body of text while providing popover functionality. The text-notes directive is designed to be placed on a parent element, loading content and its related text notes dyn ...

javascriptangularjsdomangularjs-directive