Header in or outside

Question

So I noticed that any html inside the auto-generated [Code here] from making a new web form from master can be changed in the form that is created from the master.

I have a header made in an ul and each element is an li. I want the li of the page selected to become li class-"active" when its on the selected page.

Since the point of the master is that all the other forms you make inherit the properties from it, putting a header inside the [Code here] makes it non existent when I make a new form.

My question is this: Is there a way to make the li become li class-"active" without having to override all of the code for the header by putting it inside the and copy and pasting my header code but changing just one li.

<form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        <div class="bodyGradient">
        <header class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="navbar-collapse collapse"> 
                    <ul class="nav navbar-nav navbar-left">
                        <li>
                             <a href="/Home.aspx">{Someone's Domain}</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="/Home.aspx">Home</a>
                        </li>
                        <li>
                             <a href="/">About</a>
                        </li>
                        <li>
                             <a href="/">Portfolio</a>
                        </li>
                        <li>
                             <a href="/">CryptoGame</a>
                        </li>
                        <li>
                             <a href="/">Photos</a>
                        </li>
                            <li>
                             <a href="/">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
      </div>
        </asp:ContentPlaceHolder>
    </div>
    </form>

Answer 1

It appears you are wanting to highlight the active menu item based on the page the user is visiting, where your menu is being stored in the MasterPage and used across multiple pages.

There are many ways to solve this, and there are plenty examples on SO to look at. Take a look around, here are just a few:

How to set css class on active menu item using a masterpage?

active menu item - asp.net mvc3 master page

How to highlight active page in a masterpage menu?

ASP.NET MVC: Masterpage: How to set css class on active menu item

Here's what I did (pseudo-ish) the last time I ran into this:

(in ASP.NET master page:)

<li class="<%=GetActiveForButton('Home')>">Home</li>
<li class="<%=GetActiveForButton('About')>">About</li>

(in Code Behind .cs)

public string GetActiveForButton(string button)
{
    string url = HttpContext.Current.Request.Url.AbsoluteUri.ToLower();

    if (url.Contains("home.aspx") && button == "Home")
    {
        return "active-button";
    }
    else if (url.Contains("about.aspx") && button == "About")
    {
        return "active-button";
    }

    return "";
}

NOTE: This is just an example. This code could be cleaned up trememdously, combine the logic, use enums, etc, etc. It's pseudocode... but you should be able to get the idea.