Question 160333 in CSS Question posted in
Some basic documentation can be found here.

How can I make my sidebar menu fully responsive with CSS?

I’ve been following a tutorial on how to make a sidebar menu but when I finished I noticed that some elements of the menu are not responsive, for example, when I try to resize the window or try to visualise it on cellphone screens, the menu items do not resize.

Here is the code in a CodePen so you can visualise it:

CodePen Sidebar Menu

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300&display=swap');
*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Titillium Web', sans-serif;

}
html{
    height: 100%;
}

body{
    background: linear-gradient(
        to left, #43c6ac, #191654
    );
}

.navigation{
    position: fixed;
    inset: 20px 0 20px 20px;
    width: 75px;
    background: #fff;
    transition: 0.5s ;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;

    .menuToggle{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 23px;

        &::before{
            content: '';
            position: absolute;
            width: 30px;
            height: 2px;
            background: #333;
            transform: translateY(-8px);
            transition: 0.5s;
        }

        &::after{
            content: "";
            position: absolute;
            width: 30px;
            height: 2px;
            background: #333;
            transform: translateY(8px);
            transition: 0.5s;
            box-shadow: 0 -8px 0 #333;

        }

    }
    ul{
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;

        li{
            list-style: none;
            position: relative;
            width: 100%;
            height: 60px;
            padding: 0 10px;
            transition: 0.5s;
            
            &.active{
                transform: translateX(30px);

                a{
                    .icon{
                        color: #fff;
                        background: var(--clr);
                        &::before{
                            opacity: 0.5;
                        }
                    }
                    .text{
                        color: var(--clr);
                    }
                }
            }
            
            a{
                position: relative;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                text-align: center;
                text-decoration: none;

                .icon{
                    position: relative;
                    display: block;
                    min-width: 55px;
                    height: 55px;
                    line-height: 60px;
                    transition: 0.5s;
                    border-radius: 10px;
                    font-size: 1.75em;
                    color: #222;
                    &::before{
                        content: "";
                        position: absolute;
                        top: 10px;
                        left: 0px;
                        width: 100%;
                        height: 100%;
                        background: var(--clr);
                        filter: blur(8px);
                        opacity: 0;
                        transition: 0.5s;

                    }
                }
                .text{
                    position: relative;
                    padding: 0 15px;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    color: #333;
                    opacity: 0;
                    visibility: hidden;
                    transition: 0.5s;
                }
            }
        }
    }
    &.open .menuToggle::before{
        transform: translateY(0px) rotate(45deg);

    }
    &.open{
        width: 250px;
    }
    &.open .menuToggle::after{
        transform: translateY(0px) rotate(-45deg);
        box-shadow: 0 0 0 #333;
    }
    &.open ul li.active{
        transform: translateX(15px);
    }
    &.open ul li a .text{
        opacity: 1;
        visibility: visible;
    }
}

I tried to modify the SCSS file and add some snippets but with my limited experience I failed to fix the problem.

Tags:

2

Answers


  1. 0

    The CSS .navigation has a width from 75px. It means on every Breakpoint it has the same size. If you want that the menue get thinner or bigger you need to replace it with a percentual size and handle the rest like this. But work with max-width.

    Login or Signup to reply.
  2. 0

    you have to add below css with media query to target mobile devices on your .navigation.open class.

    @media only screen and (min-width: 320px) and (max-width: 640px) {
       .navigation.open {
        width: 100%;
        left: 0;
        top: 0;
    }  
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search