DarkLink DarkLink - 1 month ago 18
HTML Question

HTML/CSS - Scrolling Nav not Allowing more than one Active Link on NAV

I am facing a weird problem, that I can't understand what is causing this.. maybe someone can help me? I tried to apply Scrolling Nav framework on my website..

Everything is already set like I want, design and stuff, the only problem is that I can't have a specific element of a dropdown in navbar to be active (selected).

I have my normal navbar links and then on the last menu-link I have a link that contains a dropdown with a list of languages that user can select to change the website language.

The problem is that I set promatically the class active to the dropdown element corresponding to the selected language of the page and in my final html I just see English , it doesn't contain the "active" tag on li's classes, why is this happening?

It's because I can't have more than one item active in the navbar? I tried adding "active" using Chrome Inspect Element and I could saw the 'active class' differences on the style...

Here is my html code, it may help:

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

<!-- Navigation -->
<nav class="nav-justified navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
@*<div class="container">*@
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="navbar-ex1-collapse">
<ul class="nav nav-justified">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>


<li>@Html.ActionLink(@Model.Bio[CultureInfo.CurrentCulture].ToString(), "Index", "Home", null, new { @class = "navBarLinks page-scroll", @href = "#intro" })</li>
<li><a href="#about" class="page-scroll navBarLinks">@Model.Disco[CultureInfo.CurrentCulture]</a></li>
<li><a href="#services" class="page-scroll navBarLinks">@Model.Gallery[CultureInfo.CurrentCulture]</a></li>
<li><a href="#contact" class="page-scroll navBarLinks">@Model.Tour[CultureInfo.CurrentCulture]</a></li>
<li><a class="page-scroll navBarLinks">@Model.Video[CultureInfo.CurrentCulture]</a></li>
@{ListDictionary languages = (ListDictionary)Model.Languages[CultureInfo.CurrentCulture.ToString()];}

<li class="dropdown">
<a href="#" class="dropdown-toggle navBarLinks" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">@languages[CultureInfo.CurrentCulture.ToString()]<span class="caret"></span></a>
<ul class="dropdown-menu">
@foreach (var languageKey in languages.Keys)
{
if (languageKey.ToString() == Model.SelectedLanguage)
{
<li class="active">
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
else
{
<li>
@Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
</li>
}
}
</ul>
</li>

</ul>
</div>
</div>
<!-- /.navbar-collapse -->
@*</div>*@
<!-- /.container -->
</nav>

<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scrolling Nav</h1>
<p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
<a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
</div>
</div>
</div>
</section>

<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About Section</h1>
</div>
</div>
</div>
</section>

<!-- Services Section -->
<section id="services" class="services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services Section</h1>
</div>
</div>
</div>
</section>

<!-- Contact Section -->
<section id="contact" class="contact-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Contact Section</h1>
</div>
</div>
</div>
</section>




Thank you very much for your help in advance!

Answer

I got it working using another class for the active item inside the language dropdown of the navbar! Finnaly!

I used the same CSS classes of the active item I had before for the Dropdown inside nav, here it is my final code:

CSS

<style>

    .dropdown-menu .selectedOne a{
        background-color: white;
        color: black;
    }

    .dropdown-menu .selectedOne a:hover{
        background-color: white;
        color: black;
    }

</style>

CSHTML

<nav class="nav-justified navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
        @*<div class="container">*@
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse">
                <div class="navbar-ex1-collapse">
                    <ul class="nav nav-justified">
                        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                        <li class="hidden">
                            <a class="page-scroll" href="#page-top"></a>
                        </li>


                        <li>@Html.ActionLink(@Model.Bio[CultureInfo.CurrentCulture].ToString(), "Index", "Home", null, new { @class = "navBarLinks page-scroll", @href = "#intro" })</li>
                        <li><a href="#about" class="page-scroll navBarLinks">@Model.Disco[CultureInfo.CurrentCulture]</a></li>
                        <li><a href="#services" class="page-scroll navBarLinks">@Model.Gallery[CultureInfo.CurrentCulture]</a></li>
                        <li><a href="#contact" class="page-scroll navBarLinks">@Model.Tour[CultureInfo.CurrentCulture]</a></li>
                        <li><a class="page-scroll navBarLinks">@Model.Video[CultureInfo.CurrentCulture]</a></li>
                        @{ListDictionary languages = (ListDictionary)Model.Languages[CultureInfo.CurrentCulture.ToString()];}

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle navBarLinks" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">@languages[CultureInfo.CurrentCulture.ToString()]<span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                @foreach (var languageKey in languages.Keys)
                                {
                                    if (languageKey.ToString() == Model.SelectedLanguage)
                                    {
                                        <li class="selectedOne">
                                            @Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
                                        </li>
                                    }
                                    else
                                    {
                                        <li>
                                            @Html.ActionLink(languages[languageKey.ToString()].ToString(), "Start", "Home", new { lang = languageKey }, null)
                                        </li>
                                    }
                                }
                            </ul>
                        </li>

                    </ul>
                </div>
            </div>
            <!-- /.navbar-collapse -->
        @*</div>*@
        <!-- /.container -->
    </nav>
Comments