Sidebar navigation text shifting during transition

I attempted to modify the CSS and JavaScript, but unfortunately, it had no effect and actually caused more issues. I adjusted the position and display properties in the CSS, but it seems that wasn't the root of the problem. If anyone could offer assistance, I would greatly appreciate it.

<div id="mySidenav" class="sidenav">
              <h3>Panels</h3>
              <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
              <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
              <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
              <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
            </div>

 <nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
          <!-- Collapse button -->
          <button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();"  style="z-index: 2">
              <div class="animated-icon"><span></span><span></span><span></span></div>
          </button>
          <!-- Navbar brand -->
          <div class="mx-auto order-0">
              <a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
          </div>
      </nav>

<script>
        function Nav() {
          var width = document.getElementById("mySidenav").style.width;
          if (width === "0px" || width == "") {
            document.getElementById("mySidenav").style.width = "250px";
            $('.animated-icon').toggleClass('open');
          }
          else {
            document.getElementById("mySidenav").style.width = "0px";
            $('.animated-icon').toggleClass('open');
          }
        }
      </script>

.sidenav {
    height: 100%;
    width: 0; 
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #ffffff!important;
    backdrop-filter: blur(15px);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    box-shadow: 0px 0px 8px #000000;
    
  }

 
  .sidenav h3{
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #000000;
    display: block;
    transition: 0.3s;
  }
  .sidenav a {
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 16px;
    color: #000000;
    display: block;
    transition: 0.3s;
  }

  .sidenav a:hover {
    color: #ffffff;
    background-color:#000000;
    padding:12px;
  }

  .sidenav .item i{
    margin-right: 15px;
  }

  .sidenav::-webkit-scrollbar { 
    display: none; 
  } 
  
    .animated-icon {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    }
    
    .animated-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    }
    
    .animated-icon span {
    background: #f3e5f5;
    }
    
    .animated-icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 8px;
    }
    
    .animated-icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
    }
    
    .animated-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 21px;
    left: 8px;
    }
    button {border:none !important;}
    button:focus{outline: none;}
  
    .center {
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      text-align: center;
      vertical-align: middle;
    }

i tried to change the css and and the javascript but it did changed at all, just gave me more problems, i did change position and display in the css, but dont seem this is the problem, someone help me pls

javascripthtmlcssbootstrap-5

Answer №1

If you're looking for a way to avoid using JQuery, here's a simple code snippet that might help:

        
function Nav() {
  var width = document.getElementById("mySidenav").style.width;
  var icon = document.querySelector(".animated-icon");
  if (width === "0px" || width == "") {
    document.getElementById("mySidenav").style.width = "250px";
    icon.classList.toggle('open');
  } else {
    document.getElementById("mySidenav").style.width = "0px";
    icon.classList.toggle('open');
  }
}
body{
  margin:0;
}
.sidenav {
    height: 100%;
    width: 0; 
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #ffffff!important;
    backdrop-filter: blur(15px);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    box-shadow: 0px 0px 8px #000000;
    
  }

 
  .sidenav h3{
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #000000;
    display: block;
    transition: 0.3s;
  }
  .sidenav a {
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 16px;
    color: #000000;
    display: block;
    transition: 0.3s;
  }

  .sidenav a:hover {
    color: #ffffff;
    background-color:#000000;
    padding:12px;
  }

  .sidenav .item i{
    margin-right: 15px;
  }

  .sidenav::-webkit-scrollbar { 
    display: none; 
  } 
  
    .animated-icon {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    }
    
    .animated-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    }
    
    .animated-icon span {
    background: #f3e5f5;
    }
    
    .animated-icon span:nth-child(1) {
    top: 0px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon span:nth-child(2) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon span:nth-child(3) {
    top: 20px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    }
    
    .animated-icon.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0px;
    left: 8px;
    }
    
    .animated-icon.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
    }
    
    .animated-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 21px;
    left: 8px;
    }
    button {border:none !important;}
    button:focus{outline: none;}
.hamburger-button{
  margin:25px;
  background-color: rgba(0,0,0,0);
}
    .center {
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      text-align: center;
      vertical-align: middle;
    }
.navbar-toggler{
  position:relative;
  z-index:2;
}
<div id="mySidenav" class="sidenav">
  <h3>Painéis</h3>
  <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
  <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
  <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
  <div class="item"><a href="#"><i class="fas fa-desktop"></i>Dashboard</a></div>
</div>
 <nav class="navbar navbar-light bg-light" style="box-shadow: 0px 0px 8px #000000;">
   <!-- Collapse button -->
   <button class="navbar-toggler hamburger-button" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation" onclick= "Nav();"  style="z-index: 2">
     <div class="animated-icon"><span></span><span></span><span></span></div>
   </button>
          <!-- Navbar brand -->
          <div class="mx-auto order-0">
  <a class="navbar-brand mx-auto" href="#">POWER BI CBMAM</a>
          </div>
      </nav>

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

CSS does not have the capability to style child elements

Having trouble changing the text for child elements when applying CSS classes to parent elements. Is there a specific reason why this is happening? Take a look at my current code: <Box //not affecting all child elements ...

cssreactjsmaterial-ui

the mobile website is not properly aligned on a horizontal axis

As I work on creating a mobile version of my website, I've come across a challenge: The entire site fits perfectly on the computer at a browser width of 480px, but when viewed on my mobile phone (regardless of the browser used), it leaves space on the ...

javascripthtmlcssmobileweb

Adjusting the width of the header in Wordpress themes like Genesis and Foodie Pro

Struggling with the header appearance on my website. I want the blue section to be full width while keeping the logo and navigation the same width as the content area (1040px). I'm new to Wordpress and unsure how to make this adjustment. Someone sugg ...

csswordpress

The issue with the AngularJS filter seems to be arising specifically when applied to

My AngularJS filter isn't functioning properly when used with an Object. Here's the View: <input type="text" ng-model="searchKeyUser.$" placeholder="Search Keys" class="form-control"><br> <ul class="list-group"> <li cla ...

javascriptarraysangularjsfiltercakephp-2.0

How to position an image to the bottom of a column in Bootstrap 5

I have a question regarding aligning an image to the bottom of a column in Bootstrap 5. Below is an example HTML snippet using Bootstrap 5's CDN to create two columns, each featuring an image of London with the img-fluid class for responsive sizing: ...

htmltwitter-bootstrapbootstrap-5

Populate a string with HTML elements

I need help loading a string into UIwebview. The text is plain coming from the database. I want the webview to display the text in bold. How can I add an HTML <b> tag or any other tag to format this simple text sourced from the database? ...

iphonehtmluiwebview

The tooltip in chart.js stubbornly holds onto past data even after it's been

Utilizing chart.js, I have implemented a feature where a tooltip displays when a user hovers over the chart successfully. However, I encountered an issue. I added an option for users to un-check data-points, which works correctly. But now, the tooltip fun ...

javascriptjquerychartschart.jschart.js2

Tips for showcasing timestamps within a Vue.js/Firebase application

In my current project, I am working on developing a chat application using Vue.js and Firebase. The codebase I am referring to can be found at https://github.com/jsfanatik/vuestacks-chat-vue-firebase. I have successfully implemented the Chat component to a ...

javascriptfirebasevue.jsgoogle-cloud-firestoremomentjs

The valueChanges event of a Reactive Form is activated whenever options from a datalist are selected

Whenever a user types into the input field, I am making an API call to retrieve and display data in a datalist for autocompletion (typeahead). control.get('city').valueChanges.pipe( map((searchText) => searchText.trim().toLowerCase()), fi ...

javascripthtmlangularrxjs

struggling with managing an array of Vue3 refs

Having an issue with handling vue3 refs, specifically when retrieving data from Firestore. When logging the [documents], everything seems to work fine. However, I run into errors when trying to access values from an array within a document. For example, ...

javascriptvue.jsvuejs3vue-composition-api

Column div being obscured by footer

My footer is causing overlap issues with the div above it on my mobile website. Here's a visual representation: Current view on my phone: https://i.stack.imgur.com/RpvWM.png Desired view: https://i.stack.imgur.com/KHVcm.png The code for the are ...

htmlcss

Uh-oh! It seems like there is a deployment error in NextJS on Vercel. The issue is that Nested

Suddenly, my middleware ceased to function properly during deployment. The error message states: > Build error occurred NestedMiddlewareError: Nested Middleware is not allowed, found: pages/_middleware Please relocate your code to a single file at /midd ...

javascriptreactjsnext.jsvercel

"Implementing a Redux structure to enhance audio player functionality and effectively manage error

Imagine I am in the process of developing an audio player that includes a control panel for users to pause/play the currently selected track, along with the actual audio players. This involves actions such as pausing/playing the track, with the audio playe ...

javascriptreactjsreduxreact-redux

Uploading Files within Angular FormArray

I am facing an issue with my formArray which contains file upload inputs in each element. Whenever I upload an image in one input, it changes the values of other file inputs in different rows. https://i.stack.imgur.com/3haZW.png Current Behavior: Uploadi ...

javascriptangulartypescriptangular6angular-reactive-forms

Attempting to increase a variable by 1, only to find that it appears to be doubling on its own

As I work on developing a quiz, I encounter an issue with my code. When I click on the question_holder div, variable x seems to be doubling instead of incrementing as expected. The value of x is supposed to increase by one each time, but it appears to ski ...

javascriptjquery

The date format in AngularJS is not being displayed correctly according to the request

My goal is to retrieve the date in the format of dd/MM/yyyy and pass it along to my URI. However, I am encountering an issue where the date is not being passed in the requested format. Below is the snippet of my HTML code: <script type="text/ng-templat ...

javascripthtmlangularjsdate

Incomplete filling of the SVG element is observed

Trying to animate SVG text to display only the outer stroke of each letter initially, followed by filling the interior with color. However, after the animation finishes, there are unfilled spaces left. Is there a property that can be applied to the SVG o ...

cssanimationsvg

While iterating through a dynamically generated JSON data array, omitting the display of the ID (both title and value) is preferred

I am working with a JSON data Object and using $.each to dynamically retrieve the data. However, I want to display all values except for one which is the ID. How can I achieve this and prevent the ID from being displayed in the HTML structure? Thank you. ...

javascriptjqueryarraysjsondata-objects

What is the sequence in which the browser handles CSS?

I have a specific class that is being styled in multiple places on my website. I am curious about the order in which the browser reads and applies these different styles. Can you explain this process to me? Inline Style <div class="yellowtag" sty ...

css

Eliminate the loading spinner from the tab on Google Chrome

Recently, I've been working on a project to create a website and have been searching for some innovative ideas. One interesting discovery I made was . What caught my eye was the unique feature where clicking on any tab did not result in the typical sp ...

jqueryhtmlcssgoogle-chromespinner