Responsive website hamburger line not showing up-CodePudding

I am trying to get the 'hamburger lines' which you get when you shrink a responsive website. But the lines which I am getting is not stacked like it should be and is instead side by side:

This is the picture of the lines:

Code:

    *
    {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body
    {
        background-image: url(background.jpg);
        background-size: cover;
        background-position : center;
        
        font-family: sans-serif;
    }
    
    .menu-bar
    {
        background: #273044;
        text-align: center;
         
    }
    .menu-bar ul
    {
        display: inline-flex;
        list-style: none;
        color: #fff;
        
    }
    
    .menu-bar ul li
    {
    width: 120px;
    place-items:center;
    display: grid;
    padding: 0px;  
    }
    
    .menu-bar ul li a
    {
    text-decoration: none;
    color: white;   
    }
    .active, .menu-bar ul li:hover
    {
    background-color: #0b56ab;
    height:auto;
    
    height:30px;
    } 
    
    .toggle-button{
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        display: flex;
        flex-direction: none;
        justify-content: space-between;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
    
    }
    
    @media(max-width: 400px){
        .toggle-button{
            display:flex;
        }
        
    }
    
    
    /* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */

    <html>
        <head> 
            <title> Title of page    </title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
        </head>
    
    <!----header----> 
        <body> 
            <div >
                <a href = "#" >
                    <span ></span>
                    <span ></span>
                    <span ></span>
    
                </a>
              
            <ul>
                <li ><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Investors</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Training </a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
    
    
    
            <div class= "grid"> 
                
            </div>
    
        </body>
    </html>

Could you please have a look at my code and advise what I have overlooked?

CodePudding user response：

You didn't specify the flex-direction as column

(I have modified your css code a bit)

*
    {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    body
    {
        background-image: url(background.jpg);
        background-size: cover;
        background-position : center;
        
        font-family: sans-serif;
    }
    
    .menu-bar
    {
        background: #273044;
                display: inline-flex;

        text-align: center;
        align-items:center;

         
    }
    .menu-bar ul
    {
        display: inline-flex;
        align-items:center;
        list-style: none;
        color: #fff;
        
    }
    
    .menu-bar ul li
    {
    min-width: 120px;
    align-self:center;
    display: grid;
    padding: 0px;  
    }
    
    .menu-bar ul li a
    {
    text-decoration: none;
    color: white;   
    }
    .active, .menu-bar ul li:hover
    {
    background-color: #0b56ab;
    height:auto;
    
    height:30px;
    } 
    
    .toggle-button{
        position: absolute;
        right: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
    
    }
    
    @media(max-width: 400px){
        .toggle-button{
            display:flex;
        }
        
    }
    
    
    /* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */

<html>
        <head> 
            <title> Title of page    </title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
        </head>
    
    <!----header----> 
        <body> 
            <div >
                <a href = "#" >
                    <span ></span>
                    <span ></span>
                    <span ></span>
    
                </a>
              
            <ul>
                <li ><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Investors</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Training </a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </div>
    
    
    
            <div class= "grid"> 
                
            </div>
    
        </body>
    </html>

CodePudding user response：

You'll want to change to display block on the a tag and the spans

    .toggle-button{
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        display: block;
        width: 31px;
        height: 21px;
    }
    
    .toggle-button .bar{
        height: 3px;
        width: 100%;
        background-color: white;
        border-radius: 10px;
        display: block;
        margin-bottom: 3px;
    }

CodePudding user response：

Its not a solution for your three lines, but you just could use a SVG:

.hamburger {
  width: 12rem;
  height: 12rem;
}

<svg xmlns="http://www.w3.org/2000/svg"  fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>