Side navigation bootstrap

Question

How can i remove the hamburger from bootstrap's navbar-toggle i want to change it into an X button so that when i click it the sidenav while slide to the left, also if I click inside the red rectangle how to collapse the sidenav? thank you

here is my code below

<!DOCTYPE html>
<html>
<head>
       <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<style>
.indexcity {
  z-index: 99999;
}

body {
    background-color: lightblue;
}

@media screen and (max-width: 767px) {
        #logo{
           text-align: right;
           float: right;
           margin-right: 40%;
        }
        #opt_menu{
            float:left;
        }

      .navbar-collapse{
      background-color:#847e6e;
      position: fixed;
      top: 0;
      transition: all .25s ease-out;
      height: 100%;
      width: 70%;
      right: 800px;
      opacity: 50%;
      box-shadow:0 0 25px #08090a;


    }

    .navbar-fixed-top .navbar-nav>li>a {
    color: #000;
    }  

    .right {
    right: 0 !important;
    left: 0 !important;}


}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{
    max-height: 100%;
}
</style>

</head>


<body>


<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class= "container">
        <a href = "#" class= "navbar-brand" id="logo">Test</a>

        <button class = "navbar-toggle" id="opt_menu">    
           <span class="sr-only">Toggle navigation</span>
           <span class= "icon-bar"> </span>
           <span class= "icon-bar"> </span>
           <span class= "icon-bar"> </span>
        </button>

    <div class = "navbar-collapse" >
            <ul class ="nav navbar-nav navbar-right">

                <li> <a href="#">Link0</a></li>

                <li class ="dropdown">

                        <a href="#" class ="dropdown-toggle" data-toggle ="dropdown">Link1<b class ="caret"></b></a>

                        <ul class = dropdown-menu>
                            <li><a href="#">Link1</a> </li>
                            <li><a href="#">Link2</a> </li>
                            <li><a href="#">Link3</a> </li>
                        </ul>
                </li>

            </ul>
    </div>

    </div>

</div> 



<script>
/*
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}*/
jQuery(function($){
    $('.navbar-toggle').click(function(){
    $('.navbar-collapse').toggleClass('right');
    $('.navbar-toggle').toggleClass('indexcity');
    $('body').toggleClass('changecolor');
    });
});



</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Possible duplicate of [How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?](http://stackoverflow.com/questions/23764863/how-to-close-an-open-collapsed-navbar-when-clicking-outside-of-the-navbar-elemen) — Elliott Sadgamer, Feb 11 '17 at 18:40

score 0 · Answer 1 · edited May 23 '17 at 12:01

For the X sign you can replace:

<button class = "navbar-toggle" id="opt_menu">    
<span class="sr-only">Toggle navigation</span>
<span class= "icon-bar"> </span>
<span class= "icon-bar"> </span>
</button>

with :

<button class = "navbar-toggle" id="opt_menu"> &times; </button>

To collapse the sidenav when you clicked outside of the sidebar,this can be helpful:

How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?

Side navigation bootstrap

1 Answers1