Categories
css html navbar transparent twitter-bootstrap

Bootstrap Transparent Navbar – Mobile Collapsed Menu Icons Disappear

After finally getting the navbar to look the way I want – slighty transparent black with white links – the collapsed icons don’t show up on mobile. The link is there and functioning, but no icon. What am I missing here?

Here’s the navbar:

    <nav class="navbar transparent navbar-fixed-top" role="navigation">
<nav class="navbar-inner">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="https://www.faqcode4u.com/faq/438154/index.html">EMILY STEWART VIOLIN</a></div>
<div class="collapse navbar-collapse" id="example-nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="https://www.faqcode4u.com/faq/438154/index.html">HOME</a></li>
<li><a href="https://www.faqcode4u.com/faq/438154/music.html">MUSIC</a></li>
<li><a href="https://www.faqcode4u.com/faq/438154/pedagogy.html">PEDAGOGY</a></li>
<li><a href="https://www.faqcode4u.com/faq/438154/blog.php">BLOG</a></li>
<li><a href="https://www.faqcode4u.com/faq/438154/contact.html">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
</nav>

Here’s the CSS:

.navbar.transparent .navbar-inner {
background: rgba(0,0,0,0.4);
color: #ffffff;
}
.navbar.transparent .navbar-inner li a {
color: #ffffff;
font-family: "Raleway";
font-size: 10pt;
letter-spacing: 3pt;
}
.navbar.transparent .nav > li > a:focus,
.navbar.transparent .nav > li > a:hover {
color: #666666;
text-decoration: none;
background-color: transparent;
}
.button.navbar-toggle.collapsed:focus,
.button.navbar-toggle.collapsed:hover {
color: #666666;
}
.navbar.transparent .navbar-brand:hover,
.navbar.transparent .navbar-brand:focus {
background-color: transparent;
color: #ffffff;
}
.navbar.transparent .navbar-brand{
background-color: transparent;
color: #ffffff;
font-family: "Tenor Sans";
font-size: 16pt;
letter-spacing: 1pt;
}

And here’s my site: Site

you made the toggle button transparent as well. Simply replace this:

.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}

with this:

.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #fc0 /* change this to any color you want! */;
}