The colors on my menu items are not displaying properly

I am currently using Bootstrap 5 and experiencing issues with the menu buttons not being completely colored. The background color works fine for the overall background, however, only the middle part of the buttons is getting colored, not the paddings around them. I have attempted to use background-clip but it doesn't seem to be working as expected.

HTML

<div class="theme-bg offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLeftLabel" style="background-color: #7bed9f;">
    <div class="offcanvas-header justify-content-end">
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-header d-flex flex-column justify-content-center">
        <img class="profile mb-2" src="{% static 'images/profile-default.png' %}">
        <h2 class="text-center ">Welcome Saif</h2>
    </div>
    <hr class="m-0">
    <div class="offcanvas-body p-0 container-fluid list-group list-group-flush border-bottom">
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between container-fluid theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-home me-1"></i> Home </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-search me-1"></i> Search </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-pencil me-1"></i> Write your blog </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-briefcase me-1"></i> Portfolio </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-gear me-1"></i> Settings </p>
            </div>
        </a>
        <a href="#" class="list-group-item list-group-item-action py-3 lh-tight">
            <div class="d-flex w-100 align-items-center justify-content-between theme-bg">
                <p class="mb-1 fs-6"><i class="fa fa-sign-out me-1"></i> Sign Out </p>
            </div>
        </a>
    </div>
</div>

CSS

.theme-bg {
    background-color: #7bed9f;
    padding: 0px;
    background-clip: padding-box;
}

The issue appears to be with the menu items not being fully colored as intended.

https://i.sstatic.net/cezbj.png

htmlcssflexboxpaddingbootstrap-5

Answer №1

  1. Eliminate any padding from your list-group-item elements (achieve this by assigning them a class of p-0)
  2. Apply the padding to the immediate child (
    d-flex w-100 align-items-center justify-content-between container-fluid theme-bg
    )

This solution worked for me, hopefully it can assist you too :)

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

compatibility of javascript with firefox

In my table, I have some JavaScript code that is causing some issues. <td nowrap="" style="background: none repeat scroll 0% 0% rgb(211, 211, 211);" onmouseout="this.style.background='#d3d3d3'; menu3.style.color='#000000'" onmouse ...

javascripthtmlfirefoxibm-midrange

Is Chrome not correctly using 100% viewport width (vw)?

I've been attempting to recreate the functionality of this codepen, and I've encountered an issue with the vw declaration in Chrome. Despite setting GalleryGrid to 100vw, it doesn't display correctly in Chrome, while Firefox and Safari work ...

htmlcssgoogle-chromeviewport-units

CSS not displaying hover color in Internet Explorer 8

Can you take a look at ? The links should turn red when hovered over. It seems to work perfectly in FF, Opera, and Chrome, but not in IE8. I'm stumped as to why this is happening. Changing a:link to text-decoration:underline makes the underline red on ...

cssinternet-explorer-8hyperlinkhover

Creating an adaptable grid system in Vue Material

I am working on a project where I am using Vue-Material to display user-inputted cards in a grid layout. While the cards are rendering correctly, I want to optimize the grid to make it flexible, justify the cards, and stagger them in a way that eliminates ...

javascriptvue.jsflexboxmaterial-designvue-material

CSS/Jade/HTML: struggling to get boxes to align properly on the same line

I'm currently working with a Jade template that looks like this: extends layout block content h2 Characters and Portraits div(id="portraitsBox") - var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Sid ...

cssnode.jstemplatespugcascade

How can I turn off the responsive font sizes in bootstrap 5?

How can I turn off RFS in Bootstrap 5 easily? I attempted: $font-size-base: 1.6rem; $font-size-lg: $font-size-base; $font-size-sm: $font-size-base; However, it seems like reboot.scss is overriding it. ...

twitter-bootstrapbootstrap-5

Within the flask framework, I am experiencing an issue where paragraphs are being overwritten. My goal is to find a

Snippet of HTML: <div class="split left" > <div class="centered"> <div class="container"> <p>Hi!</p> </div> <div class="darker"> <p>{{message}}& ...

pythonhtmlcssflaskjinja2

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

Restore the href attribute following modal closure

Among the buttons in my gridview, there are options to trigger a bootstrap modal, each with different contents: return Html::a('<i class="fa">&#xf06e;</i> ', $key, [ 'title' => 'View det ...

javascriptyii2bootstrap-modalbootstrap-5

Transferring information from JSON to HTML

Recently, I came across this handy design tool within our service that helps generate Gauge charts by simply adding a specific div class to the desired pages. <div class="gauge" id="g0" data-settings=' { "value": ...

javascripthtmljson

CSS: Implement pause functionality for animations with a timer

I'm working on a timer implementation that allows users to start the timer and pause or continue it whenever they want. I faced a challenge when trying to pause the SVG animation. I tried following this article, but it didn't work as expected. ...

javascripthtmlcsssvgcss-animations

Disable responsiveness for low-resolution devices

Is there a way to disable responsive design on small resolution devices? The responsive layout appears distorted when accessed on a phone. See screenshots for more details. Phone Desktop ...

htmlcsstwitter-bootstrapresponsive-design

I want to know how to use PHP to count the number of occurrences of a specific value in a MySQL table and then echo the count. Can you help me with

I am working with a MySQL table that contains several varchars in one column. My goal is to determine the number of times a specific varchar appears in this column and then display that count using PHP. Can anyone provide me with the necessary SQL code to ...

phphtmlmysql

What is the best way to manage the alignment of elements within their parent containers in my situation?

Attempting to replicate the design of a website by starting with the navigation bar. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="https: ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Using HTML5, the <section> element can inherit styling from the

This is my first time building a website using HTML5 and I've come across a small problem. Here is the code snippet: <header></header> <section> <header></header> <article></article> <footer></foot ...

htmlcss

How can we enhance the efficiency of rendering text on the screen?

Imagine having a <p> tag inside a <div> with specific properties: div { height: 100px; width: 100px; overflow: hidden; } My goal is to continuously add words to the <p> tag until an overflow is detected, meaning stop when the f ...

javascripthtmlcss

What is the method to alter the color of an SVG source within an image tag?

I am currently working on a component that involves changing the color of an SVG icon from black to white when a color prop is given. export class CategoryIconComponent extends React.Component { static displayName = 'CategoryIcon'; state = ...

javascriptcssreactjssvgecmascript-6

Customize Bootstrap Vue dropdown without any predefined styling options

After reviewing the documentation, I created a sample example utilizing the b-dropdown component: You can view the example here: https://codesandbox.io/s/6lhk6?file=/src/components/GenericItem.vue However, when I implemented the component in the code: &l ...

javascriptcssvue.jsvuejs2bootstrap-vue

A guide on obtaining meta tag content values and calculating their average

Currently, I am in the process of developing a website that makes use of Schema.org microdata to provide structured content for product listings. One thing I have come across is that Google requires an aggregate rating based on all the reviews. How can I e ...

javascripthtmlmeta-tagsschema.orgstructured-data

Is there a way to dynamically change the height in jQuery/JavaScript?

I am encountering an issue with my embed code where the height changes randomly after a few seconds, depending on certain parameters. Here is an example of the code I am using: $( <embed></embed>) .attr("src", "http://www.bbs.com") ...

javascriptjqueryhtmlcss