Additional padding was included for the jQuery logo

I've been working on fine-tuning my jQuery submenu, but I'm running into some CSS challenges.

Here are the issues I'm facing:

  1. How can I prevent the navigation from adding extra padding at the bottom each time it is reopened?

.sidebar-nav {
  position: fixed;
  float: left;
  width: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #e74c3c;
  color: #aaabae;
  font-family: "Lato";
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

#nav {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

#nav li {
  position: relative;
  margin: 0;
  font-size: 15px;
  border-bottom: 1px solid #fff;
  padding: 0;
}

#nav li ul {
  opacity: 0;
  height: 0px;
}

#nav li a {
  font-style: normal;
  font-weight: 400;
  position: relative;
  display: block;
  padding: 16px 25px;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
  text-decoration: none
}

#nav li a:hover {
  color: #c0392b;
  background-color: #ecf0f1;
}



#nav ul li { 
background-color: #2b303a; 
}

#nav li:first-child { 
border-top: 1px solid #fff;
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}



#nav .fa { margin: 0px 17px 0px 0px; }

.logo {
  width: 100%;
  padding: 21px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#logo{
color: #fff;
  font-size: 30px;
  font-style: normal;
}

.sidebar-icon {
  position: relative;
  float: right;
  text-align: center;
  line-height: 1;
  font-size: 25px;
  padding: 6px 8px;
  color: #fff;
}

.disp {
  opacity: 1!important;
  height:auto!important;
   transition: height 100ms ease-in-out;
  transition-delay: 300ms;
}

javascriptjqueryhtmlcss

Answer №1

Give this a shot:

html,
body {
 font-family: 'Lato', sans-serif;
  height: 100%;
  background: #ecf0f1;
}


a {
  color: #008DE7;
  font-style: italic;
  font-weight: 700;
}


.content {
  min-width: 1260px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.content.sidebar-collapsed {
  padding-right: 65px;
  transition: all 100ms linear;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back {
  padding-right: 280px;
  transition: all 100ms linear;
}

.content.sidebar-collapsed .sidebar-nav {
  width: 65px;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back .sidebar-nav {
  width: 280px;
  transition: all 100ms ease-in-out;
}

.content.sidebar-collapsed .logo {
  padding: 18px;
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
  padding-bottom:0;
  margin:0;
}

.content.sidebar-collapsed-back .logo {
  width: 100%;
  padding: 21px;
  /* height: 136px; */
  box-sizing: border-box;
  transition: all 100ms ease-in-out;
}

.content.sidebar-collapsed #logo {
  opacity: 0;
  transition: all 200ms ease-in-out;
}

.content.sidebar-collapsed-back #logo {
  opacity: 1;
  transition: all 200ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed #nav span {
  opacity: 0;
  transition: all 50ms linear;
}

.content.sidebar-collapsed-back #nav span {
  opacity: 1;
  transition: all 200ms linear;
}

.sidebar-nav {
  position: fixed;
  float: left;
  width: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #e74c3c;
  color: #aaabae;
  font-family: "Lato";
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

#nav {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}

#nav li {
  position: relative;
  margin: 0;
  font-size: 15px;
  border-bottom: 1px solid #fff;
  padding: 0;
}

#nav li ul {
  opacity: 0;
  height: 0px;
}

#nav li a {
  font-style: normal;
  font-weight: 400;
  position: relative;
  display: block;
  padding: 16px 25px;
  color: #fff;
  white-space: nowrap;
  z-index: 2;
  text-decoration: none
}

#nav li a:hover {
  color: #c0392b;
  background-color: #ecf0f1;
}



#nav ul li { 
    background-color: #2b303a; 
}

#nav li:first-child { 
    border-top: 1px solid #fff;
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}



#nav .fa { margin: 0px 17px 0px 0px; }

.logo {
  width: 100%;
  padding: 21px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#logo{
color: #fff;
  font-size: 30px;
  font-style: normal;
}

.sidebar-icon {
  position: relative;
  float: right;
  text-align: center;
  line-height: 1;
  font-size: 25px;
  padding: 6px 8px;
  color: #fff;
}

.disp {
  opacity: 1!important;
  height:auto!important;
   transition: height 100ms ease-in-out;
  transition-delay: 300ms;
}

preview here:

Answer №2

I have adjusted the margins to correct some elements with incorrect margins and made modifications to the transitions. Additionally, I have modified the navigation's width, starting at 250px and expanding to 280px after collapsing and expanding again.

Give it a try, I hope it helps :)

html,
body {
 font-family: 'Lato', sans-serif;
  height: 100%;
  background: #ecf0f1;
}


a {
  color: #008DE7;
  font-style: italic;
  font-weight: 700;
}

.content {
  min-width: 1260px;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0px auto;
}

.content.sidebar-collapsed {
  padding-right: 65px;
  transition: all 100ms linear;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back {
  padding-right: 280px;
}

.content.sidebar-collapsed .sidebar-nav {
  width: 65px;
  transition: all 100ms ease-in-out;
  transition-delay: 300ms;
}

.content.sidebar-collapsed-back .sidebar-nav {
  width: 250px;
}

.content.sidebar-collapsed .logo {
  box-sizing: border-box;
  transition: all 200ms;
  overflow:auto;
}

.content.sidebar-collapsed-back .logo {
  width: 100%;
  padding: 21px;
  margin:0;
  box-sizing: border-box;
}

.content.sidebar-collapsed #logo {
  opacity: 0;
  display:none;
  transition: all 200ms;
}

.content.sidebar-collapsed-back #logo {
  opacity: 1;
  display:inline-block;
  transition-delay:500ms;
}

.content.sidebar-collapsed #nav span {
  opacity: 0;
  transition: all 200ms;
}

.content.sidebar-collapsed-back #nav .fa-plus {
  opacity: 0;
  transition: all 200ms;
}

.content.sidebar-collapsed-back #nav .fa-plus {
  opacity: 1;
  transition-delay:500ms;
}  

.content.sidebar-collapsed-back #nav span {
  opacity: 1;
}

.sidebar-nav {
  position: fixed;
  float: left;
  width: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #e74c3c;
  color: #aaabae;
  font-family: "Lato";
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
  transition:all 200ms;
}

#nav {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 20px;
}
...

Answer №3

  1. Make sure the height property of .logo remains consistent whether .content has the .sidebar-collapsed class or not.
  2. The padding for .logo is excessive, leaving little space for the hamburger icon.

Try using alternative methods to center the menu icons instead of relying solely on padding.

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

Customizing the returned data in Jquery autocomplete

I have the following code snippet: $(document).ready(function () { if ($('#au').length <= 0) { return; } var $project = $('#au'); $project.autocomplete({ minLength: 4, source: function (reque ...

javascriptjqueryajaxautocomplete

Conditional statements in jQuery that are based on the current URL

I am working on a scenario where I need the button colors to change based on the page being viewed. The animation is already set up with a default color and an array of other colors. What I am trying to achieve is, when I am on the 'red' page, I ...

jquerystringurl

Struggling with integrating an EJS form to work with a MONGODB database

I'm struggling to wrap my head around how to connect the front end in ejs and submit a form that sends information to the back end. At the moment, I have a file called server.js that renders all my ejs pages and connects to the database. Here is the ...

javascriptnode.jsmongodbexpressejs

Verification code not being returned by Firebase PhoneAuthentication

I attempted to implement phone authentication using Firebase and Angular. I set up the reCAPTCHA verifier and phone number, and then passed it to the firebase.auth.signInWithPhoneNumber() function. However, the function only returned the verification Id ...

javascriptfirebasefirebase-authentication

When attempting to access the submenu in Bootstrap 5 dropdown, it does not slide down as expected upon clicking

Why isn't the rest of the menu expanding downward when I select a submenu? The submenu is already selected, but it hides other items. How can I make it expand downwards? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcssdrop-down-menubootstrap-5

Adjust the height value of each element to match the maximum height within a single line using only CSS

There are 3 divs styled with display:inline-block. I aim to adjust their height values so they match the highest one. The desired effect is demonstrated visually below. Is it doable using only CSS? ----- ----- ----- ----- ----- ---- ...

htmlcss

Changing the string "2012-04-10T15:57:51.013" into a Date object using JavaScript

Is there a way to transform the format "2012-04-10T15:57:51.013" into a Date javascript object using either Jquery or plain Javascript? ...

javascriptjquerydate

Tips for converting API data to DTO (Data Transfer Object) using TypeScript

Here is an array of vehicles with their details. export const fetchDataFromApi = () => { return [ { vehicleId: 1, vehicleType: 'car', seats: 4, wheelType: 'summer', updatedAt: new Date().toISOString }, { vehicleId: 2, vehic ...

javascripttypescriptdto

Connect various inputs in Vue.js so they can be updated simultaneously

I need to have multiple text inputs that are interconnected, so when I change the value of one input, the others should update with the same value. These inputs are being generated dynamically in a loop using v-for as shown below: <tbody> <varia ...

javascripthtmlvue.js

getting information from a JSON array using AngularJS

Looking to extract all images from the imagePath array in the following JSON. While retrieving a single image works fine, encountering difficulties when trying to fetch the entire imagePath array. Any help with this issue would be greatly appreciated. Than ...

javascripthtmlangularjsjson

The grayscale effect is not functioning on the default web browser of an Android device

I have implemented a grayscale effect for an image using the following CSS code snippet: img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\&apo ...

androidhtmlcsssvg

How can I work with numerous "Set-Cookie" fields in NextJS-getServerSideProps?

When working with getServerSideProps, I found a way to set multiple cookies on the client device. This is the code snippet that I used: https://i.stack.imgur.com/Kbv70.png ...

javascriptcookiesnext.js

What is the benefit of using an IIFE in this particular way when constructing a JavaScript library?

Many libraries I've seen use a similar style to define their structure. Upon further inspection, I've noticed that the first self-invoking function is often related to Require.js or AMD systems, with 'factory' as an argument. My curiosi ...

javascriptamdumdmodule-export

"Error 404: The file you are looking for cannot be found on [custom company domain]. Please check

My attempts to retrieve a Google Drive file using its file ID with a service account in NodeJS have been unsuccessful. The requests are failing with an error indicating a lack of access: code: 404, errors: [ { message: 'File not found: X ...

javascriptnode.jstypescriptgoogle-apigoogle-drive-api

Is there a condition for the jQuery getter/setter operation?

I'm facing a situation where I need to dynamically set the URL for a JSON data call based on which element was clicked. Do you have any suggestions on how I can achieve this? One idea that comes to mind is creating a hidden input field and using a fl ...

phpjquery

What prevents certain scenarios from being encapsulated within a try/catch block?

Just attempted to handle ENOENT by using a naive approach like this: try { res.sendFile(path); } catch (e) { if (e.code === 'ENOENT') { res.send('placeholder'); } else { throw e; } } Unfortunately, this method is ineffectiv ...

javascriptexpress

What is the best method for retrieving data from MySQL using Ajax?

I am trying to retrieve data using Ajax, but I keep getting an empty result. Here is the script I am using: <script> function showUser(value) { var values = $(this).serialize(); $.ajax({ url: "test.php", data: { ...

phpjqueryajax

Guide to rounding values retrieved from JSON object using Math.round in Vue.js

I'm currently working on a Vue 3 component using the Composition API that fetches values from a JSON object and displays them on the screen. The component reads data from a local data.json file and returns these values to the template. The JSON file c ...

javascriptjsonvue.jsobjectmath.round

The functionality of CSS columns is not supported in Firefox browser

Currently, I am working on a web page design inspired by Pinterest. However, I have encountered an issue where the columns property is not functioning properly in Firefox. You can find the example I am trying to replicate here. Feel free to test it in Fir ...

htmlcssfirefox

Transforming HTML content in real-time using Express.js

I'm a little uncertain if I understand the concept of Express MVC correctly: If my goal is to create a single page application and dynamically modify the HTML, can Express assist me with this? Or will I only be able to work with static pages that req ...

htmlmodel-view-controllerexpress