Dark background with Bootstrap 4's blue horizontal line beneath the navbar list

How can I remove the blue horizontal line that is appearing on the navigation bar below the list, creating a separation between two elements against a dark background? I am using Bootstrap 4 but unsure of how or why it appeared there. Additionally, I am struggling to make the search bar functional with this code.

@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
            body {
                font-family: 'Poppins', sans-serif;
                background: #fafafa;
            }
            
            p {
                font-family: 'Poppins', sans-serif;
                font-size: 1.1em;
                font-weight: 300;
                line-height: 1.7em;
                color: #999;
            }
            
            a,
            a:hover,
            a:focus {
                color: inherit;
                text-decoration: none;
                transition: all 0.3s;
            }
            
            .navbar {
                padding: 15px 10px;
                background: #fff;
                border: none;
                border-radius: 0;
                margin-bottom: 40px;
                box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
            }
            
            ... (the remaining CSS code)
        
<!doctype html>
            <html lang="en">
              <head>
                ...
              </head>
              <body>
                ... (the remaining HTML code)
              </body>
            </html>

Answer №1

The solution to your issue lies here:

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

To resolve the problem, simply delete the border-bottom property.

#sidebar ul.components {
    padding: 20px 0;
}

Verify the modified code below, it should be working properly :)

... (content unchanged)

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 the flexslider to override CSS styles in an <li> element

I have implemented the flexslider by whoothemes on my responsive website to showcase tiles. However, I am facing an issue with setting a specific width for the tiles on various devices. Upon inspecting with Chrome, I see this code: <li style="width: 21 ...

Utilizing JavaScript to set a cookie value and using PHP to showcase its content

I'm facing an issue with my output and can't seem to pinpoint the problem. Below is the code snippet in question: sample.js var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October" ...

How can I position a div in the center of a fullpage.js slide?

I'm currently utilizing the fullPage.js plugin sourced from this link: . I have successfully implemented vertical slides by using the following HTML code: <div class="section" id="section2"> <div class="slide" id="slide1"> ...

Tips for creating a prototype of a Web Dashboard App within just 4 weeks!

Current predicament: Scheduled to showcase a prototype of an online dashboard application come January. Skills: Proficient in Python, particularly with data science frameworks, but lacking experience with Django / Flask or languages outside of Python. Ob ...

Is it possible to incorporate button classes from the <a> tag into a JQuery fade in/fade out function?

My jQuery image thumb Slider features thumb buttons that link to different div elements. When a user clicks on a thumb button, I want the associated div to smoothly fade in, replacing the previous one. The goal is to have a seamless transition between the ...

Is it necessary for the input element to be placed within a form?

One of the components I have in my React project has a specific purpose: allowing the user to input a word, press enter or click a link, and go to that word's definition page. 'use client'; import { FontAwesomeIcon } from '@fortawesome ...

What is the best way to keep fixed input at the bottom of the page?

Let me begin by stating that I struggled to come up with a more appropriate name for this question than the one above. My issue is not limited to a fixed input; it's much more complex. Let me delve into the details of my problem here. The Scenario I ...

Change the structure of the content in a div

Seeking assistance with a slider code that switches between two dividers, previous and next. Each divider currently displays ten images in two parallel vertical lines. I am attempting to modify the layout so that each divider showcases five images on two p ...

Is it possible for jQuery UI Tabs to load entire new HTML pages?

In my index.html file, I have set up 3 different tabs. Using the jQuery UI function tabs(), I am attempting to load an HTML page via Ajax. Each HTML page includes the jQuery library and contains the following code: <link type="text/css" href="css/redmo ...

A method of submitting by simply pressing the enter key alongside clicking on a Bootstrap button

Here is the HTML code I am using to input prompts into a chatbot: <div class="input-group mb-3"> <input type="text" class="form-control" id="chat-input"> <div class="input-group-append ...

Is the <style> tag effective when placed within other elements?

When I look at it, I notice something along these lines: <div> <style type="text/css"> ... </style> </div> It seems weird, but it's functional. Does this go against any standards? ...

React Native ellipsizeMode - Using two Text elements side by side

I am trying to achieve a layout similar to the following scenarios: Case 1: If the text is longer than the screen width +--------------------------------------+ | very long teeeeeeeeeeeeeeeee.. (1234)| +--------------------------------------+ Case 2: If ...

Unable to adjust the padding of the material UI Select component

I'm having trouble adjusting the padding of the Select component in order to align it with the size of my other text fields. Despite knowing that I need to make changes to nested components, I have yet to discover a viable solution. <div className ...

What are the steps to shift columns to the left within a table?

I need to adjust the alignment of the columns and also create a fixed size space between them. Currently, it appears like this: https://i.sstatic.net/F7Rqk.png My desired outcome is something similar to: https://i.sstatic.net/ALKa9.png CSS Code: .tabl ...

Children transform when the parent element is being hovered

I need assistance with changing the child element when the parent is hovered over. I also want to modify an attribute of the parent at the same time. Specifically, I want the background color of #action to change and also adjust the color of the a or h1 el ...

Looking for a specific search term within the middle of strings in an array

Is there a way to improve the autocomplete feature of my input field so that it shows suggestions based on any part of the word typed in? I currently have it set up to only show suggestions if the input matches the start of a word in the array. How can I m ...

Incorporating a navigation bar at the top and a sidebar on the left side of the lower half of an HTML webpage

Currently utilizing materializecss and bootstrap, I am aiming to create a design that resembles: --------------------------------- --------------------------------- | | | | The objective is to split the page into two horizontal sections. The ...

What is the best way to eliminate all styles from an element with jQuery?

body{ font-family: Arial; } div{ color: red; margin: 20px; background: blue; font-size: 17px; } <div id="div1">this should be styled with a blue background, red text, and 17px Arial font</div> <div id ...

"Maximize user experience: Eliminate the "#" in your URL by utilizing anchor tags for one-page navigation in

I've created a website with menu tabs including Home, About, Work, and Contact. To make navigation easier, I've used anchor tags for this one-page layout. However, I'm concerned about the URLs updating when clicking on the tabs. I prefer to ...

Is there a way to verify if an HTML popover is currently displayed?

Is there a method using JavaScript to determine if the popover is open when utilizing the new popover API? <button popovertarget="pop">Trigger the popover</button> <div popover id="pop">This is the content of the popover!</div> ...