Is there a way to eliminate the bottom border on the active navigation tab?

Here's the information I've gathered:

Below is a snippet of code that I have:

.nav-tabs {
    border-bottom: 3px solid #3FA2F7 !important;
}

.nav-tabs .nav-link {
    color: #02194A;
    font-size: 13px;
    padding: 12.5px !important;
}

.nav-tabs .nav-link.active {
    color: #02194A;
    border-color: #3FA2F7;
    border-width: 3px;
    border-bottom: 3px solid #fff !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1815150e090e081b0a3a4e544f5449">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<ul class="nav nav-tabs nav-tabs-2 justify-content-center d-none d-md-flex">
    <li class="nav-item">
        <a class="nav-link active" id="curreny-tab" data-toggle="tab" href="#curreny" role="tab" aria-controls="curreny" aria-selected="true"><span class="h4 px-4">Curreny Pairs</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="excurreny-tab" data-toggle="tab" href="#excurreny" role="tab" aria-controls="excurreny" aria-selected="true"><span class="h4 px-4">Exotic Curreny Pairs</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="indices-tab" data-toggle="tab" href="#indices" role="tab" aria-controls="indices" aria-selected="true"><span class="h4 px-4">Indicies</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="metals-tab" data-toggle="tab" href="#metals" role="tab" aria-controls="metals" aria-selected="true"><span class="h4 px-4">Metals</span></a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="commodities-tab" data-toggle="tab" href="#commodities" role="tab" aria-controls="commodities" aria-selected="true"><span class="h4 px-4">Commodities - Oil</span></a>
    </li>
</ul>

I would like to eliminate the bottom border from the active navigation tab.

htmlcssbootstrap-4

Answer №1

This is not a CSS border style. To eliminate it, you can use the following CSS code:

* {
  outline: none !important;
  box-shadow: none !important'
}

By adding this code, you will remove the blue outline around all of your elements. If you only want to remove it from specific elements, replace * with class.

I included !important in the code because you are using Bootstrap and need to override its default behavior.

Answer №2

Adjust the active class to be on the <li> element, then utilize a pseudo element with absolute positioning to conceal it in this manner:

.nav-tabs {
  border-bottom: 3px solid #3FA2F7 !important;
}

.nav-tabs .nav-link {
  color: #02194A;
  font-size: 13px;
  padding: 12.5px !important;
}

.nav-tabs .nav-link.active {
  color: #02194A;
  border-color: #3FA2F7;
  border-width: 3px;
}

.nav-item {
  position: relative;
}

.nav-item.active::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  border-bottom: 3px solid #FFF !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60020f0f14131412011020544e554e53">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<ul class="nav nav-tabs nav-tabs-2 justify-content-center d-none d-md-flex">
  <li class="nav-item active">
    <a class="nav-link" id="curreny-tab" data-toggle="tab" href="#curreny" role="tab" aria-controls="curreny" aria-selected="true"><span class="h4 px-4">Curreny Pairs</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="excurreny-tab" data-toggle="tab" href="#excurreny" role="tab" aria-controls="excurreny" aria-selected="true"><span class="h4 px-4">Exotic Curreny Pairs</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="indices-tab" data-toggle="tab" href="#indices" role="tab" aria-controls="indices" aria-selected="true"><span class="h4 px-4">Indicies</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="metals-tab" data-toggle="tab" href="#metals" role="tab" aria-controls="metals" aria-selected="true"><span class="h4 px-4">Metals</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="commodities-tab" data-toggle="tab" href="#commodities" role="tab" aria-controls="commodities" aria-selected="true"><span class="h4 px-4">Commodities - Oil</span></a>
  </li>
</ul>

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

CSS selector that targets elements within a specified parent element

Imagine a scenario where there are numerous divs in an HTML document, like the three examples provided below: <div id="1"> <p>hi</p><p>Peter</p> </div> <div id="2"> <p> hola</p><p>Peter&l ...

csscss-selectors

Extracting outer td data from a td element containing an inner table using JSoup

Currently, I am utilizing JSoup for the purpose of web scraping. Within my webpage, there is a table with the classname .chart, containing rows (tr) and data cells (td). However, some of these td elements also include nested tables with additional rows and ...

htmljsoup

Editing an XML file on the browser and saving it in its original location on the local file system

Seeking assistance with editing an XML file directly from the browser on a local file system and saving it back to its original location. I have conducted extensive research using Google, but have not been able to find a suitable solution. Any help or gu ...

javascripthtmljquery

HTML table row content should be aligned to the left side

I am attempting to align the data in the 'Address' column without any margin. I want it to start from the left since it's overflowing. You can find the HTML, CSS, and JS code here Even though I tried using <td align="left">..</td& ...

javascriptjqueryhtmlcss

sophisticated HTML navigation bar

I am looking for a way to create a menu where the drop-down items overlay the rest of the menu when the screen width is small. Here is my current code: nav{ line-height:100%; opacity:.9; }nav ul{ background: #999; padding: 0px; border-radius: 20px; ...

javascripthtmlcssnav

Object of Razor enclosed within an anchor tag

Exploring the realm of MVC 4 and Razor is new to me. Currently, I am attempting to create a Gallery with "CSS3 Lightbox". Everything seems fine, but I am encountering difficulties with Razor and links. The issue lies in my understanding of the pre and ne ...

htmlrazorasp.net-mvc-4

Click the link to capture the ID and store it in a variable

Currently working on a project involving HTML and JavaScript. Two HTML pages ("people.html" and "profile.html") are being used along with one JavaScript file ("people.js") that contains an object with a list of names, each assigned a unique ID: var person ...

javascriptjqueryhtml

Switching between various quantities of inputs in each row using Bootstrap V3

My Bootstrap V3 form has a mix of rows with two inputs and rows with one input, as per the designer's request. Check out my fiddle here: https://jsfiddle.net/06qk4wh4/ <div class="form-group col-sm-12"> <label class="control-label col- ...

htmlcsstwitter-bootstrap

The function attached to the `click` event of `#cart-continue` is not invoking

I'm currently working on implementing a navigation to a specific anchor tag when the user clicks the continue button on the cart page. This project involves a mobile application built with Cordova, and the function call is done using jQuery. Here is ...

javascriptjqueryhtmlcordova

Using Angular to include a forward slash "/" in the text input for a date field

Hello everyone, I am a newcomer to AngularJS and I am looking to insert slashes in an input type text element. I prefer not to rely on external packages like angular-ui or input type Date. My goal is to have the format mm/dd/yyyy automatically applied as ...

htmlangulartypescriptangular2-templateangular2-forms

When hovering over an element, I must utilize a selector and reference a variable that was defined outside of the hover state in order to

Explaining this code may be a challenge, but I'll give it my best shot. Here's the code snippet: $('#navibar a').hover(function(){ var position = $(this).position(); var width = $(this).width(); $('#underliner'). ...

javascriptjqueryhtmlcss

Struggling with implementing CSS in React even after elevating specificity levels

I am struggling with a piece of code in my component that goes like this: return ( <div className="Home" id="Home"> <Customnav color="" height="80px" padding="5vh"/> <div className= ...

cssreactjsstyling

SyntaxError: Unexpected '<' symbol found in JavaScript file while attempting to import it into an HTML document

This issue is really frustrating me In my public directory, there is an index.html file Previously, I had a newRelic script embedded within the HTML in script tags which was functioning properly Recently, I moved the script to a separate JavaScript file ...

javascripthtml

Utilizing Font Awesome within the `<fieldset>` element alongside Bootstrap 4 forms

When it comes to single-input forms in Bootstrap 4, a convenient method for incorporating font-awesome icons is by utilizing the input-group-addon class: <div class="input-group"> <span class="input-group-addon"> <i class="fa fa ...

htmlcsstwitter-bootstrapfont-awesome

The mobile version of my website's home page is not displaying certain elements of the featured image

I'm in the process of launching a fresh new blog with Flask as the backend. Currently, I'm using a Bootstrap template and have set an image as the featured image. While it displays properly on computers, tablets crop it out. You can check out the ...

htmlcssflaskbootstrap-4web-deployment

How can XPATH be written for an HTML tag that contains spaces before and after the text, such as <button>spaces text spaces</button>?

When developing a selenium-java script, I encountered an issue while trying to assert the text "Export All". The spaces between the HTML tags are causing difficulties in asserting it. I am seeking assistance in writing the xpath for this scenario. Can any ...

javahtmlxpathselenium-webdriver

What is the best way to position a popup div in CSS?

Currently, I am in the process of developing a website that displays DVD details when hovering over an image, similar to what is shown in picture 1. However, I've encountered an issue where the content gets cut off for DVDs located on the right side o ...

javascripthtmlcss

Aligning image vertically

I'm working on aligning an image vertically in my header. Currently, it's horizontally centered. header { background-color: blue; height: 118px; width: 1024px; text-align: center; } .container { margin-left: auto; margin-right: aut ...

htmlcssalignment

Splitting the page into four sections with a unique H layout using CSS styling

Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...

htmlcssflexboxcss-float

Tips for making a JavaFX Button transparent without reducing the hitbox size

When I create a new Button in JavaFX and make the background transparent using either myButton.setBackground(Background.EMPTY); or myButton.setStyle("-fx-background-color: transparent;"), the hitbox is reduced to just the text inside the button when trigge ...

cssuser-interfacebuttonjavafx-8transparent