CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapnavbar
Haag
Haag

Reputation: 31

How to make .icon-bar and .navbar-toggle's border change color when active?

When my navbar is collapsed, I want the burger-/collapsed-menu to change color when clicked/active. Just like on Youtube, where the menu turns red when active https://www.youtube.com

I tried coding some things here and there and researching, but nothing really works for me. I have only managed to make my .navbar-toggle change color on active, but that aint what I need.

HTML

<!DOCTYPE html>   
<html lang="en">

<head>
    <title>KLF | Forside</title>

    <?php include "top-app.php"?>
</head>


<body>

<div class="row hidden-xs">    
    <div class="navbar-fixed-top">   
        <div class="navbar">
            <ul>
                <li><a class="active" href="index.php">NYHEDER</a></li>
                <li><a href="holdet.php">HOLDET</a></li>
                <li><a href="kampe.php">KAMPE</a></li>
            </ul>   
            <a href="index.php"><img src="images/klf_logo.png" class="logo-knap"></a>  
            <ul>
                <li><a href="support.php">SUPPORT</a></li>
                <li><a href="om-klf.php">OM KLF</a></li>
                <li><a href="kontakt.php">KONTAKT</a></li>
            </ul>
        </div>
    </div>
</div>    

<div class="visible-xs">    
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.php"><img style="margin-right: -56px;" src="images/klf_logo.png"></a> 
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">  
            <ul>
                    <li><a class="active" href="index.php">NYHEDER</a></li>
                    <li><a href="holdet.php">HOLDET</a></li>
                    <li><a href="kampe.php">KAMPE</a></li>
                <li><a href="support.php">SUPPORT</a></li>
                <li><a href="om-klf.php">OM KLF</a></li>
                <li><a href="kontakt.php">KONTAKT</a></li>
            </ul>

  </div>
  </div>
</div>      
</div>    

    <div class="hej" style="height:3000px;"></div>

    <div class="container"></div>

    <?php include 'bot-app.php'?>

</body>

</html>

CSS 

    body {
    background-color: #FFFFFF;
    margin: 0;
    font-family: "open sans"
}



/* MENU/NAV  MENU/NAV  MENU/NAV  MENU/NAV  MENU/NAV */
.navbar {
    border: 1px solid transparent;
    height: 91px;
    margin: auto;
    z-index: 1000;
    box-shadow:  0px 1px 14px #A4ABB0;
    background-color: #FFFFFF;
    font-size: 15px;
    text-align: center;
}

.navbar ul {
    padding: 0;
    list-style-type: none;
    display: inline-block;
    margin: auto;
}

.navbar ul>li {
    float: left;
    display: inline;
}

.navbar ul>li>a {
    color: #A4ABB0;
    padding: 42px 29px 23px 29px;
    text-decoration: none;
    text-transform: uppercase; 
    font-weight: bold;
    border-bottom: 5px solid #FFFFFF;
}

.navbar .active {
    color: #208AF0; 
    border-bottom: 5px solid #208AF0;
}

.navbar ul>li>a:hover {
    color: #208AF0;
    border-bottom: 5px solid #208AF0;
}

.navbar a>img {
    position: relative;
    display: inline-block;
}



/* MENU/NAV COLLAPSED */
.highlight {
    color: #208AF0;
}

.navbar-default .navbar-toggle {
  border-color: #A4ABB0;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #A4ABB0;
}

JS

$(document).ready(function () {
    function CloseNav() {
        $(".navbar-collapse").stop().animate({'height': 0},300, function () {
            $('.navbar-collapse').removeClass('in').addClass("collapse");
        });
        $(".navbar-toggle").stop().removeClass('collapsed');
    }

$('html').click(function (event) {
    var clickover = $(event.target);
    var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
    if (_opened === true && !clickover.hasClass("navbar-toggle")) {
         $('.navbar-toggle').toggleClass('highlight');
        CloseNav();
    }

});

$('.navbar-toggle').click(function() {
  $(this).toggleClass('highlight').blur();
});
});

It would mean a lot if you could help :)! The active color im trying to give the border and the icon-bars is #208AF0.

Upvotes: 1

Views: 7319

Answers (1)

zgood
zgood

Reputation: 12621

Try updating you .navbar-toggle css styles to this:

.navbar-default .navbar-toggle.collapsed {
  border-color: #A4ABB0;
}

.navbar-default .navbar-toggle.collapsed .icon-bar {
  background-color: #A4ABB0;
}

.navbar-default .navbar-toggle{
 border-color:#208AF0 ;
}
    .navbar-default .navbar-toggle .icon-bar{
       background-color:#208AF0;
    }

See this fiddle.

Upvotes: 1

Related Questions