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

Using Drupal to automatically adjust comment widths

My webpage features two div blocks that are set to a default width of 900px each. To make them adjust their width according to the text content, I used float: left; or display: inline-block; This caused the divs to resize based on the size of the text, b ...

htmlcssdrupal-7width

The cascading style sheet does not have any effect on the layout of the tables within the

I am trying to apply a CSS style to give all tables on my HTML pages a 1px border width. However, for some reason, the borders are not showing up in my HTML files! What could be causing this issue? <!-- <style type="text/css"> --> body{backg ...

css

Is it possible to utilize a variable in determining the order of operations?

I'm currently developing a simple calculator script using a combination of HTML and PHP. The concept involves inputting two numbers and selecting the operator to perform the calculation. HTML Code <html> <head> <title>Calculat ...

phphtmlvariablessyntaxcalculator

Issue with JavaScript function loading website homepage solely is functioning only for the first time

I am in the process of creating my own personal website. To ensure seamless navigation, I added a "home" button that, when clicked, triggers a JavaScript function called loadhomepage() to load the homepage. While this function works perfectly upon initial ...

javascriptjqueryhtmlcss

Styling CSS for Centering a Heading on an Image's Center

Struggling to center an h3 heading in the middle of an image within a grid? Look no further, as I have 3 images across one row - four columns per image/heading. Check out the desired layout https://i.stack.imgur.com/8VFRt.png I've managed to center t ...

htmlimagecss

Adjust the size of the <textarea> to match the height of the table cell

Below is the code I am using to generate a table containing an image along with a <textarea>: <table border="1" style="border-color: #a6a6a6" cellpadding="4" cellspacing="0" width="702">\ <col width="455"> <col width="230"> ...

javascripthtmlcsshtml-tabletextarea

Set a variable to represent a color for the background styling in CSS

My goal is to create an application that allows users to change the background color of a button and then copy the CSS code with the new background color from the <style> tags. To achieve this, I am utilizing a color picker tool from . I believe I ...

javascriptphpcss

css - targeting the last child element using a type selector

I'm attempting to target the final child element of type <div> within the container "#myDiv" <div id="myDiv"> <div> <img> <div> <div>text</div> ...

htmlcsscss-selectors

What is the best way to selectively add multiple classes to a single Material UI classes attribute based on certain conditions?

I am trying to use the Material UI Drawer and wish to add a class named "paperStyle" to the classes prop with the rule name "paper" and then, under certain conditions, apply an additional class called "specialPaperStyle" for specific users. However, I have ...

cssreactjsmaterial-ui

Ways to prevent a <a href> element with a class linked to javascript from behaving like a block element

I am currently facing an issue with formatting an inline navigation. The last link, which is associated with a JavaScript class, is causing the entire link to become a block element instead of aligning inline with the rest of the links in the navigation. ...

javascripthtmlcss

Encase every picture within a div and add a numerical label in front of it

I'm working on a function that will wrap each image in a div and add a span label for each image. Here is the code I have written so far: $('#carousel img').each(function(index) { $(this).wrap('<div class="image"></div>& ...

jqueryhtmlimage

Which specific transitionend (or animationend) event should I use for this application?

I'm feeling a bit lost when it comes to using transitionend (or if I should be using animationend in this scenario). I'm not sure whether to utilize var, node, or box. Essentially, I am a complete beginner in this case. My goal is to have my div ...

javascriptjqueryhtmlcssanimation

PHP overall outcome

I have created a form that includes checkboxes, but I am facing difficulty in calculating the total result based on the selections. Ideally, if a user selects three checkboxes, the total should be $3, and if only one checkbox is selected, the total should ...

phphtml

Making jQuery work: Utilizing tag replacements

My current code is: this.html(this.html().replace(/<\/?([i-z]+)[^>]*>/gi, function(match, tag) { return (tag === 'p') ? match : '<p>'; return (tag === '/p') ? match : '</p& ...

javascriptjqueryhtml

Columns that can be resized in a right-to-left (

Whenever I use RTL, the columns behave erratically when resizing... I have implemented colResizable. You can see an example here: http://jsfiddle.net/r0rfrhb7/ $("#nonFixedSample").colResizable({ fixed: false, liveDrag: true, gripInnerHtml: "<d ...

javascripthtmlcss

Searching and manipulating arrays in PHP

<?php include 'database.php'; $sql="SELECT `j_company`,`j_salary`,`j_title` FROM `jobs`"; $query=mysqli_query($conn, $sql); if(!$query) { echo "<h1>Unsuccessful</h1>"; echo("Error description: " . ...

phphtmlsqlarrays

Using an aria-label attribute on an <option> tag within a dropdown menu may result in a DAP violation

Currently, I am conducting accessibility testing for an Angular project at my workplace. Our team relies on the JAWS screen reader and a helpful plugin that detects UI issues and highlights them as violations. Unfortunately, I've come across an issue ...

htmlangulartypescriptaccessibilityjaws-screen-reader

Once the div content is reloaded using AJAX, the refreshed HTML suddenly vanishes

My JS code reloads the div every 2 seconds: var auto_refresh = setInterval(function() { $('#indexRefresh').load('/includes/index_refresh_include.php?_=' + Math.random()); }, 2000); After that, I have an AJAX request that loads mor ...

javascriptjqueryhtmlajax

Interested in mastering BootStrap for Angularjs?

As a PHP developer with a newfound interest in JavaScript, I took it upon myself to learn AngularJS and jQuery. However, I recently discovered that simply mastering Angular is not enough - Bootstrap is also necessary. My only issue is my fear of CSS; handl ...

cssangularjstwitter-bootstrap

Styling Collapse Text in Bootstrap Framework

I have a question about the "Accordion example" in the Bootstrap Collapse Component. My query is regarding removing the underline from the text "Collapsible Group Item" 1-3 when they are activated. Normally, this text is not underlined, but upon hovering, ...

htmlcssbootstrap-4