I am currently in the process of creating a navigation bar using Bootstrap, you can view it here
All the links on the navbar are behaving similarly except for the 'Save and exit' link. How can I adjust it to look consistent with the other links? I cannot figure out why it keeps appearing blue when it should be grey like the rest of the links.
The code is provided below.
HAML:
%nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse
= link_to image_tag("logo-builder.png"), root_path
%ul.nav.navbar-nav.pull-xs-right
%li.nav-item
%button.btn.btn-link{type: 'button', 'data-toggle' => 'modal',
'data-target' => '#explainQuestionModal'}
Explain Question
%button.btn.btn-link
Preview
%button.btn.btn-link
= link_to 'Save and exit', root_path
= render 'explain_question_modal'
HTML:
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
<%= link_to image_tag("logo-builder.png"), root_path %>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<button class="btn btn-link" data-target="#explainQuestionModal" data-toggle="modal" type="button">
Explain Question
</button>
<button class="btn btn-link">
Preview
</button>
<button class="btn btn-link">
<%= link_to 'Save and exit', root_path %>
</button>
</li>
</ul>
</nav>
<%= render 'explain_question_modal' %>
CSS:
.btn-link {
color:grey !important;
font-size:0.9em;
}
.btn-link:hover {
color:white;
}
.btn-link:focus {
color:white;
}