When I don't use the Inverse setting for my Navigation menu, I see one outcome.
However, when I do set it to inverse, I see a different outcome.
I am utilizing the core Bootstrap file. The code for my navigation system is as follows:
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<div class="animbrand"><a href="#" class="navbar-brand">Welcome</a>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a>
</li>
<li><a href="#services">Services</a>
</li>
<li><a href="#contact">Contact</a>
</li>
The rest of my navigation code continues here.
What could be causing this issue? I prefer not to use the inverse setting and keep it simple. There are no custom Skins (Bootwatch) or anything like that being used.
All my CSS, JS, and images are correctly linked.
In case you need it, here is the code in my head section:
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Welcome</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/image.min.css" rel="stylesheet">
<link href="css/skin.min.css" rel="stylesheet">
Any insights on this issue? I have spent the entire day trying to troubleshoot it.
Note: Even without any custom code, css, or js, the appearance of the navigation remains the same.