Ways to get rid of the white horizontal line generated by bootstrap framework?

I'm currently working on a responsive navbar design and I want it to appear transparent over a background image. However, my front-end knowledge is limited as I've only been learning for a week. Can anyone advise me on how to remove the white bar and position my navbar on top of the image? I'm aiming for a similar look to this: 

#background{
    
    width: 100%;
    height: 100vh;
    background: url(https://image.freepik.com/fotos-gratis/pranchas-de-madeira-com-fundo-borrado-restaurante_1253-56.jpg) top center;
    filter: brightness(30%);
    background-size: cover; /* parallax */
    background-attachment: fixed;
    background-position: center;
    position: relative;
    padding: 0;
   
}

#header{
    background: rgba(12, 11, 9, 0.6);
    transition: all 0.5s;
    z-index: 997;
    top: 100px;
} 

.navbar ul{
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

li a{
    color: white;
    font-size: 1.2rem;
    font-family: 'Inconsolata', monospace;
    font-weight: bold;
}

li a:hover{
    color: #759c4d;
}

ul, li{
    list-style-type: none;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3d30302b2c2b2b73f3c4b21233f2d30">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg " id="header"> 
            <div class="container-fluid">
                <a href="#" class="navbar-brand">
                    <img src="/Logos/logo.png" alt="">
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav  me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link scrollto active" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollto active" href="#produtos">Produtos</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollto active" href="#">Adega</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollto active" href="#">Hortaliça</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollto active" href="#">Promoções</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollto active" href="#">Localização</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link scrollto active" href="#">Login</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        

        <section id="background" class="d-flex align-items-center"></section>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

To enhance the design, simply delete the button:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

Take a look at this example:

<nav class="navbar navbar-expand-lg " id="header">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">
            <img src="/Logos/logo.png" alt="">
        </a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav  me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link scrollto active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scrollto active" href="#produtos">Produtos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scrollto active" href="#">Adega</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scrollto active" href="#">Hortaliça</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scrollto active" href="#">Promoções</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scrollto active" href="#">Localização</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link scrollto active" href="#">Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script src="index.js"></script>
  <link rel="stylesheet" type="text/css"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
  </script>

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

Ensure that the user remains within the current div when they click the submit button, even if the textbox is

For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the sam ...

javascriptjqueryhtmlcssajax

When the height of a sibling element restricts the inner content and scroll bar due to the parent element's height being defined in vh

I'm currently working on creating a sidebar that occupies a fixed percentage of the viewport. Inside this sidebar, I want to have an element that remains fixed at the top while allowing the rest of the content to scroll if it exceeds the height of the ...

htmlcss

Instructions on passing a PHP variable as a parameter to a JavaScript function when a button is clicked

In my implementation of codeigniter 3, I have a view page where the data from $row->poll_question is fetched from the database. The different values within this variable are displayed on the voting.php page. Next to this display, there is a button label ...

javascriptphpjqueryhtmlcodeigniter

PHP Form Submission: A Simple Guide

One scenario that I'm facing is using the submit button event to populate a field in my form with a value. However, now I'm having trouble getting the form to submit at the same time. Any suggestions on what I can do? Check out this link for mor ...

phpjqueryhtmljson

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

javascriptcssjquery-animate

`Issues with CSS/JQuery menu functionality experienced in Firefox`

After creating a toggleable overlay menu and testing it in various browsers, including Internet Explorer, everything seemed to work fine except for one major issue in Firefox (version 46). The problem arises when toggling the overlay using the "MENU" butt ...

javascriptjqueryhtmlcssfirefox

Mastering the use of SVG icons in Angular 4+: A comprehensive guide

I have an icon.svg file with a collection of icons that I would like to use in my app, similar to how we display material icons. Does anyone have any ideas on how to include the file in the app and use these icons? I've tried looking for solutions a ...

cssangularsvg

Manipulating DropDownList Attributes in ASP.NET using JavaScript

I am facing an issue with populating a Dropdownlist control on my ASCX page. <asp:DropDownList ID="demoddl" runat="server" onchange="apply(this.options[this.selectedIndex].value,event)" onclick="borderColorChange(this.id, 'Click')" onblur="bo ...

javascripthtmlasp.netajax

Display one div and conceal all others

Currently, I am implementing a toggle effect using fadeIn and fadeOut methods upon clicking a button. The JavaScript function I have created for this purpose is as follows: function showHide(divId){ if (document.getElementById(divID).style.display == ...

javascriptajaxhtmlcss

NodeJS for CSS Parsing and Selecting

Can anyone recommend a NodeJS library similar to https://github.com/alexdunae/css_parser? I have tried using https://github.com/visionmedia/css, but it doesn't fulfill all my requirements. For example, when I parse the following CSS: .behavior1 {co ...

cssnode.js

What is the method for determining the intersection of multiple rgba values?

If I have the following CSS code: .example { background-color: rgba(0, 0, 0, 0.5); border-color: rgba(0, 0, 0, 0.5); } Even though the background-color and border-color share the same rgba value, they appear as different colors due to how the bor ...

htmlcssrgba

The jQuery append function does not incorporate CSS styling

I am currently facing an issue where my jQuery code successfully appends a piece of HTML, but the CSS styles are not being applied to it after the append operation. What is the correct approach to resolve this? This is the method I am using: if(listone[ ...

jquerycss

What causes jQuery's append function to trigger a redraw of my Div?

I have a unique function that incrementally increases the date by one day every second. Once the date matches specific dates, I aim to update my #newsDiv with extra text content. The #newsDiv will display all historical "news" and will be set to scroll to ...

javascriptjquerycss

Is the 404 error a result of the ajax code?

I'm currently working on a form that utilizes AJAX to validate and interconnect various form elements. Below is a simplified version of my code: <?php if( isset( $_POST['create_transaction'] ) ) { // do something } ?> <div> ...

javascriptphphtmlajaxhttp-status-code-404

How can we create responsive websites?

Since starting my Software Developer studies about 3 months ago, I've been working on a website project for a driving school with a team of four. The issue we're facing is that when we transfer and open files between laptops, the website layout a ...

javascripthtmlcss

Can you explain how the CSS hack *+html works?

While working on a project, I have encountered multiple rules that look like this: * + html { /.../ } Although I understand the purpose of using * and +, I am unsure about the significance of this particular construction. Additionally, I came across ...

htmlcsscss-selectors

Issue with the read more button inoperative for two specific paragraphs

Upon trying to implement 2 or more "Read More" buttons on my website for users to view snippets of content before downloading, I encountered an issue with the functionality only working on the first paragraph and not the subsequent ones. Despite ...

htmljquery

The comparison between AJAX and JSON passing and PHP generating HTML versus returning it

Currently, my code looks like this: <li onclick = " function CBAppData( callerObj, data ) { var string = ''; for( a in data ) { debug.push( data[ ...

phpjavascripthtmlajax

What is the best way to incorporate width adjustments in an image source for a responsive website?

Currently learning CSS and experimenting with it on an HTML page. For reference, I'm using this link. Encountering an issue with a responsive header image that adjusts size based on device (small on mobile, large on desktop). Is it possible to achiev ...

jqueryhtmlcss

Explaining the Usage of Nav-pills in Bootstrap v4

I am looking to align my navigation bar across the width of the div. However, I am currently using Bootstrap v4 and the nav-justify class is not available yet. Below is the code snippet: <ul class="nav nav-pills"> <li class="nav-item"> ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4