Tips for eliminating the bottom border on a nav-tab in Bootstrap 4

Question

When a vertical navigation menu item is selected, a border appears below the item. How can I remove this border?

.nav-tabs li, .nav-tabs li a {
    border-bottom: none;
}

Here is a picture of the border:

Answer 1

Answer №1

To get rid of the box-shadow effect on the main-purple element, delete the following CSS:

.main-purple {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Answer 2

To get rid of the box-shadow effect on the main-purple element, delete the following CSS:

.main-purple {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Answer 3

Assign the class "tab-button" to the primary ul element:

tab-button

and then apply some styling:

.tab-buttons {border-bottom: 0px !important;}

Answer 4

Assign the class "tab-button" to the primary ul element:

tab-button

and then apply some styling:

.tab-buttons {border-bottom: 0px !important;}

Answer 5

The issue appears to be with #vertical-nav. Removing the box-shadow will eliminate the "border" below that section.

UPDATE: Based on the screenshot provided, replacing the code for #vertical-nav with the following should resolve the problem:

#vertical-nav {
    padding-left: 0;
    padding-right: 0; 
    color: #fff;
}

Answer 6

The issue appears to be with #vertical-nav. Removing the box-shadow will eliminate the "border" below that section.

UPDATE: Based on the screenshot provided, replacing the code for #vertical-nav with the following should resolve the problem:

#vertical-nav {
    padding-left: 0;
    padding-right: 0; 
    color: #fff;
}