Css wont apply to bootstrap navbar-CodePudding

Below is a snippet of code from my html and css files on a website. I want the navbar to be slightly transparent and the links to be centered on the navbar but my css wont apply to the navbar, just unsure why.

HTML

    <body>
        <div >
            <div >
                <div >
                    
                    <!--Navigation bar-->
                    <nav  id="navbar">
                        <a  href="index.html">
                            <img src="images/DallE_Extendo-removebg.png" width="80" height="60" alt="">
                            </a>
                        <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span ></span>
                        </button>
                        <div  id="navbarNav">
                            <ul >
                                <li >
                                    <a  href="index.html">Home</a>
                                </li>
                                <li >
                                    <a  href="aboutus.html">About us</a>
                                </li>
                                <li >
                                    <a  href="products.html">Products</a>
                                </li>
                                <li >
                                    <a  href="contactus.html">Contact us</a>
                                </li>                        
                            </ul>
                        </div>
                    </nav>
                    <!--NavBar Ends-->

                    <img src="images/ShopInsideBooking (4).png"  alt="Responsive image">

                </div>
            </div>
        </div>    
    </body>

CSS

#navbar{
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
  }

Any help is appreciated :)

CodePudding user response：

Right.

First thing you need is the good old !important on the background-color because bootstrap already have a bunch of styles and you won't be able to override them without it.

That fixes your issue with the transparency. You can also use opacity instead of background color if you're not changing the current color and the result is acceptable.

For the aligning of things, bootstrap has a few flex features (if you're using BS5) and you can make use of them.

One thing that I would do is to remove the <nav> from the div/row/col stuff because divs are not flex by design so you'll have to change the display of several elements or even add hacks with auto margin to get the output. Add the container directly on nav or navbar items, whatever you feel is suitable but remove the row/col because since it's a nav I'm assuming is the main nav.

Ok.

Once you remove the div/row/col you can just set the nav#navbar as flex and add a margin: 0 auto to it.

Like this https://jsfiddle.net/x1c0yanr/

nav#navbar {
  background-color:rgba(0,0,0,0.5) !important;
}

nav#navbar ul.navbar-nav {
  display: flex;
  margin: 0 auto;
}

EDIT: I realized after answering that you're using bootstrap 4 so I tested using BS4.4.1 as well. It works :D Take a look at flex. aligning, arranging, ordering. It's amazingly easy to to things using it. Here using BS4.4.1: https://jsfiddle.net/v3dn8cqu/