0

I have a bootstrap nav bar as follows:

<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #F5F5F5 !important">
    <div class="container-fluid">
        <div class="navbar-header navbar-nav">
            <a id="homeLink" class="navbar-brand" href="@Url.Action("Index", "Home", new { goHome = true })"><span class="glyphicon glyphicon-home"></span></a>
            <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
                <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 navbar-left">
            <ul class="nav navbar-nav">
                <li class="">@Html.ActionLink("Analysts", "Index", "Analyst", null, new { @class = "loadmsg" })</li>
                 <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Reports
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li>@Html.ActionLink("Marketing Write-ups Summary", "MarketingWriteupSummary", "Report", null, new { @class = "loadmsg" })</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

As you can see, there is an < li > on the Reports dropdown for Marketing Write-Ups Summary. On an iPad, I want there to be some visual indication that a user has selected this, for instance, changing the text to a different color. How do I do this?

Scott
  • 2,456
  • 3
  • 32
  • 54
  • Please clarify. When a dropdown link is clicked it already gains an `:active` state that should provide coloring. Have you attempted to modify this or are you trying to add some permanent state to indicate the user is currently on Page X or has visited Page X? – Robert Feb 16 '18 at 16:34
  • I added a menuItem class to the action link of .menuItem:active { background-color: purple !important; } this works when i click on it on my desktop, but has no effect on the iPad. – Scott Feb 16 '18 at 20:16

0 Answers0