Unable to modify the background color for the class "menu"

I am struggling to change the color of the "menu" class in my CSS code. Even though I have specified a background-color of black for the class, it doesn't seem to be taking effect. Can anyone recommend a better CSS reset or offer another solution?

.menu {
 background-color: black;
}

<div class="menu">
<div class="container">
  <nav class="navbar navbar-expand offset-3 fixed-top">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
       <span class="navbar-toggler-icon"></span>
     </button>
    <div class="collapse navbar-collapse" id ="collapse-menu">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#gioithieu">ABOUT</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">CONTACT</a> 
        </li>
      </ul>
    </div>
  </nav>
</div>

htmlcssbootstrap-4frontendbackground-color

Answer №1

The issue with your background not being displayed is due to the collapse of the .menu element, resulting in zero height and width. This is caused by the child having a position: fixed property which causes it to break out of the parent container. To resolve this, you can utilize Bootstrap 4 classes to set the background-color.

<div class="menu fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand offset-3">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
           <span class="navbar-toggler-icon"></span>
         </button>
        <div class="collapse navbar-collapse" id="collapse-menu">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="#gioithieu">ABOUT</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">CONTACT</a> 
            </li>
          </ul>
        </div>
      </nav>
    </div>
</div>

Answer №2

experiment with the usage of !important in this manner

<style>
    .navigation
    {
     background-color: black!important;
    }
</style>

Answer №3

Give this a shot:

<style>
.menu{
 background-color: black !important;
}
</style>

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 issue with NGX-Bootstrap/Angular Pagination arises when attempting to adjust the maxSize input while the screen view (width) is being altered

Currently, I am utilizing the Pagination component from Valor Software (click here to access). I am interested in adjusting the maxSize input dynamically based on changes in screen width. For reference, please see this example: Click to view example. It ...

javascripthtmlangularngx-bootstrap

Difficulty in making Materialize.css column match the height of the entire row

Utilizing React.js, Materialize.css, and certain MaterialUI components in collaboration to build a website. Developed a header (React component, basic div with title and logout button) for the site using a Materialize.css "grid". Issue: The react compone ...

cssreactjswebmaterial-uimaterialize

The logo on my header is being covered by the menu due to the CSS code

Check out my website at bee-barcelona.herokuapp.com I'm facing an issue where the menu overlaps with the logo when I resize the browser or view the webpage on a tablet. I want to fix this using CSS. What changes do I need to make to ensure that the e ...

htmlcss

Printing values of an object in an Angular/HTML script is proving to be quite challenging for me

In my Angular project, I have created a service and component for listing objects. The list is functioning correctly as I have tested it with 'console.log()'. However, when I try to display the list on localhost:4200, nothing appears. <table&g ...

htmlangulartypescript

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...

css

Having difficulty shrinking the excessive gap between the image and text

https://i.sstatic.net/7Wu8J.jpg I have created an app and added inline styling to make the image and text appear next to each other. However, there seems to be some extra space between the image and text, and the text "Demo Analysis Application" is split ...

htmlcss

Can you explain the distinction between using element~element versus element+element?

Can you explain the variation between these two CSS selectors? When using them, I seem to receive the same outcome. In the HTML: <div>One</div> <p>Two</p> CSS Example #1: div+p { background:red; } This code assigns a red backgr ...

csscss-selectors

Tips for maintaining space beneath an image when text wraps around it

.blogimgarea { width: 38%; padding-right: 26px; float:left; } img{max-width:100%} .blogtextarea { width:55%; padding:22px 32px 0 0; float:right; } <div class="newpostregion pt70"> <div class="blogimgarea"> <img class="featblogimg" src="https ...

javascriptjqueryhtmlcss

How come my ejs files are all affected by the same stylesheet?

Currently, I am in the process of developing a nodeJS application utilizing Express, MongoDB, and EJS template view engine. The server.js file has been successfully created to establish the server. In addition, a separate header.ejs file has been implement ...

htmlcssnode.jsexpressejs

Where, oh where, has the text-center in Bootstrap disappeared to?

Does anyone know where the text-center (formerly text-xs-center) has disappeared to in this latest update? Has it been renamed once more? If yes, what is it called now and in which sass module can I locate it? ...

bootstrap-4

Does Firefox offer support for carousel Bootstrap v4.0?

Upon testing the carousel bootstrap v4.0 example in Firefox browser, I encountered an issue where the images-item doesn't slide. After analyzing the problem, I suspect that it might be a bug within Bootstrap itself. Is Firefox compatible with carous ...

bootstrap-4

When the JavaFX ComboBox drop-down opens in an upwards direction, the border appears incorrectly

While working with Java 8, I encountered an issue with the "javafx.scene.control.ComboBox" where if it doesn't have enough room below, it pops up instead. Strangely, the border styling of the elements still behaves as if it should pop down. Is there ...

cssjavafxcomboboxstyling

Unable to activate check box button by clicking on it

Hi there! I am having trouble with a checkbox button on my website. The button appears fine, but for some reason it's not working properly (it doesn't get unchecked when clicked). Can anyone help me fix this issue? I'm still learning HTML an ...

htmlcsstwitter-bootstrap-3

What is the rationale behind setting the argument rv to zero in the make_response function within the Flask Python file app.py?

I have been working on a project where I take input numbers from a flask website and feed them into a neural network. The outputs are then stored in a dictionary which is displayed on a result page with a table. Below is the relevant code snippet for Fla ...

pythonhtmlflasktensorflowanaconda

Apply a class to a div once another class with animation has been applied

Recently, I created a button that triggers the addition of a class with animation to an image upon clicking. Now, I am trying to make another button add a different class to revert the image back to its original size. However, the second class doesn't ...

javascriptjqueryhtmlcss

CSS: Inject Text at the End of Input Text's Value

Hey there, I'm facing a minor issue. The user wants to add some funny text to an input field if a specific condition is met. For example: Normal Condition: the input field shows "#{model.user}" Abnormal condition: the input field should display "# ...

javacssjsf

Wagtail Django TableBlock not showing up properly on the webpage

Recently delving into the world of Django and programming, I decided to incorporate Wagtail into my website. However, I've encountered a roadblock with the 'TableBlock' functionality Despite setting up the model and block correctly, I&apos ...

pythonhtmldjangowagtail

How to automatically scroll to the bottom using jquery/css

I've recently developed a chatroom using li elements, but I'm encountering an issue where the chat doesn't stick to the bottom once it reaches a certain number of messages. I suspect it has something to do with the height settings, but I can ...

javascriptjquerycss

Styling CSS for Grouped Rows in Tables

I need help with styling a table that contains variable data, grouped by columns (Month and Year). My goal is to alternate row colors for each group of data. For example, all rows under Feb 2016 would have class=a, the next set of data would have class=b, ...

javascriptjquerycss

Is it possible to create a collapse and expand animation that does not involve transitioning the `height

After extensively researching, I have come across numerous articles advocating for the use of transform and opacity for achieving smooth CSS transitions. An example can be found here: The prevailing notion always revolves around: ...the optimization ...

javascripthtmlcssreactjsstyled-components