'How to make navigation toggle button above body content view in html?

I have my navigation toggle to hide and show side navigation

But if i zoom in the screen, The navigation button will go behind the body content view.

.navigationButton{
    display:inline-block;
    position:absolute;
}

I want to make the navigation button show above the body content view.

Try to use z-index to navigation button but it won't work.

How to solve this issue?

enter image description here

EDIT Navigation button position is above breadcrumbs. but below row class

HTML

<div id="content">
            <div class="breadCrumbs">

                <h2 id="breadhead">Report Management</h2>
                 
                <div class="clearfix"></div>
            </div>
            <div class="frameBody p-4 p-md-5 pt-5">
                <div class="row"> <!--Bootstrap-->
                <div class="col-md-12" style="" >  <!--Bootstrap-->
                <table id="tblBranch" class="table table-bordered " > 
                                <thead>
                                    <tr>
                                            <td>Branch</td>
                                            <td>Group</td>
                                            <td>Name</td>
                                            <td>Address</td>
                                            <td>Bank</td>
                                            <td>No.Acc</td>
                                            <td>City</td>
                                            <td>Action</td> 
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
            </div>

        </div>

CSS

.breadCrumbs {
    padding-top: 4rem;
    padding-bottom: 2rem;
    padding-left: 3rem;
    border-radius: 0px 0px 13px 13px;
    box-shadow: 0px 4px #d4d4d6;
}

.frameBody{
padding-top: 3rem !important;
}



#sidebar .custom-menu {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 0;
    margin-right: -20px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}
htmlcss


Solution 1:[1]

Give the navigation button z-index : +ve number ; and the box section z-index : -ve number ;

Solution 2:[2]

give different z-index to button and box sections.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kiran Kumar
Solution 2 Mazdak

Related Questions