The changeover of the material is malfunctioning

Can anyone help troubleshoot the issue in this code? When I click on the navbar menu, the content is supposed to move right with a delay of 0.7s, similar to how the sidebar opens with a delay of 0.7s. However, it's not working as expected. I suspect it might be due to a media query or something else. Any suggestions would be greatly appreciated.

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

/* Rest of the CSS code here */

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-NavBar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    <!-- Additional HTML code and scripts -->
  </head>
  <body>

      <!-- Body content here -->

  </body>
</html>

htmlcssvisual-web-developerreact-fullstack

Answer №1

I have made corrections to your code.

The CSS transitions are not functioning flawlessly because you are utilizing different CSS properties for the sidebar and content sections to display these transitions.

The issue arises from manipulating the CSS property of the sidebar as left -100% to 0.

Please adjust the CSS properties to width: 0% to 20% for the sidebar, ensuring that the transition occurs over the same period of time as the content part.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
.header {
  width: 100%;
  height: 70px;
  background-color: #2f3640;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}
.header img {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}
.header h1 {
  line-height: 70px;
  color: #fff;
}
.Content {
  margin-top: 80px;
  width: 100%;
  padding: 20px;
  float: right;
  transition: all 0.7s;
}
.Content img {
  width: 100%;
  max-width: 700px;
  display: block;
  margin: auto;
}
.Content p {
  text-align: justify;
}
.Sidebar {
  width:0%;
  height: 100%;
  position: fixed;
  top: 70px;
  background-color: #353b48;
  left:0;
  transition: all 0.7s;
  overflow: hidden;
}
.Sidebar ul {
  list-style: none;
}
.Sidebar ul li {
  border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.Sidebar ul li a {
  display: block;
 text-decoration none;
  color: #fff;
  font-size: 20px;
  padding: 15px 25px;
 transition: .4s;
}
span {
  margin-left: 15px;
}
.Sidebar ul li a:hover {
  border-left: 10px solid white;
}
.social {
  margin-top: 200px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 30px;
  border-bottom: 2px solid rgba(255, 255, 255, .1);
  border-top: 2px solid rgba(255, 255, 255, .1);
  padding: 15px 25px;
}
i {
  font-size: 30px;
  color: #fff;
 transition: .2s;
}
i:hover {
  transform: scale(1.2);
  color: green;
}
.show-btn, .hide-btn {
  font-size: 35px;
  color: #fff;
  position: fixed;
  top: 15px;
  left: 50px;
}
#chk {
  position: absolute;
  visibility: hidden;
  z-index: -10;
}
.hide-btn {
  opacity: 0;
}
 #chk:checked ~ .Sidebar {
 width: 20%;
}
 #chk:checked ~ .show-btn {
 opacity: 0;
}
 #chk:checked ~ .hide-btn {
 opacity: 1;
}
 #chk:checked ~ .Content {
 width: 80%;
}
 @media(max-width: 768px) {
   .Sidebar {
   width: 100%;
   text-align: center;
  }
   .Sidebar ul li a:hover {
   border-left: 30px solid white;
  }
   .header h1 {
   display: none;
  }
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-NavBar</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  </head>
  <body>
    <div class="header"> <img src="../images/fullstackLogo.png" alt="logo-img">
      <h1>FullStack</h1>
    </div>
    <input type="checkbox" name="" id="chk">
    <label for="chk" class="show-btn"> <i class="fa fa-bars"></i> </label>
    <label for="chk" class="hide-btn"> <i class="fa fa-times"></i> </label>
    <div class="Sidebar">
      <ul>
        <li><a href="#"><i class="fa fa-home"><span>Home</span></i></a>
          <About/li>
        <li><a href="#"><i class="fa fa-user"><span>About</span></i></a></li>
        <li><a href="#"><i class="fa fa-tasks"><span>Services</span></i></a></li>
        <li><a href="#"><i class="fa fa-rss"><span>Blog</span></i></a></li>
        <li><a href="#"><i class="fa fa-id-card"><span>Contact</span></i></a></li>
      </ul>
      <div class="social"> <a href="#"><i class="fa fa-facebook-square"></i></a> <a href="#"><i class="fa fa-youtube-square"></i></a> <a href="#"><i class="fa fa-instagram"></i></a> </div>
    </div>
    <div class="Content"> <img src="../images/laptop1.jpg" alt="body-img">
      <p> Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipiHomesicing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
        culpa qui officia deserunt mollit anim id est laborum. </p>
    </div>
  </body>
</html>

Kindly click on 'full page' to view the corrected output

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

Prevent PHP from redirecting during an HTML file upload

Is there a way to prevent the page from redirecting to the upload php file when the upload button is clicked? I'm looking for a solution within the code below. <form id="myForm" action="http://example/DB_1/AccessWeb/file_upload.php" method="post ...

phphtml

Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...

htmlcssbootstrap-4

Tips to prevent caching in the web console while reviewing the code document

Currently troubleshooting a PHP file with a syntax error using Firefox web console. I ensured the Disable Cache option is set and observed that changes to the file take effect immediately. However, despite displaying the syntax error in the console, clicki ...

phphtmlweb-console

Using a loop to alter the selected value of a dropdown menu with jQuery

Presently, I am using a dropdown menu that displays all the years from 1970 to the current year. Currently, this functionality is achieved through embedded JavaScript within the HTML. My aim is to achieve the same result using an external file and jQuery, ...

javascriptjqueryhtml

Arrange the side by side display of uploaded image previews

Could someone please assist me with aligning my image upload preview in a row, similar to a brand/partners slider? The current preview output is not displaying as desired. Here is the code I have: <div class="image-gallery"> <div class ...

htmljquerycssimageupload

Suddenly, the Bootstrap CSS appears to have ceased functioning

Here are some of the questions I've already checked out: Bootstrap JavaScript not functioning Twitter Bootstrap dropdown suddenly not operational Comprehensive list of possible issues causing a CSS file to fail All of a sudden, my Bootstrap sty ...

javascriptcssasp.net-mvctwitter-bootstraptwitter-bootstrap-4

creating custom HTML elements in Rails forms

As a newcomer to Rails, I have scoured the internet and books for information on creating custom forms in Rails with no success. I am accustomed to writing my own HTML tags and feel comfortable doing so. I prefer not to rely on libraries like JSF (from JAV ...

htmlruby-on-railsrubycustom-component

Tips for generating more compact CSS files to simplify your development workflow

At the moment, I have included two CSS files within my <head> tags: <link rel="stylesheet" href="/stylesheets/init.css"> <link rel="stylesheet" href="/stylesheets/layout.css"> The init.css file is used for resetting elements and definin ...

csshtmlhyperlinkstylesheet

Having trouble with tabs in jQuery?

I'm having trouble setting up tabs in a reservation form with 3 tabs that include text boxes for user input. I can't seem to get it working properly and I'm not sure where I've gone wrong. Could it be due to the placement of the content ...

javascriptjqueryhtmlcssjquery-ui-tabs

Utilizing React to highlight buttons that share the same index value upon hover

I have some data in a JavaScript object from a JSON file, where certain entries have a spanid (number) while others do not. I've written React code to highlight buttons with a spanid on hover, but I'm looking for a way to highlight or change the ...

javascriptcssreactjs

What is the best method for transforming this table design into a div structure?

After being told by a friend to try using the div layout, I've been struggling to make it work for my needs. My goal is to achieve the layout shown in the diagram below: +-----------------------------------------+ | Fixed Height = 50 ...

htmlcss

How to vertically center Bootstrap 4 columns while maintaining uniform height

Having trouble with aligning bootstrap 4 columns' height and vertical alignment? Check out this JSFiddle to see the issue. I'm working on designing a layout with items in both desktop and mobile views, all within borders. The challenge lies in ...

htmlcssflexboxbootstrap-4

When I test my jQuery scripts in jsfiddle, they run smoothly. However, they do not seem to work properly when I

My code is almost perfect, but the jQuery function is giving me trouble. It works fine in jsfiddle, but for some reason, it's not functioning in my HTML file. I don't believe extra characters are being added when copying from the HTML file. I hav ...

javascriptjqueryhtmlcss

Scroll downwards to reveal the hidden div element on an HTML page

How can we implement a Snapchat-inspired feature in a web application using AngularJS? The idea is to have a div appear when the user scrolls down or pulls the screen down, and then have it pushed back up when they scroll back up. This functionality is si ...

javascripthtmlcssangularjs

Customizing Bootstrap styles with a custom CSS file

Currently, in my Django project, I am attempting to customize the base.html file which is utilizing the default bootstrap.min.css by replacing it with a custom.css file like so: base.html: <body id="bootstrap-overrides"> custom.css: #bootstrap-ov ...

cssdjangooverriding

How to make CSS hover effect stay even after the mouse is no longer hovering

I've come across a challenge that is new to me in my journey as a web designer. As a beginner, I recently incorporated the CSS hover feature on a div element within my webpage. Upon hovering over this div, an additional image is revealed; however, whe ...

htmlcss

"Learn the techniques for toggling the visibility of a separate iframe through a hyperlink

<div class="category-tab" id="navg"><!--category-tab--> <div class="col-sm-15"> <ul class="nav nav-tabs"> <li class="active" ><a href="link" data-toggle="tab">name</a></li> <li ><a href="#link" dat ...

javascriptjquerycsshtml

Iterating through JSON data and dynamically updating div contents based on the results

A basic HTML page structure is provided below: <li class="slide"> <h1>Hello</h1> <p>This is a test.</p> </li> <li class="slide"> <h1>Hello Again</h1> <p>This is ...

javascriptjqueryhtmljson

Unable to replicate the functionality of the tab key using jQuery for the enter key

How can I focus on the first input ('Qtd on the table') after pressing enter on the 'Buscar' input? I've tried various solutions like $(this).nextAll('input').first().focus(); $(this).next('input:text').focus ...

javascriptjqueryhtml

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

htmlcsshover