I am currently facing challenges in successfully setting up my title and ensuring that the menu animation runs smoothly and works effectively

I'm struggling to solve these basic problems:

1. The text animation in the menu disappears when closing it, but I want it to appear like it does when opening.

2. I need the menu header text animation to be delayed so it doesn't overlap with the menu box icon.

3. How can I make the image appear right next to the title?

4. Can the main title be bootstrapped to resize for different screen sizes and mobile?

5. The contact button at the bottom should show a tooltip when hovered over, similar to other parts of the menu.

6. How do I make the contact section adjust to the screen size and stay fixed at the bottom?

Any help or guidance would be greatly appreciated. Thank you.

This is my first time asking a question on Stack Overflow, so please forgive me if I'm not doing it correctly.

Here's the codepen link, although the menu doesn't open in the pen for some reason - it works when copied into VS Code:

https://codepen.io/Jaidxb/pen/RwgXEJE

<p>It's frustrating trying to include code here, so this will suffice.</p>
htmlcssbootstrap-4

Answer №1

Please review the following updates and let me know if they are helpful:

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@100;300;400&family=Rubik:wght@700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
font-family: 'Roboto Mono', monospace;
}
.sidebar{
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 78px;
  background: #151516;
  padding: 6px 14px;
  z-index: 99;
  transition: all 1s ease;
}

.sidebar.open{
  width: 250px;
}

.sidebar .logo-details{
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
}

.sidebar .logo-details .icon{
  opacity: 0;
  transition: all 0.5s ease;
}

.sidebar .logo-details .logo_name{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 1s linear;
  transition-delay: 1s;
  font-family: 'Roboto', sans-serif;
}

.sidebar.open .logo-details .icon,
.sidebar.open .logo-details .logo_name{
  opacity: 1;
}

.sidebar .logo-details #btn{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 22px;
  transition: all 0.4s ease;
  font-size: 23px;
  text-align: center;
  cursor: pointer;
  transition: all 0.5s ease;
}

.sidebar i{
  color: rgb(255, 255, 255);
  height: 60px;
  min-width: 50px;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
}

.sidebar .nav-list{
    margin-top: 1%;
    height: 96%;
    position: relative;
}

.sidebar li{
  position: relative;
  margin: 8px 0;
  list-style: none;
}

.sidebar li .tooltip{
  position: absolute;
  top: -20px;
  left: calc(100% + 15px);
  z-index: 3;
  background: #fff;
  color: #000;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: 0s;
}

.sidebar li:hover .tooltip{
  opacity: 1;
  pointer-events: auto;
  transition: all 0.4s ease;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar.open li .tooltip{
  display: none;
}

.sidebar li a{
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.5s ease;
  background: #111111;
}

.sidebar li a:hover{
  background: #FFF;
}

.sidebar li a .links_name{
  color: #fff;
  bottom: 20px;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  width: auto;
  max-width: 0%;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 0.5s linear;
}
...

<!DOCTYPE html>
<!-- Created by CodingLab |www.youtube.com/c/CodingLabYT-->
<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8">
        <title> Responsive Sidebar Menu  | CodingLab </title>
        <link rel="stylesheet" href="style.css">
        <!-- Boxicons CDN Link -->
        <link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffe8f9f3fffe">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
        <link href='style.css' rel='stylesheet'>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
<body>
  ...
  </section>

  <script src="script.js"></script>
</body>
</html>

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

Stopping jQuery fadeOut from setting the display property to 'hidden'

I am currently working on a project that involves creating a lightbox effect. I am using jQuery's fadeIn and fadeOut functions to display enlarged div elements. However, I have encountered an issue - when I use fadeOut on the enlarged div, the smaller ...

jqueryhtmlcss

What causes the slight shifting of on-screen elements when the doctype is removed from an HTML document?

During the process of converting from HTML4 to HTML5, I compared my html4 and html5 pages and noticed that removing deprecated elements after the doctype declaration was causing slight movements in on-screen elements. For example, in the code snippet below ...

csshtmldoctype

Dynamically insert textboxes into a form by leveraging the power of the Jade template engine

Looking for a solution to a simple requirement that doesn't seem to have a clear answer online. I need a combobox on my jade page that accepts numbers as input. When the user selects a number, I want the page to refresh and display that many textboxes ...

javascripthtmlajaxpug

Update text based on the status of a boolean variable in AngularJS

I am creating a container using ng-repeat, and here is the corresponding HTML code: <div class="mission_box clearfix" ng-repeat="mission in missions"> <img src="images/tick_patch.png" class="expired_img"> <h2>{{mission.name}}< ...

javascripthtmlangularjsfilter

Content below divs that are fixed and absolutely positioned

I have a design layout similar to this (a small snippet) and I am facing an issue where the text within .content is not clickable. The positioning of #gradient is fixed due to the background image, and #empty has an absolute position to cover the entire bo ...

css

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

Can anyone guide me on how to show the text above an image contained within a scroll bar, similar to the picture below? Despite trying position property and searching online, I haven't found a solution yet. Your help would be greatly appreciated. ...

htmlcss

Field labels remain visible even when corresponding input fields or selection options are hidden

I have implemented a Bootstrap form with the form-floating class on the controls. An issue arises when certain controls are hidden, causing the labels to remain visible and become congested. Oddly enough, this only occurs with some controls while others b ...

javascriptformsbootstrap-4form-control

Arrangement of Axes in Google Graphs

I have a basic form where users can input data through drop-down selectors. There are 10 questions, each with a rating out of 10. The entered data is then used to generate a Google graph on the same page. Although the graph populates correctly, the axis ...

javascripthtmlchartsgoogle-visualizationbar-chart

I can't seem to figure out why my container is not centered on the screen, despite setting the margins (left and right) to auto

Hey there, I'm a beginner in programming and currently experimenting with the CSS vertical text slide animator feature. However, when the animation runs smoothly, I noticed that the text appears disproportionate and not properly centered on the screen ...

htmlcss

The Dreamweaver code is visible on the design page but does not appear in the live view on the browser

Experimenting with something and created the top section of the site (Logo and menu). However, when I tried to add a table with text, it doesn't appear in the browser preview even though I can see it in the CODE and DESIGN tabs of Dreamweaver. I susp ...

htmlcss

Tips for adjusting the size of Bootstrap 5 card to fit various image sizes responsively

I am facing an issue where I have four images of different sizes placed in 4 cards in a row. Due to the varying heights of the images, the cards appear untidy. I am looking for a way to fix this problem while ensuring that the layout remains responsive. Be ...

htmlcssbootstrap-5

Executing a JavaScript function when a column in a Fusion Chart is clicked

I have two div elements in HTML and I would like to have div2 load when div1 is clicked. Additionally, whenever div2 loads, a back button should also appear to return to div1. Is there a way to achieve this using HTML? <td background="images/bgTd.gif ...

javascripthtml

CSS problem: The vertical line does not extend far enough following the heading

I am encountering a small problem with my CSS code. I am trying to add a Vertical line after my heading using bootstrap utilities, but I am running into an issue. Here is a real-time example of the code I am working on: <!DOCTYPE html> <html l ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Make sure to trigger a callback function once the radio button or checkbox is selected using jQuery, JavaScript, or Angular

I'm looking to receive a callback once the click event has finished in the original function. <input type="radio" onchange="changefun()" /> function changefun() { // some code will be done here } on another page $(document).on('input: ...

javascriptjqueryhtml

Tips for creating a fixed navigation menu that remains visible while scrolling without any items disappearing

I have been working on my web design lately and have been trying to utilize as much CSS as possible without relying on JavaScript. I encountered an issue when designing my navigation menu, which is supposed to remain fixed at the top of the page. Here is a ...

htmlcssmenunavigationfixed

What could be causing the jQuery Mobile DOM element to return 'undefined' when using .val()?

Currently, I am experimenting with Jquery Mobile and facing an issue where my Form elements are returning 'undefined'. I suspect that the problem lies in the fact that my form may not be created when the onclick() function is triggered by the Mem ...

javascriptjqueryhtml

Having trouble importing font-face in scss

Currently, I am working on incorporating a Google font into my project. This is the desired outcome: https://i.sstatic.net/jIO7q.png However, the actual result is different: https://i.sstatic.net/V2KhW.png The code snippet in App.vue looks like this ...

javascriptcssvue.jssassfonts

When using Tailwind CSS with flexbox, elements do not expand horizontally as expected

Is there a way to prevent the label from expanding along with the description in tailwindcss? <script src="https://cdn.tailwindcss.com"></script> <div class="flex items-center"> <div>block</div> <div class="m ...

csstailwind-css

What is the best way to output my PHP code into separate div elements?

I am attempting to place the prints generated by this PHP code into separate HTML divs so that I can customize them using CSS. However, everything is currently being printed into a single div named "body" with the class "hasGoogleVoiceExt". <?php class ...

phphtmlcss

When using Javascript's querySelector, often times it returns null

Here is the HTML code I am working with: <button class="pop-btn"> Pop </button> While I was able to style this button using CSS, I encountered a problem when trying to select it in Javascript: const Population_div_Button=document. ...

javascripthtmlcss