Challenges arise with setting the background-color for a bootstrap 4 navbar

Hey there, I'm having trouble changing the background color and opacity of a navbar using rgba. Can anyone provide some guidance on this issue?

#navbarr {
  background-color: rgba(0, 0, 0, 0.8);
}
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md" id='navbarr' role="navigation">
      <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only" id="asupr">Toggle navigation</span>
        &#x2630;</button>
        <a class="navbar-brand" href="index.html">Portfolio</a>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav ml-auto">
            <li class="active nav-item"><a href="index.html" class="nav-link">Accueil</a>
            </li>
            <li class="nav-item"><a href="works.html" class="smoothscroll nav-link">Travaux</a>
            </li>
            <li class="nav-item"><a href="contact.html" class="smoothscroll nav-link">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

Answer №1

get rid of the bg-dark class.

<div class="navbar navbar-dark fixed-top navbar-expand-md" id='navbarr' role="navigation">
      <div class="container">
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only" id="asupr">Toggle navigation</span>
        &#x2630;</button>
        <a class="navbar-brand" href="index.html">Portfolio</a>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav ml-auto">
            <li class="active nav-item"><a href="index.html" class="nav-link">Accueil</a>
            </li>
            <li class="nav-item"><a href="works.html" class="smoothscroll nav-link">Travaux</a>
            </li>
            <li class="nav-item"><a href="contact.html" class="smoothscroll nav-link">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

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

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

On the front page, there are approximately 16 posts displayed along with a filter featuring 4 drop-down menus showcasing post categories. I have assigned category names as classes to each post div and am currently using javascript to hide them. The code s ...

Real-Time Chat Update Script

Recently, I've been delving into PHP and attempting to create a live chat web application. The data for the chat is stored in a MySQL database, and I have written a function called UpdateDb() that refreshes the chat content displayed in a certain div ...

Adjusting the navigation image as it passes through various div elements during scrolling

Is it possible to dynamically change an image in the navigation bar based on the user's scroll position? For example, I want pic1 to be displayed when the page content is at the top, then switch to pic2 once the user reaches the footer, and then back ...

What steps are needed to develop a proper HTML structure for this specific box in order to achieve the desired aesthetics?

Currently working on a box that includes various tags and an input field for adding new tags. The goal is to make this box resemble the tag form used on YouTube: https://i.stack.imgur.com/RSj2p.png This particular layout features a box with existing tags ...

Instructions for turning an HTML table cell into an editable text box

Essentially, I'm looking to enable users to click on the table and edit the text within it. I found inspiration from this Js Fiddle: http://jsfiddle.net/ddd3nick/ExA3j/22/ Below is the code I've compiled based on the JS fiddle reference. I tho ...

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...

Requiring addresses for Google Maps in order to display directions

To display the directions between two addresses based on the chosen transportation mode, I need to pass the addresses to the code in page 2. After the user selects two cities from a Dropdown box on page 1, they will be sent to the code to show their locati ...

Arrange multiple elements in a column using the flexbox `justify-content` property

I have a div containing h1 and h2 tags. My objective is to center them both horizontally and vertically using flexbox. However, my current code aligns them diagonally like this: -------------- | | | h1h2 | | | --------- ...

What is the best way to display grouped items horizontally in an ASP.NET ListView?

My ASP ListView currently displays items vertically in columns with GroupItemCount set to 3: A D G B E H C F I Is there a way to adjust the display so that it groups items horizontally in rows like this? A B C D E F G H I This is the ListVi ...

What is the best way to create a personalized image as the background in WordPress using CSS for a client?

I have this in my style.css .showcase{ background: url("x.jpg") no-repeat 0; } My website is built on WordPress and I have implemented advanced custom fields for the client to edit text. However, I am struggling to find a way for them to change the ...

Would it be advisable to store HTML data in a database?

Currently, I am in the process of developing a blog-app project using Angular 7. For the backend, I am utilizing firebase cloud functions and performing CRUD operations by storing HTML content in firebase with the help of Angular - CKEditor component. Whe ...

What is the best method for adjusting the size of a button on a video as needed?

@import url("https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap"); * { margin: 0px; padding: 0px; box-sizing: border-box; font-family: "Luxurious Script", cursive; } body { background-color: #e97272; } .navbar { backgr ...

Refresh the HTML content within a specified div element

In my index.html, there is a graph (created using d3.js) along with some code that displays a stepper with a number of steps equal to the child nodes of the clicked node: <div ng-include="ctrl.numlab==2 && 'views/stepper-two-labs.htm ...

The CSS background shadow on one div behaves differently compared to the neighboring div

Currently, I am facing an issue where I have two divs positioned next to each other in a line. http://jsfiddle.net/A5Jc7/60/ The HTML structure is as follows: <div> <div class="box1"></div> <div class="box2"></div> ...

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

I am seeking assistance in creating a responsive Navbar that transitions from transparent to solid when the screen size changes, such as on a smartphone. I want the Navbar to remain fixed at the top of the page and not move down as I scroll. I tried adding ...

Transferring checkbox data to Bootstrap modals and dynamically summoning specific div modals using their unique identifiers

I have been trying to populate the checkbox values into corresponding modal divs based on button clicks, but I am facing difficulties in achieving it. Desired outcome: The buttons should trigger the display of selected checkbox values in their respective ...

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Is there a method to override the padding inherited from "@ .MuiAlert-icon"? The Chrome inspector indicates that the current padding is set to 7px. .MuiAlert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; ...

Assistance needed with CSS floating properties

Despite seeing many inquiries about float, I still can't pinpoint what's causing my issue. My objective is simple: GREETINGS FRIEND I aim for it to align just to the left of the unordered list. Referencing this solution, I attempted adding cl ...

Is the top margin of the page not properly aligned?

Upon loading my page, I noticed that the bar at the top covers the header. However, by clicking the hide bar arrow, the header becomes visible. When I click the reappear arrow, the margin adjusts automatically to place the header underneath the bar. I&apo ...

What is the process for making a local storage item accessible to others on a network?

Can a local storage item be accessed from any computer on the network using the same Google Chrome extension that was previously set up? ...