Ne Kr Ne Kr - 18 days ago 7
CSS Question

color active navbar when selected

In my navigationsbar on my website that I am building, the hover is working fine. But when I click a button, the blue color on the font stays on "hjem". At the moment "hjem" call a class called "active" I am not quite sure if I can solve that with CSS, or I have to make some Javascript for that?

At the moment my HTML header looks like this:

<!-- header-container start -->
<div class="header-container">
<header class="header fixed clearfix">

<div class="container">
<div class="row">
<div class="col-md-3 ">
<!-- header-left start -->
<!-- ================ -->
<div class="header-left clearfix">

<!-- header dropdown buttons -->
<div class="header-dropdown-buttons visible-xs">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->

<!-- logo -->
<div id="logo" class="logo">
<a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php"><img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" alt="Mads Vouzalis Kristensen"></a>
</div>

</div>
<!-- header-left end -->

</div>
<div class="col-md-9">
<div class="main-navigation animated with-dropdown-buttons">

<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">

<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav ">

<!-- mega-menu start -->
<li class="active mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php">Hjem</a>
</li>
<!-- mega-menu end -->

<!-- mega-menu start -->

<li class="dropdown mega-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Kompetencer</a>
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">

<div class="row">
<div class="col-sm-4">
<h4 class="title">Design</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/ux-ui.php"><i class="fa fa-angle-right"></i>UX/UI</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/prototyping.php"><i class="fa fa-angle-right"></i>Prototyping</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/web-design.php"><i class="fa fa-angle-right"></i>Web Design</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/grafisk-design.php"><i class="fa fa-angle-right"></i>Grafisk Design</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Webudvikling</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/webudvikling.php"><i class="fa fa-angle-right"></i>Webudvikling</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/php-mysql.php"><i class="fa fa-angle-right"></i>PHP & MySQL databaser</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/wordpress.php"><i class="fa fa-angle-right"></i>Wordpress</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/umbraco.php"><i class="fa fa-angle-right"></i>Umbraco</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/joomla.php"><i class="fa fa-angle-right"></i>Joomla</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Marketing Automation</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/mautic.php"><i class="fa fa-angle-right"></i>Mautic</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/landeside.php"><i class="fa fa-angle-right"></i>Landesider</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 hidden-sm">
<h4 class="title">Oversigt over kompetencer</h4>
<p class="mb-10"><a href=" http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/alle-kompetencer.php"><u>En oversigt over alle mine kompetencer</u></a></p>
<img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project">
</div>
</div>
</li>
</ul>
</li>
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/portfolio.php">Portfolio</a>
</li>

<!-- mega-menu end -->
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a>
<ul class="dropdown-menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/uddannelse.php">Uddannelse</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/erhvervserfaring.php">Erhvervserfaring</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/personlighed.php">Personlighed</a></li>
</ul>
</li>
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/artikler-index.php">Artikler</a>
</li>

<!-- mega-menu start -->
<!-- mega-menu start -->
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kontakt.php">Kontakt</a>
</li>


</ul>
<!-- main-menu end -->

<!-- header dropdown buttons -->
<div class="header-dropdown-buttons hidden-xs ">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->

</div>

</div>
</nav>
<!-- navbar end -->

</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->

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

</header>
<!-- header end -->

Answer

well, you just have to change your active class with your page.

    function set_active($path){
    $a= explode('/', $_SERVER['SCRIPT_NAME']);
    $page = array_pop($a);

    if ($page == $path.'.php'){
        return "active";
    } else {
        return "";
    }
}


<li class="<?= set_active('profile'); ?>">

Well i'm trying to help, i'm not really good, but when i want to put my menu active I do this function. Good luck :D