CODEWITHSUNDEEP
cssasp.net-mvcrazornavigation
user2551272
user2551272

Reputation: 3

Why won't the current page of my navigation bar stay highlighted?

I have read very many forums and tried many different ways to make the current page of my navigation menu stay highlighted, and I can't figure out why it won't work.
I don't want to use Javascript or PHP - only CSS.

This is what I have for HTML:

    <body id="@ViewBag.IDTag">
        <ul id="menu">
            <li>@Html.ActionLink("Home", "Index", "Home", null, new Dictionary<string, object> { { "id", "homenav" } })</li>
            <li>@Html.ActionLink("What Is EDI?", "WhatIsEDI", "Home", null, new Dictionary<string, object> { { "id", "whatisedinav" } })</li>
            <li>@Html.ActionLink("Bills of Lading", "Index", "Bills_of_Lading", null, new Dictionary<string, object> { { "id", "billsofladingnav" } })</li>
            <li>@Html.ActionLink("Issues & Solutions", "Index", "Issues_and_Solutions", null, new Dictionary<string, object> { { "id", "issuesandsolutionsnav" } })</li>
            <li>@Html.ActionLink("Partners", "Index", "Partners", null, new Dictionary<string, object> { { "id", "partnersnav" } })</li>
            <li>@Html.ActionLink("Locations", "Index", "Locations", null, new Dictionary<string, object> { { "id", "locationsnav" } })</li>
            <li>@Html.ActionLink("Refineries", "Index", "Refineries", null, new Dictionary<string, object> { { "id", "refineriesnav" } })</li>
            <li>@Html.ActionLink("Sources", "Index", "Sources", null, new Dictionary<string, object> { { "id", "sourcesnav" } })</li>
            <li>@Html.ActionLink("Transfer Criteria", "Index", "Transfer_Criteria", null, new Dictionary<string, object> { { "id", "transfercriterianav" } })</li>
            <li>@Html.ActionLink("Transportation Methods", "Index", "Transportation_Methods", null, new Dictionary<string, object> { { "id", "transportationmethodsnav" } })</li>
            <li>@Html.ActionLink("Rack to Partner Mappings", "Index", "Rack_to_Partner_Mappings", null, new Dictionary<string, object> { { "id", "racktopartnermappingsnav" } })</li>
            <li>@Html.ActionLink("Products", "Index", "Products", null, new Dictionary<string, object> { { "id", "productsnav" } })</li>                    
        </ul>
    </body>

On each view, I have the id at the top of the page. An example of the home page is: 

    @{
        ViewBag.IDTag = "home";
    }

This is what my CSS looks like:

    ul#menu             
    {
        font-size: .8em;
        font-weight: 600;
        color: #FFF;
        float: left;
        width: 130px;
        list-style-type: none;
        margin-top: 133px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: auto;
        padding: 0; 
    }

    ul#menu a:link, ul#menu a:visited
    {
        display:block;
        font-weight:bold;
        color: #FFF;
        background-color: rgb(139,177,216);
        width: 120px;
        text-align: center;
        padding: 5px;
        text-decoration: none;
        text-transform: uppercase;
    }

    ul#menu a:hover, ul#menu a:active
    {
        background-color: #365f87;
    }

body#home a#homenav, 
body#whatisedi a#whatisedinav,
body#billsoflading a#billsofladingnav,
body#issuesandsolutions a#issuesandsolutionsnav,
body#partners a#partnersnav, 
body#locations a#locationsnav, 
body#refineries a#refineriesnav,
body#sources a#sourcesnav,
body#transfercriteria a#transfercriterianav,
body#transportationmethods a#transportationmethodsnav,
body#racktopartnermappings a#racktopartnermappingsnav,
body#products a#productsnav     
{
    background-color: #365f87;          /* highlights current page */
    text-transform: lowercase;
    cursor:default;
}

I'm new to all of this, so it could simply be an syntax issue, or calling something "body" when it should be "div" or "id" when it should be "class". I am at the point where nothing I have tried makes a single difference. Any help would be greatly appreciated.

Upvotes: 0

Views: 806

Answers (2)

hungerstar
hungerstar

Reputation: 21685

You need to add an active class to your <li>. I don't know asp.net but as you're dynamically setting the id for the <body> I would think something like this would work:

My PHP version 

// with a function

function is_active_li( bodyID, identifier ) {
     echo identifier == bodyID ? 'active' : '';
}

<li class="<?php is_active_li( $bodyID, 'home'); ?>">Home</li>
<li class="<?php is_active_li( $bodyID, 'whatisedi'); ?>">Home</li>
<li class="<?php is_active_li( $bodyID, 'billsoflading'); ?>">Home</li>

// or all inline

<li class="<?php echo 'homev' == bodyID ? 'active' : ''; ?>">Home</li>
<li class="<?php echo 'whatisedi' == bodyID ? 'active' : ''; ?>">Home</li>
<li class="<?php echo 'billsoflading' == bodyID ? 'active' : ''; ?>">Home</li>

Upvotes: 0

edhedges
edhedges

Reputation: 2718

Try the method used on this question. It makes the process more dynamic and you write less code.

Adding "active" tag to navigation list in an asp.net mvc master page

Upvotes: 1

Related Questions