Struggling to accurately differentiate between a CSS and Bootstrap code

I'm attempting to create a visually appealing underline under the active tab, but I am facing challenges in targeting the specific class. Since I am utilizing bootstrap and unable to adjust the width and margin of text-decoration or recognize an element like border-bottom, I am considering using an HR.

HTML CODE

<!DOCTYPE html>
<html>
<head>
  <title>Test Site</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="blogStyle.css">
</head>
<body>
 <nav class="navbar navbar-default">
  <div class="container-fluid"
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Test</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right nav-pills">
        <li><a class="nav-link active" href="#">Blog</a>
        </li>

        <li><a href="#">Shop</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Contact Me</a></li>
    </div>
  </div>
</nav>



  <script src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
  crossorigin="anonymous"></script>
</body>
</html>

CSS CODE

/* navbar */
.navbar-default {
    background-color: #a300cc;
    border-color: #E7E7E7;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.12);
    border-top:0px;
    border-right-width: 0px;
    border-left-width: 0px;
    height:60px;

 }
/* Title */
.navbar-default .navbar-brand {
    color: white;
    font-size: 24px;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: white;
}
.navbar-default .navbar-nav > li > a .nav-link .active {
    font-size:10px;
}

a.nav-link.active {
    font-size:100px;
}


/* Link */
.navbar-default .navbar-nav > li > a {
    color: white;
    font-size:19px;

}


.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: white;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background-color:  #a300cc;

}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: white;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: white;
}

a.nav-link.active {
    font-size:100px;
}

Despite my attempts with a.nav-link.active, it hasn't yielded the desired outcome as yet.

htmlcsstwitter-bootstrap

Answer №1

Here is the updated CSS for your navbar:

.navbar-default .navbar-nav>li>a {
    color: #777;
    border-bottom: 1px solid transparent;
    border-radius: 0px;
}
.navbar-default .navbar-nav>li>a:hover {
    border-bottom: 1px solid #333;
    transition: 0.3s;
}
.navbar-default .navbar-nav>li>a.nav-link.active {
    border-bottom: 1px solid #333;
}

Answer №2

If you want to identify the CSS selector that is overriding your a.nav-link.active selector, you can make use of the developer tools.

In this particular situation, the culprit seems to be:

.navbar-default .navbar-nav > li > a

To ensure your selector is more specific and targeted, consider changing it to:

.navbar-default .navbar-nav > li > a.nav-link.active

By making this adjustment, you should be able to implement styling for the bottom border effectively.

Answer №3

Verify the closing tag for ul

To highlight the active menu, you can use 

.navbar-default .navbar-nav>li>a.active

/* Styling for navbar */

.navbar-default {
  background-color: #a300cc;
  border-color: #E7E7E7;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.12);
  border-top: 0px;
  border-right-width: 0px;
  border-left-width: 0px;
  height: 60px;
}


/* Title styling */

.navbar-default .navbar-brand {
  color: white;
  font-size: 24px;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: white;
}

.navbar-default .navbar-nav>li>a .nav-link .active {
  font-size: 10px;
}

a.nav-link.active {
  font-size: 100px;
}


/* Link styling */

.navbar-default .navbar-nav>li>a {
  color: white;
  font-size: 19px;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: white;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
  color: white;
  background-color: #a300cc;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  color: white;
  background-color: #D5D5D5;
}


/* Caret styling */

.navbar-default .navbar-nav>.dropdown>a .caret {
  border-top-color: #777;
  border-bottom-color: #777;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

.navbar-default .navbar-nav>li>a.active {
  border-bottom: 1px solid red;
  border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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="#">Test</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right nav-pills">
        <li><a class="nav-link active" href="#">Blog</a></li>
        <li><a href="#">Shop</a></li>
        <li><a href="#">About Me</a></li>
        <li><a href="#">Contact Me</a></li>
      </ul>
    </div>

  </div>
</nav>

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

How can you gather user data on a website without relying on a database and making it voluntary?

In order to streamline the process, the user should be able to send a preformatted email with the click of a button or have their data stored securely without leaving the site. The goal is to avoid the extra step of using a mailto: link, unless the email c ...

javascripthtmlcssweb

Learn how to use AJAX to automatically retrieve the contents of a file

I'm currently exploring AJAX to retrieve the contents of a file upon clicking a button, as I am fairly new to AJAX. Below is the HTML code snippet: <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { ...

pythonhtmlajaxfile

Adding classes to a div in a sequential animation using jQuery: A step-by-step guide

I'm aiming to create an animated effect using jQuery that replicates the motion in this GIF. I experimented with CSS3 animation keyframes, but the result was not as clean and polished as I would like. If there is a simpler way to achieve this effect u ...

jquerycss

Web pages that dynamically update without the need for reloading

Recently, I stumbled upon slack.com and was immediately captivated by its user interface. For those unfamiliar with it, navigating the site is quite simple: There's a sidebar on the left and a main content area on the right. When you click on an item ...

javascripthtmlcssnode.jsmeteor

Retrieve element attributes and context inside a function invoked by an Angular directive

When working with a directive definition, you have access to the $element and $attrs APIs. These allow you to refer back to the element that called the directive. However, I'm curious how to access $element and $attrs when using a standard directive l ...

javascripthtmlangularjs

AngularJs - Customizable dynamic tabs that automatically adapt

Below is the HTML code snippet: <div> <ul data-ng-repeat ="tab in tabs"> <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"> </li> </ul> </div> As shown ...

javascripthtmlcssangularjstwitter-bootstrap

Intel XDK problem with HTML5/CSS3 footers overlapping headers in my project

I am in the process of developing an application using drag and drop features from the Intel XDK/App Designer. The main concept behind this app is to provide users with basic tutorials and incorporate geolocation services. My approach involved following th ...

htmlcssheaderemulationfooter

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

javascripthtmlcss

What is the best way to stop a select menu option from being highlighted once it has been clicked on?

Is there a way to prevent the highlighting of selected options in a <select> menu when a user makes a selection? <select id="my_select_menu"> <option id="1">Option 1</option> // I do not want this option to be highlighted ...

htmlcss

Showcasing data from Django models in a tabular format

I am new to django and seeking assistance. I have developed a website but it's not fully operational yet. The model I created looks like this; from django.db import models class InductiveSensors(models.Model): Part_No = models.CharField(max_lengt ...

pythonhtmldjangourldjango-models

Attempting to execute code on a database using PHP and MySQL

Hey there! I am just diving into the world of HTML and PHP, attempting to create a page that can execute an SQL query to transfer data from one table to another. However, I'm facing some difficulties in making it work as I need a user-provided date t ...

phphtmlmysqli

What is the best way to send multiple values to a PHP function through an AJAX request?

I wrote the following code snippet: var name= "theName"; var surname= $('#surname').val(); $.ajax({ url: 'SaveEdit.php', type: 'post', data: { "callFunc1": whichOne}, success: funct ...

phphtmlajax

What is the best way to rotate a cube when it is clicked on?

My current project involves rotating a cube by clicking on buttons either on the cube itself or floating next to it. At the moment, I have them floating for easier testing purposes, but placing them directly on the cube is not an issue. The main issue I&a ...

javascripthtmlcssrotationcube

HTML5 on its own versus the dynamic duo of jQuery Mobile and AngularJS

We are in the process of creating a versatile mobile app that will work on multiple platforms using HTML5, JavaScript, and CSS. Our design approach includes utilizing Bootstrap for a responsive user interface, and Cordova to package the application for bot ...

htmlangularjsjquery-mobilecordova

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

Apologies for any language barrier. I am encountering an issue with a PHP page that includes a table meant to be displayed as position:fixed; however, it consistently appears above the scrollbars and does not stay within the parent div. View screenshot he ...

htmlcss

Enhance the brightness and add a subtle glow to an image inside a div element when hovering over the div

Is there a way to create an effect where the image within a div brightens when hovering over the entire div without affecting any other elements? Here is my code, any suggestions or improvements are appreciated. #textimg{ background-image: url( ...

htmlcssimagehover

How can jQuery select an element by its id attribute by referencing the href attribute of a different element?

Whenever the user interacts with a div.nav element, jQuery switches its class to active. Presently, it applies display: block to all three of the div.content elements. I aim for jQuery to only apply the display: block property to the div.content elements t ...

jquerycss

Difficulty with Angular JS` ng-repeat functionality

I attempted to create a sample similar to the ones found on https://angularjs.org/ Here is the JS fiddle I put together. Could someone provide assistance? What seems to be the issue? The HTML code is as follows: <h2> To Do </h2> <div ng- ...

javascripthtmlangularjs

Issue with Javascript function when HTML settings are updated using Ajax

I am experiencing an issue and struggling to understand the cause. Initially, I have a list of elements with a click event using JavaScript. The click event functions correctly when the page loads. However, upon clicking the 'more' button, which ...

jqueryhtmlajax

How can I simulate or manipulate the element's scrollHeight and clientHeight in testing scenarios?

In my JavaScript code, I have a function that checks if an HTML paragraph element, 'el', is a certain size by comparing its scrollHeight and clientHeight properties: function isOverflow(element: string): boolean { const el = document.getEleme ...

javascripthtmltypescriptjestjsmocking