Как полностью удалить фон navbar-collapse?

Question

Раскрывающееся меню моего гамбургера - это то, что я хочу;однако между секундами нажатия на гамбургер и появлением выпадающего меню, я считаю, что navbar-collapse collapse show div появляется / исчезает.Если я отобразлю: нет, мое меню тоже не появится, и я не уверен, что еще попробовать.

Мое приложение в React, но я не думаю, что это портит навигационную панель.Глядя на другие вопросы / ответы, я думаю, что это что-то в функциональности Bootstrap navbar-collapse, navbar-collapsing и navbar-show.

HTML

import React, { Component } from 'react';
import '../styles/NavBar.css';


class NavBar extends Component {
render() {
    return (
        <div className='NavBar'> 
            <nav className="navbar navbar-expand-xl navbar-light">
            <span><a id="pageTitle" className="navbar-brand" href="/">Visible Heart<sup>®</sup> Laboratories</a> | <a id="surgeryTitle" className="navbar-brand" href="https://www.surgery.umn.edu/">Department of Surgery</a></span>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNavDropdown">

                    <ul className="navbar-nav" id="hamburgerMenuFix">
                    <li className="nav-item" id="navListItem">
                            <a className="nav-link" href="/gift" id="navbarDropdownMenuLink" role="button">
                                Give
                            </a>
                        </li>
                        <li className="nav-item dropdown" id="navListItem">
                            <a className="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                People
                            </a>
                            <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a className="dropdown-item" href="/about">Meet the Lab</a>
                                <a className="dropdown-item" href="/collaborators">Collaborators</a>
                                <a className="dropdown-item" href="/affiliations">Department Affiliations</a>
                            </div>
                        </li>
                        <li className="nav-item dropdown" id="navListItem">
                            <a className="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Research
                            </a>
                            <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a className="dropdown-item" href="/research-3d">3D Modeling</a>
                                <a className="dropdown-item" href="/research-ca">Cardiac</a>
                                <a className="dropdown-item" href="/research-pc">Patient Care</a>
                                <a className="dropdown-item" href="/research-bb">Black Bears</a>
                                <a className="dropdown-item" href="/research-md">Medical Devices</a>
                                <a className="dropdown-item" href="/research-sm">Skeletal Muscle</a>
                            </div>
                        </li>
                        <li className="nav-item" id="navListItem">
                            <a className="nav-link" href="/news" id="navbarDropdownMenuLink" role="button">
                                Lab News
                            </a>
                        </li>
                        <li className="nav-item" id="navListItem">
                            <a className="nav-link" href="/publications" id="navbarDropdownMenuLink" role="button">
                                Publications
                            </a>
                        </li>
                        <li className="nav-item" id="navListItem">
                            <a className="nav-link" href="http://www.vhlab.umn.edu/atlas/index.shtml" id="navbarDropdownMenuLink" role="button">
                                The Atlas
                            </a>
                        </li>
                        <li className="nav-item" id="navListItem">
                            <a className="nav-link" href="/media" id="navbarDropdownMenuLink" role="button">
                                Media
                            </a>
                        </li>   
                        <li className="nav-item dropdown" id="navListItem">
                            <a className="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Contact & Directions
                            </a>
                            <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">                    <a className="dropdown-item" href="/directions">Directions and Maps</a>
        </div>              </li>
                    </ul>
                </div>
            </nav>
        </div>
    );
}
}

export default NavBar;

CSS

/* General CSS */
.NavBar {
    background-color: gold;
}

.dropdown-menu {
    background-color: gold
}

a:hover {
    background-color: #ffdf32
}


/* Specific CSS */
#navbarDropdownMenuLink{
    color: #7a0019;
}

.dropdown-menu > .dropdown-item {
    color: maroon;
    background-color: gold
}

.dropdown-menu > .dropdown-item:hover {
    background-color: #ffdf32
}

#navListItem {
    padding-top: 0px
}


/* VH Lab and Dept of Surgery heading style */

.navbar-brand {
    text-decoration: none;
    margin-right: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.vhColor {
    color: maroon
}


#navbarNavDropdown {
    padding-left: 80px;
}

.navbar-nav {
    padding-left: 100px;
    text-align: right;
}

#pageTitle {
    font-size: 26px
}

#surgeryTitle {
    font-size: 16px
}

/* ===========================MEDIA QUERIES-iPad & Phones=============================================== */
@media only screen and (max-width: 1030px) {
    .navbar-nav {
        position: absolute;
        background-color:gold;
        z-index: 1;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
        text-align: left;
        margin-left: 450px;
        padding-left: 10px;
        padding-right: 10px
    }
}