The navigation bar in Bootstrap has unique behavior with links

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;
}

Answer №1

When styling a button with the class .btn-link, it's important to note that the text "Save and Exit" is wrapped in a a link element inside the button.

To ensure that the color property applies to the link as well, you will need to include .btn-link a {color:grey} in your CSS code.

Additionally, I have fixed the :hover selector to work with the a element within the button.

Snippet

.btn-link {
  color: grey;
  font-size: 0.9em;
}
/*added*/

.btn-link a {
  color: grey;
  text-decoration:none;
  display:block
}
.btn-link:hover, .btn-link:hover a {
  color:white;
}
.btn-link:focus, .btn-link:focus a {
  color:white;
}
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <a href="#">
    <img src="//lorempixel.com/100/100" />
  </a>
  <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">
        <a href="#">Save and exit</a>
      </button>
    </li>
  </ul>
</nav>

Answer №2

Instead of using buttons, consider simplifying your code by using a tags.

Here is a working example snippet:

.nav-item .nav-link {
  color: grey;
  outline: none;
}
.nav-item .nav-link:hover,
.nav-item .nav-link:focus {
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav pull-xs-right">
    <li class="nav-item">
      <a class="nav-link" data-toggle="modal" href="#explainQuestionModal">Explain Question</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/">Preview</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/">Save and Edit</a>
    </li>
  </ul>
</nav>
<div class="modal fade" id="explainQuestionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Title</h4>
      </div>
      <div class="modal-body">
        Body
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

HAML Example

%nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse
  %a.navbar-brand{:href => "#"} Brand
  %ul.nav.navbar-nav.pull-xs-right
    %li.nav-item
      %a.nav-link{'data-toggle' => 'modal', 'data-target' => '#explainQuestionModal'}
        Explain Question
    %li.nav-item
      %a.nav-link{:href => "/preview"}
        Preview
    %li.nav-item
      %a.nav-link{:href => "/save"}
        Save and Edit

.modal.fade#explainQuestionModal(tabindex="-1" role="dialog" aria-labelledby="explainQuestionModal" aria-hidden="true")
  .modal-dialog(role="document")
    .modal-content
      .modal-header
        %button.close(type="button" data-dismiss="modal" aria-label="Close")
          %span(aria-hidden="true") &times;
        %h4.modal-title#explainQuestionModal Title
      .modal-body
        %p Body
      .modal-footer
        %button.btn.btn-secondary(type="button" data-dismiss="modal") Close
        %button.btn.btn-primary(type="button") Save changes

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different custom background images for every individual page in Nuxt

Looking for a unique background-image for each page in my app is proving to be challenging. Currently, I have defined the background-image in style/app.scss. @import 'variables'; @import 'page_transition'; @import url('https://f ...

Output text in Javascript (not to the console)

I'm on the lookout for a way to welcome a user by their name when they enter it into a JavaScript application. I have tried this code snippet: function getname() { var number = document.getElementById("fname").value; alert("Hello, " + fnam ...

How to Update Font in Android Studio WebView

I am facing an issue with HTML: I am trying to implement a custom font in a webview but the font does not change when using this code: public void loadHTLMContentText(String text, WebView view) { String body; String head = "<head><style ...

Discover the simple steps to integrate a timezone dropdown feature into your WordPress website using the Contact Form 7 plugin

I am designing a website and I need to implement a query form with a customizable time zone selection. Are there any specific steps to add a time zone drop-down menu using Contact Form 7? Here is the desired result I'm aiming for: Your assistance wil ...

How to eliminate margins in Django's easy_pdf module

For generating PDF from HTML, I utilize easy_pdf in conjunction with xhtml2pdf. Below is a brief example: In view.py from easy_pdf.rendering import render_to_pdf_response context = dict({'user_company': 'test'}) template_name = "pdf ...

Modify animation trigger when mouse hovers over

I am looking to create a feature where a slide overlay appears from the bottom of a thumbnail when the user hovers over it, and retracts when the user is not hovering. animations: [ trigger('overlaySlide', [ state(&ap ...

HTML - Retain placeholder text while user inputs

My input is structured like this: <input value="My text" placeholder="Placeholder"> Typing in the input causes the placeholder text to disappear, which is expected. However, I am looking to keep the placeholder text visible as a background behind ...

Why is Emmet's document snippet failing to include the "http-equiv='X-UA-Compatible'" meta tag?

While experimenting with the Emmet boilerplate in VS Code for HTML files, I noticed a discrepancy. Online tutorials show that there should be 3 meta tags when using Emmet, but when I try it in VS Code, I only see 2 meta tags. One meta tag seems to be missi ...

What is the method to set an element's height equivalent to the height of the entire screen?

I attempted using height: auto;, however, it did not produce the desired outcome. Do you have any suggestions or alternative solutions? ...

Create a div that can grow in size without the need to set a specific height for it

Here is an example of my HTML code: <div id="wrapper" class='common'> <div id="left" class='common'>Menu I Menu II Menu III Menu IV</div> <div id="right" class='common'>hello world..hello world ...

Pros and Cons of Using HTML5 Mode versus Hash Mode in AngularJS

When using AngularJS 1.3, it is necessary to include the <base> tag in HTML5 mode. This led me to consider the pros and cons of HTML5 mode versus Hash mode. In Hash mode, the major drawback is that URLs can appear unattractive and may not be easy fo ...

Step-by-step guide on building a mat-table with nested attributes as individual rows

Here is the data structure I am working with: const families = [ { name: "Alice", children: [ { name: "Sophia" }, { name: "Liam" ...

What is the process for implementing JavaScript in Django?

I'm a newcomer to this and although I've tried searching on Google, I haven't found a solution. I'm facing an issue where I can include JavaScript within the HTML file, but it doesn't work when I try to separate it into its own fil ...

Is anyone utilizing PHP variables to control the title of the HTML and the ID of the body element?

I utilize PHP variables to store the title's value and the ID of the body. The latter is a method to show which section of the page the user is currently on (in this case, the "home" section). At the start of my index.php: <?php $title = "New ...

Issues with the functionality of the submit button (html, js, php)

Seeking assistance with a submit button functionality issue - I have a simple submit button that allows visitors to enter their email address. Upon clicking the button, it should add their email to a CSV file and display a pop-up thank you message. The pr ...

Using jQuery to display the total number of div elements for the selected individuals

Hey there, I'm just diving into jQuery and could use some assistance. I'm attempting to achieve a specific outcome with my code, but I'm running into some difficulties. Hopefully someone can lend a helping hand! Here's the scenario: If ...

The function `jQuery .html('<img>')` is not functional in Firefox and Opera browsers

This particular code snippet jq("#description" + tourId).html('<b>Opis: </b> '+ data); has been tested and functions correctly in Internet Explorer, Firefox, and Opera. However, when it comes to this specific piece of code jq("#i ...

Cross-border PHP document

Each PHP page must begin with the following code: <?php $host="localhost"; // Host name $username=""; // MySQL username $password=""; // MySQL password $db_name=""; // Database name $tbl_name=""; // Table name // Connect to server and select datab ...

Is it possible to utilize AngularJS ngAnimate to perform cross-fading transitions on list items?

I am currently exploring the ins and outs of angularJS with my simple message ticker example. This ticker displays messages by toggling the CSS display property of one of the li elements. <div id="ngtickerMessage" class="ngtickerMessage"> ...

Experience a seamless front/back DIV transition with a mouseover effect similar to the ones on USAT

Recently, I was tasked with creating a mouseover transition effect for a div similar to the one used on USAToday's website. The structure of the boxes on the site includes: <div class="asset"> <div class="front">'image and some t ...