Asp.Net MVC Navbar-Brand to Header Text Color

ASP.net MVC navbar-brand to header text color

The easiest way:

.navbar-brand { color: black !important }
.navbar-brand:visited { color: black !important }
.navbar-default-color { color: black !important }
.navbar-inverse { color : #FFFFFF !important }

I belive that this happends becouse li element has his own style and css rules first get styles from element selectors and then class selectors.

You can watch this with Chrome -> F12 -> Inspect element

Change the default header color in MVC5 app

In default MVC 5 web site, the background color of the header navigation bar is applied through .navbar-inverse css class available in bootstrap.css file under \Content\bootstrap.css folder of your project.

To change this style, you can override it in the Site.css file instead of changing the base bootstrap css file itself.

Simply adding the following to your Site.css file should change the background color of the navbar.:

.navbar-inverse { background-color: #ccc !important; }

How to change Nav bar font colors (ASP.NET)

Current active page:

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a {
    color: #xxxxxx;
}

Current active page (on hover):

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    color: #xxxxxx;
}

Other pages:

.navbar-inverse .navbar-nav > li > a {
    color: #xxxxxx;
}

Other pages (on hover):

.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #xxxxxx;
}

MVC - Bootstrap 3.0 - Change navbar text

Assuming the text in your navbar are links, you have to target the anchor links like this:

.nav li a {
    color: #FFF;
}

Styling ActionLinks in _LoginPartial compared to _Layout

you should write:

@Html.ActionLink("Register", "Register", "Account", new { area = "" }, new { id = "registerLink", @class = "navbar-brand" })

How can I do active menu text color change nav dropdown item submenu?

You can make html extension method with the root namespace of your project:

using System.Web.Mvc;

namespace YourProjectNamespace
{
    public static class HtmlHelpers
    {
        public static string IsActive(this HtmlHelper html, string url)
        {
            var current = html.ViewContext.HttpContext.Request.Url.AbsolutePath.ToString().ToLower();
            if (url == "/")
            {
                if (current == "/" || current == "/home" || current == "/home/index" || current == "/home/" || current == "/home/index/")
                {
                    return "active";
                }
                else
                    return "";
            }
            if (current.Contains(url.ToLower()))
            {
                return "active";
            }
            return "";
        }
    }
}

then use it in your html as follow:

<li data-menu="">
              <a class="dropdown-item" href="@Url.Action("Create", "News")"
                 data-toggle="dropdown" class="@Html.IsActive("/News/Create")" > Create News
              </a>
           </li>

This will add active class the current menu item.

How To Change ASP.NET Core Web App Navbar Background Color

I've noticed that sometimes the bootstrap classes dont work for me so I suggest trying normal css to color the background of the navbar.

style="background-color: blue"

Try adding the above as a parameter in the nav element

MVC5 - Navbar active color

In each action method of the required controllers you can add ViewBag values:

public ActionResult Index()
{
    ViewBag.Action = ControllerContext.RouteData.Values["Action"].ToString();
    ViewBag.Controller = ControllerContext.RouteData.Values["Controller"].ToString();

    return View();
}

Then in the View you can use the following to apply the required CSS class:

<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Venues" ? "current" : "")">@Html.ActionLink("Venues", "Index", "Venues")</li>
<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>
<li class="@(ViewBag.Action == "Index" && ViewBag.Controller == "Bands" ? "current" : "")">@Html.ActionLink("Bands", "Index", "Bands")</li>
<li class="@(ViewBag.Action == "Admin" && ViewBag.Controller == "Home" ? "current" : "")">@Html.ActionLink("Admin", "Admin", "Home")</li>

This is probably an ok solution for these simple links - but if you were going to add many more I would recommend adding you own custom HtmlHelper. See accepted answer here for more information: How to add "active" class to Html.ActionLink in ASP.NET MVC

Edit:

You could simplify it even more by just having this in controller:

public class EventsController : Controller
{
    public ActionResult Index()
    {
        ViewBag.LinkText = "Events";

        return View();
    }
}

And then the links would just be, e.g.:

<li class="@(ViewBag.Linktext == "Events" ? "current" : "")">@Html.ActionLink("Events", "Index", "Events")</li>

---

Related Topics