Problem with the menu and "active" class

Kirby 2 Solved ✅
1

hello,

iam new to kirby and try to create my first project with it. I have integrate bootstrap to this project, but
the active class dosn´t work. It is add to the menu but the style dosn´t show as active. Can anyone help me please?

2

Could you please post the code of your menu snippet? Otherwise it’s really hard to guess what’s wrong :wink:

Did you make any modification to the bootstrap styles?

3 
<?php

// main menu items
$items = $pages->visible();

// only show the menu if items are available
if($items->count()):

?>

<nav class="navbar navbar-default navbar"  role="navigation">
          <div class="container">
            <div class="navbar-header  page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-4">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
           
            </div> 
            <div class="collapse navbar-collapse" id="navbar-collapse-4">
                <ul  id="nav" class="nav navbar-nav navbar-left navi-text-color">
    <?php foreach($pages->visible() as $p): ?>
    <li><a <?php e($p->isOpen(), ' class="active"') ?> href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a></li>
    <?php endforeach ?>
                </ul>
            </div> 
       </div>     
    </nav>
<?php endif ?>
4

thats the code from the Kirby snipped section and i added the bootstrap syntax to it. In my CSS i have change just this:

5 
    .navbar-default {
	border-radius: 0px;
	text-transform: uppercase;
	top: 100px;
	border: 0;
	background-color: #ffffff;
	border-bottom: thin solid #cccccc;
	border-top: thin solid #cccccc;
	padding: 0 !important;	
}

.teaser-text{
	position: absolute;
	top: 30px;
	z-index: 300;
}

.footer {
	margin-top: 50px;
	min-height: 60px;
	padding-top: 10px;
	border-top: thin solid #cccccc;
}


.navbar {
	padding: 0 !important;
	margin: 0 !important;
}

.main {
	width: 100%;
	position: absolute;
	top: 150px;
min-height: 350px;
border:  0 !important;
}

.header {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 9999;
	height: 152px;
}







.row {
	margin: 10px 0 !important;	
}

.navbar-nav > li > a {
/* color: #e8be74 !important; */
    /* font-size: 13px !important; */
    /* font-family: 'Oswald', sans-serif !important; */
	
}

.inhalt{
	margin-bottom: 0px !important;
}


.navbar-nav > li:first-child > a {

	padding-left: 0 !important;
}






.container {
	padding-left: 0 !important;
	padding-right: 0 !important;	
}



.navbar-collapse {
	padding-left: 0 !important;
}


.navbar-nav > li > a:active {

	color: #ff55ff !important;
}
6

I think the active class needs to be attached to the <li> tag and not to the <a> tag.

7

Try

.navbar-nav > li > a.active { ... }

If you assign the active class to the li tag as proposed by @flokosiol, you need to modify your css:

.navbar-nav > li.active > a { ... }
8

That’s right. My advice was based on the bootstrap example: http://getbootstrap.com/components/#navbar

9

thx flokosiol :slight_smile: Now it works fine. Just added the active class to the li