Tips for aligning my icon in the middle when I collapse my sidebar

Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main class but it did not work.

let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
    sidebar.classList.toggle("close")
})
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');


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

.nk-sidebar {
    position: fixed;
    top: 0;
    height: 100%;
    width: 270px;

    display: flex;
    flex-direction: column;
    border-right: 1px solid #e6e5e5;
    padding: 10px;
    transition: 0.3s ease all;
}

.nk-sidebar.close {
    width: 73px;
}

.nk-sidebar .nk-sb-hrd {
    display: flex;
    align-items: center;
    /* flex: 0 0 50px; */
    /* padding: 10px; */
    width: 100%;
    gap: 10px;
    background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.nk-sidebar .nk-sb-nav {
    flex: 1;
}

.nk-sidebar .nk-sb-footer {
    display: flex;
    flex-direction: column;

}

.nk-sidebar .nk-sb-hrd .nk-sb-logo {
    min-width: 50px;
    height: 50px;
    width: 50px;
    padding: 5px;
    border-radius: 10px;
}

.nk-sb-hr-ham {
    height: 40px;
    min-width: 40px;
    border: 1px solid #e6e5e5;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
        background: red;
}

.ham {
    width: 20px;
    height: 2px;
    background: #0057d9;
}
.nk-sb-company {
    font-weight: 600;
    color: #0057d9;
    font-size: 14px;
    white-space: nowrap;
}

.nk-section {
    position: relative;
    left: 270px;
    width: calc(100% - 270px);
    padding: 10px;
    height: 100vh;
    background: yellow;
    transition: 0.3s ease all;
}

.nk-sidebar.close .nk-sb-company {
    opacity: 0;
    pointer-events: none;
}

.nk-sidebar.close ~ .nk-section {
    left: 73px;
    width: calc(100% - 73px);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../materials/fonts/new/fonts.css">
    <link rel="stylesheet" href="../materials/css/dashboard.css">
    <script src="../materials/plugins/jquery-3.6.0.js"></script>
    <link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984938288848598abd9c5dac5d9">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
    
</head>
<body>
<div class="nk-sidebar">
    <div class="nk-sb-hrd">
        <div class="nk-sb-hr-ham">
            <div class="ham top"></div>
            <div class="ham mid"></div>
            <div class="ham bot"></div>
        </div>
        <div class="nk-sb-company">Zybm Business Applications</div>
    </div>

    <div class="nk-sb-nav">

    </div>

    <div class="nk-sb-footer">
asdasd
    </div>
</div>

<div class="nk-section">
    <i class="bx bx-menu"></i>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>

css

Answer №1

You can utilize it in this manner

<div style="
    display: flex;
    justify-content: space-around;
">...CONTENT...</div>

I have made some modifications to your code.

let btnSidebar = document.querySelector(".bx-menu")
let sidebar = document.querySelector(".nk-sidebar")
btnSidebar.addEventListener("click", ()=> {
    sidebar.classList.toggle("close")
})
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');


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

.nk-sidebar {
    position: fixed;
    top: 0;
    height: 100%;
    width: 270px;

    display: flex;
    flex-direction: column;
    border-right: 1px solid #e6e5e5;
    padding: 10px;
    transition: 0.3s ease all;
}

.nk-sidebar.close {
    width: 73px;
}

.nk-sidebar .nk-sb-hrd {
    display: flex;
    align-items: center;
    /* flex: 0 0 50px; */
    /* padding: 10px; */
    width: 100%;
    gap: 10px;
    background: black;
}
.nk-sidebar .nk-sb-hrd .nk-sb-logo {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.nk-sidebar .nk-sb-nav {
    flex: 1;
}

.nk-sidebar .nk-sb-footer {
    display: flex;
    flex-direction: column;

}

.nk-sidebar .nk-sb-hrd .nk-sb-logo {
    min-width: 50px;
    height: 50px;
    width: 50px;
    padding: 5px;
    border-radius: 10px;
}

.nk-sb-hr-ham {
    height: 40px;
    min-width: 40px;
    border: 1px solid #e6e5e5;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
        background: red;
}

.ham {
    width: 20px;
    height: 2px;
    background: #0057d9;
}
.nk-sb-company {
    font-weight: 600;
    color: #0057d9;
    font-size: 14px;
    white-space: nowrap;
}

.nk-section {
    position: relative;
    left: 270px;
    width: calc(100% - 270px);
    padding: 10px;
    height: 100vh;
    background: yellow;
    transition: 0.3s ease all;
}

.nk-sidebar.close .nk-sb-company {
    opacity: 0;
    pointer-events: none;
}

.nk-sidebar.close ~ .nk-section {
    left: 73px;
    width: calc(100% - 73px);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../materials/fonts/new/fonts.css">
    <link rel="stylesheet" href="../materials/css/dashboard.css">
    <script src="../materials/plugins/jquery-3.6.0.js"></script>
    <link href='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffe8f9f3fffee3d0a2bea1bea2">[email protected]</a>/css/boxicons.min.css' rel='stylesheet'>
    
</head>
<body>
<div class="nk-sidebar">
    <div class="nk-sb-hrd">
        <div class="nk-sb-hr-ham">
            <div class="ham top"></div>
            <div class="ham mid"></div>
            <div class="ham bot"></div>
        </div>
        <div class="nk-sb-company">Zybm Business Applications</div>
    </div>

    <div class="nk-sb-nav">

    </div>

    <div class="nk-sb-footer">
asdasd
    </div>
</div>

<div class="nk-section">
    <div style="display:flex; justify-content: space-around;"><i class="bx bx-menu"></i></div>
</div>
<script type="text/javascript" src="../materials/js/dashboard.js"></script>
</body>
</html>

UPDATE : https://codepen.io/agokselb/pen/eYrYBMP

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

What is the best way to retrieve an <a> tag element using Selenium in Python?

I am fairly new to using Selenium and could use some guidance with the following issue. I am attempting to create a birthday bot for Facebook, but navigating through the platform's latest UI has been challenging with JavaScript disabled. I've bee ...

pythonhtmlcssselenium

Incorporate a horizontally rotating preloader to enhance loading experience

I am currently in the process of developing a preloader that rotates an image horizontally. After researching different threads and ideas, I came across a solution that looks something like this: <style> .imageRotateHorizontal{ -moz-anima ...

htmlcssanimation

Is there a way to ensure all images have uniform height using CSS?

I manage a dating platform where I showcase user profiles along with their profile pictures. In case a user doesn't have a profile picture, I show a specific default image. Below is the code snippet: @register.inclusion_tag(filename='accounts/pr ...

pythonhtmlcssdjango

How to ensure the height of an image in a Bootstrap flex row matches the

I just updated to the latest Bootstrap 5.0 beta version and I'm working with this html code snippet: <div> <div class="d-flex flex-row"> <img src="img/funny.png" alt=""> ...

htmlcsstwitter-bootstrapbootstrap-5

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

I am looking for assistance in adding next and previous buttons to this slider. I came across a code snippet on a blog that could be useful, which can be found at .net/dk5sy93d/ ...

javascriptjqueryhtmlcss

Steps for properly inserting a hyperlink:

I'm in need of assistance. I have a grid containing several images that I want to make clickable by adding anchor tags, but when I do this, the images seem to disappear completely. I suspect there's an issue with them being inside the container d ...

htmlcss

CSS not being applied to Next.js HTML pages

Currently, I am utilizing Nextjs and including the flaticon css in _app.js as follows: import '../public/assets/css/flaticon.css'; In the upcoming section, an error is being encountered: @font-face { font-family: 'Flaticon'; src: ...

cssnext.js

Grid layout with columns of equal width in Bootstrap

I'm currently working on creating a dashboard with Angular and Bootstrap 4. I've utilized the equal-width columns from https://getbootstrap.com/docs/4.0/layout/grid and it's functioning well. However, I'm facing an issue where if the lo ...

htmlcssangularbootstrap-4

The child elements are stacking vertically despite implementing inline-block

I have a container with 100% width. I am trying to position three divs inside it next to each other, all with the same height as the parent. Unfortunately, despite setting the display property to inline-block, they are not aligning properly and appear sta ...

htmlcsstwitter-bootstrapbootstrap-4

Creating visually pleasing HTML emails with uniform table data heights

Struggling with Outlook while designing an HTML template. My row has 2 td elements with different content, and setting equal heights is proving to be a challenge. The fixed height on the td causes issues when switching to mobile view in Outlook as text wra ...

htmlcsshtml-email

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

javascripthtmlcssgoogle-chrome-extensionsidebar

Phrases are truncated in the initial line of each ion-item within the ion-list

In Ionic 3, I am facing an issue with my ion-list where the first line inside each ion-item is getting cut off. Specifically, the capital 'A' letter is not entirely visible. Can anyone provide assistance with this? Thank you. Below is my code sn ...

cssionic-framework

Is the Mini Cart button in Woocommerce not aligned properly?

My website was functioning perfectly until yesterday. However, after updating some plugins, the Mini Cart dropdown button started to display in a weird and misaligned manner. Prior to the plugin updates, the button had the following style: background-col ...

csswordpresswoocommerce

What is the best way to implement a CSS transition in React when the state changes, the component remounts, or it re-rend

Imagine having a React functional component with some basic state: import React, { useState } from 'react' import { makeStyles } from "@material-ui/core" export default function Cart() { const [itemNumber, setItemNumber] = useState ...

cssreactjsmaterial-uicss-transitionsreactcsstransitiongroup

Strange HTML pop-up keeps appearing every time I use styles in my code or insert anything with CSS

Recently, I created an OctoberCMS backend setup through my cPanel (I also have one on my localhost). Now, I am trying to add a background image but every time I attempt to do so, a strange HTML popup appears that I can't seem to figure out. Here is th ...

phphtmlcsscontent-management-systemoctobercms

Troubleshooting Google Web Fonts

I seem to be using code similar to what I used before, but it appears that the fonts are not loading. <html> <head> <script src="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:extralight,light,regular,bold"></s ...

htmlcssfont-face

Is there a way to change the color of the menu button to white if the points are not visible?

I have created CSS to style the menu's color and make the buttons change color based on different actions. However, I also want the buttons to match the colors of the points on the map. To achieve this, I set the background color in JavaScript when ge ...

javascripthtmlcss

Switch tab colors when clicked

I'm encountering an issue with two tabs in bootstrap. My goal is for the tab color to change from black to yellow when pressed. I have attached 2 screenshots showing the code and design. Thank you. Second ...

htmlcssbootstrap-4

Encountering an issue when adding SASS Compass Breakpoint to my development project

I'm having trouble integrating breakpoints into my web project. I have SASS, Compass, and breakpoint all installed and I've followed the installation instructions, but it seems to be causing errors. Can someone help me troubleshoot the issue? He ...

cssruby-on-railsbreakpoints

What is the relationship between font size adjustments and the dimensions of the surrounding parent div element?

I've come across an issue that involves having the following code snippet in the body of an HTML file: html, body { width: 99%; height: 99%; margin: 0px; overflow: hidden; } #container1 { display: flex; gap: 2%; width: 90%; heigh ...

htmlcssmargin