Customize the Bootstrap Navbar to display background only on the right side and not across the entire width

I am utilizing Bootstrap's navbar, specifically using the dropdown toggler icon on the right side. I am looking to have a background that only covers the right portion of the width and not the entire width. Any suggestions or insights would be greatly appreciated.

Here are my two attempts:

My desired outcome:

.menu {
  font-family: header;
  color: white !important;
  font-size: 3rem;
  background-color: rgba(0, 0, 0, 0.3);
}

.menu-bg {
  background-color: rgba(0, 0, 0, 0.3);
}

body {
  background: #333 !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d5649564b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-dark fixed-top pt-md-5 pe-md-5 pt-2 pe-2">
  <div class="container-fluid">
    <button class="navbar-toggler ms-auto custom-toggler menu collapsed" 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> MENU
    </button>

    <div class="collapse navbar-collapse menu-items" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 menu-bg">
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3" href="#features">FEATURES</a>
        </li>
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3" href="#counter">SHARK COUNTER</a>
        </li>
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3" href="#about">ABOUT US</a>
        </li>
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3" href="#faq">FAQ</a>
        </li>
        <li class="nav-item ms-auto">
          <a class="nav-link pe-3 rounded-bottom" href="#">BACK TO TOP</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e3eeeef5f2f5f3e0f1c1b4afb0afb2">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

htmlcssbootstrap-5

Answer №1

Feel free to experiment with

.menu-bg {
    width: 250px;
}

Answer №2

Check out this example in action. The key is to utilize position:absolute and specify the width of the dropdown so that it remains aligned to the right.

.menu {
font-family: header;
color: white !important;
font-size: 3rem;
background-color: rgba(0, 0, 0, 0.3);
}

.menu-bg {
    background-color: rgba(0, 0, 0, 0.3);
}
#navbarSupportedContent {
  width:150px;
  position: absolute;
  right:0px;
  top:100%;
}

.dropdown-wrap {
  position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="debcb1b1aaadaaacbfae9eebf0eef0ec">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark fixed-top pt-md-5 pe-md-5 pt-2 pe-2">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-10"></div>
      <div class="col-xs-2 dropdown-wrap">
        <button class="navbar-toggler ms-auto custom-toggler menu collapsed" 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> MENU
        </button>
        <div class="collapse navbar-collapse menu-items" id="SupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0 menu-bg">
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#features">FEATURES</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#counter">SHARK COUNTER</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#about">ABOUT US</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#faq">FAQ</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3 rounded-bottom" href="#">BACK TO TOP</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

View the live demonstration on JSfiddle

Answer №3

Just:

.header-background {
    background-color: rgba(255, 0, 0, 0.7);
    display: inline-block;
}

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

The process of sending a POST parameter to a page in PHP and opening it

When attempting to open a page using PHP, such as: $html = file_get_contents('https://hammihan.com/search.php'); I encountered an issue where the page was being redirected to https://hammihan.com/users.php due to an empty input for name. To addr ...

phphtml

What's preventing me from using the left click function on my published blog post?

This is my first time creating a blogger template and everything seems to be working correctly. However, I have encountered one problem. For some reason, I am unable to left click on my blog post. I have not installed any right/left click disabler and I&a ...

javascripthtmlcssblogsblogger

Using HTML within a Material-UI Accordion component

I am attempting to display HTML content within an Accordion component. import {Accordion, AccordionDetails, AccordionSummary, Typography} from '@material-ui/core'; import { Badge } from 'reactstrap'; ... const buildAccordion = (f, i) ...

htmlreactjsmaterial-uiaccordion

HTML-Formatted Email Content

Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...

javascripthtmlemail

What are the best practices for preloading images, JavaScript, and CSS files?

Back in the late 90's, I was really passionate about creating websites from scratch. However, as I dove back into web development recently, I realized how much the landscape has changed since then. As more of a designer than a developer, I opted to us ...

phphtmlcss

Minimize the gaps between items within a CSS grid design

I'm struggling with adjusting the whitespace between 'Job Role' and 'Company Name' in my grid layout. Here's a snippet of what I have: https://i.sstatic.net/l55oW.png The container css is set up like this: .experience-child ...

htmlcsscss-grid

Utilizing jQuery to Sort Table Rows based on an Array of Class Names

I have a table containing values and a filter option where users can select multiple values to filter the table. I want to create a filter with numbers ranging from 1 to 10, and assign class names like filter_1, filter_2, filter_3, etc. to each table row ( ...

javascriptjqueryhtmlarraystablefilter

Expanding the width of CSS dropdown menus according to their content

When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...

javascripthtmlcssdrop-down-menu

Trigger the onClick event of an element only if it was not clicked on specific child elements

<div onClick={()=>do_stuff()}> <div classname="div-1"></div> <div classname="div-2"></div> <div classname="div-3"></div> <div classname="div-4"></div> ...

javascripthtmlcssreactjsfrontend

Vue calendar - The month display is condensed to only one row

Currently, I am incorporating bootstrap-datetimepicker for Vue (found at https://www.npmjs.com/package/vue-bootstrap-datetimepicker) via CDN. The date display looks good, however there is an issue with the month view size when selecting a month. https://i ...

cssdatetimevue.jsdatetimepickerbootstrap-datetimepicker

The issue of selecting multiple classes simultaneously is not being resolved

Here is my JavaScript code snippet: $('.normal-box').click(function(){ //unique row id var id = $(this).data('row-id'); //its index according to the content array var index = $(this).data('index'); //which car ...

javascriptjqueryhtmlcssangularjs

The style of the button label does not persist when onChange occurs

Encountered an interesting issue here. There is a button designed for selection purposes, similar to a select item. Here's the code snippet: <button class="btn btn-primary dropdown-toggle" style="width: 166%;" type="button" id="dropdownMe ...

javascriptjqueryhtmlcssstyles

The issue with the max-height transition not functioning properly arises when there are dynamic changes to the max-height

document.querySelectorAll('.sidebarCategory').forEach(el =>{ el.addEventListener('click', e =>{ let sub = el.nextElementSibling if(sub.style.maxHeight){ el.classList.remove('opened&apos ...

javascriptcsscss-transitions

`Is there a way to manage date formats across all components using a single method in Angular?`

I need assistance with controlling the date format of dates displayed in different components using one typescript file. How can I achieve this? app.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', ...

cssangulartypescript

"Unfortunately, the JavaScript external function failed to function properly, but miraculously the inline function

Struggling to create a fullscreen image modal on the web? I was able to get it working fine when embedding the script directly into my HTML file, but as soon as I moved it to an external JS file, things fell apart. I've double-checked all the variable ...

javascripthtmlcss

SVG path with dynamic elements

Consider the following SVG: <svg xmlns="http://www.w3.org/2000/svg" width="237" height="129" viewBox="0 0 237 129" fill="none"> <path d="M228 1H9C4.58172 1 1 4.58172 1 9V91V104V127L20 111.483L228 112C232.4 ...

htmlcssreactjssvg

Is a CSS-only autoexpanding label possible within a list?

I am interested in having all the labels automatically expand to the size of the widest one. Below is the HTML structure: <div class="body"> <ul class="list"> <li> <span> <label>condition</label> ...

htmlcss

Locate elements using Class with Simple Selenium

I'm facing a challenge filling out a phone number on a web portal using Selenium with VBA. Despite the element being loaded, Selenium seems to be unable to locate the text box. This is my code: Dim ch As Selenium.ChromeDriver Sub FillPhoneNumbers() ...

htmlvbaselenium-webdriver

CSS Trick: How to Clear Content in a 3-Column Div arrangement

I've been struggling to clear the content below my three div columns, each consisting of a span with centered text and a textarea. It seems that the issue arises from the floating div tags without proper clearing. When viewed in Firefox, the next ele ...

csshtml

I am facing difficulties with the header in CSS as it is not resizing properly

I'm having trouble getting my mobile-first design to work properly because the header doesn't resize in mobile view. I'm satisfied with how it looks in full-screen, but I haven't been able to make any media queries work. You can downloa ...

javascripthtmlcss