Someone who sees why all CSS class is "active" on the Home page, but "" (empty) for all other links (Level 2 / subpages) in the menu?

<nav class="navbar-collapse collapse">
   @{
        var root = Model.Content.AncestorOrSelf(1);
        var cssClass = root.Id == Model.Content.Id ? "active" : string.Empty;  
    }
    <ul class="nav navbar-nav">             
        @{
            @* Level 1 start (Home) *@
            <li class="@cssClass"><a href="@root.Url">@root.GetPropertyValue("title", root.Name)</a></li>

            @* Level 2 start (navbar left) *@
            foreach (IPublishedContent page in root.Children)
            {
                if (!page.GetPropertyValue<bool>("umbracoNaviHide") && !page.GetPropertyValue<bool>("umbracoNaviRight"))
                {
                    <li class="@cssClass"><a href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
                }
            }
        }                   
    </ul>
    <ul class="nav navbar-nav navbar-right">
        @{
            @* Level 2 start (navbar right) *@
            foreach (IPublishedContent page in root.Children)
            {
                if (!page.GetPropertyValue<bool>("umbracoNaviHide") && page.GetPropertyValue<bool>("umbracoNaviRight"))
                {
                    <li class="@cssClass"><a href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
                }
            }
        }
    </ul>
</nav>

Have tried also with different names for CSS-variabels for all li-classes, but the result is the same.

Example:

<nav class="navbar-collapse collapse">
    @{
        var root = Model.Content.AncestorOrSelf(1);
     }
    <ul class="nav navbar-nav">             
        @{
            @* Level 1 start (Home) *@
            var cssClassL1 = root.Id == Model.Content.Id ? "active" : string.Empty;  
            <li class="@cssClassL1"><a href="@root.Url">@root.GetPropertyValue("title", root.Name)</a></li>

           @* Level 2 start (navbar left) *@
            foreach (IPublishedContent page in root.Children)
            {
                if (!page.GetPropertyValue<bool>("umbracoNaviHide") && !page.GetPropertyValue<bool>("umbracoNaviRight"))
                {
                    var cssClassL2 = root.Id == Model.Content.Id ? "active" : string.Empty;  
                    <li class="@cssClassL2"><a href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
                }
            }
        }                   
    </ul>
    <ul class="nav navbar-nav navbar-right">
        @{
           @* Level 2 start (navbar right) *@
            foreach (IPublishedContent page in root.Children)
            {
                if (!page.GetPropertyValue<bool>("umbracoNaviHide") && page.GetPropertyValue<bool>("umbracoNaviRight"))
                {
                    var cssClassL2R = root.Id == Model.Content.Id ? "active" : string.Empty;  
                    <li class="@cssClassL2R"><a href="@page.Url">@page.GetPropertyValue("title", page.Name)</a></li>
                }
            }  
         }
    </ul>
</nav>

Anybody who has a solution?

It's because you're doing the conditional outside of the loop. It's only being checked once against the current page instead for each item in the navigation.

var cssClass = root.Id == Model.Content.Id? "active": string.Empty;

Basically is adding up to: "If the user is on the homepage/root set cssClass equal to active otherwise set it to empty".

In your loop you'll want to do something like:

var cssClass = page.Id == Model.Content.Id? "active": string.Empty;

is working on a reply...