HTMl + CSS menu button for responsive

Question

H,i am beginner in Front-end i want to show menu button for mobile (responsive). can anyone help me , how do this ? i think need JavaScript or Query. i find some solution but not working . i am using Django in Back-end. html

div class="header1">
        <div class="header1_box">
            <a href="/" class="logo left"><img src="static/css/covers/logos.png" alt="logo"></a>
            <ul class="content_menu hide_mob" style="position:relative;"></ul>
            <ul class="content_menu hide_mob">
                <li><a href="/" class="active">Horoscope</a></li>
                <li><a href="blog">Blog</a></li>

            </ul>
            <div class="right">
                <a class="mob_menu" id="menu_button"></a>
               
                  </a>
            </div>
        </div>
    </div>

css

.mob_menu {
        float: right;
        cursor: pointer;
        width: 29px;
        height: 29px;
        background-image: url("covers/header_menu.png");
        background-repeat: no-repeat;
        margin: 10px 10px 0 0;
        background-size: 29px
    }
    .mobile_menu {
        width: 100%;
        overflow: auto;
        height: 100%
    }
    .mobile_menu li {
        width: 100%
    }
    .mobile_menu li a {
        color: #fff;
        padding: 13px 15px;
        font-family: font2;
        display: block;
        font-size: 13px;
        border-top: 1px solid #2f41a7
    }

Answer 1

Have you used bootstrap or other responsive plugins? If you only customize the response layout, please refer to css3 @media. For example.

<style> 
@media  (min-width:600px){ 
.trans_menu{
    float: right;
    cursor: pointer;
    width: 29px;
    height: 29px;
    background-image: url("covers/header_menu.png");
    background-repeat: no-repeat;
    margin: 10px 10px 0 0;
    background-size: 29px
  }
}
@media (max-width:400px){ 
.mobile_menu {
    width: 100%;
    overflow: auto;
    height: 100%
}
.trans_menu{
    width: 100%;
    overflow: auto;
    height: 100%
}
.mobile_menu li {
    width: 100%
}
.mobile_menu li a {
    color: #fff;
    padding: 13px 15px;
    font-family: font2;
    display: block;
    font-size: 13px;
    border-top: 1px solid #2f41a7
 }
}

</style>

This is the menu whose class has been modified.(html)

<div class="right">
   <a class="trans_menu" id="menu_button" href="/">button</a>
</div>

Change the page width, the menu will change accordingly.