Background color is grey but not white using CSS?

Question

1.00/5 (2 votes)

See more:

Hi Team

I have two files on my css and im using them for style the pages of the website the issue i cant find the color grey, changed the background color to be white. What am i missing from these two files to find this property?

What I have tried:

Hi Team

I am working on changing the background color to white, somehow i cant seem to find this element property pretty well and need some help with my two css files below.The issue i cant find which property that is calling grey as the background color.I need some help to change this grey color to be white and these two files of css i am using them below.

CSS

// style.default.css
    body {
  overflow-x: hidden;
  color:#ffffff;
  background-color: 	#ffffff;
}

<pre>
/*
*
* ======================================================================
* NAVBAR
* ======================================================================
*
*/
.navbar {
  border-bottom: 1px solid #ffffff;
  background-color: #fff;
}

.navbar .navbar-nav > .nav-item > .nav-link {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 30px 15px !important;
  color: #ffffff;
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav > .nav-item > .nav-link {
    padding: 10px 15px !important;
  }
}

.navbar .navbar-nav > .nav-item > .nav-link.active, .navbar .navbar-nav > .nav-item > .nav-link:hover, .navbar .navbar-nav > .nav-item > .nav-link:focus {
  background: #4fbfa8;
}

@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    position: relative !important;
    border: none;
  }
}

@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
  }
}

.navbar .megamenu {
  padding: 30px !important;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

@media (max-width: 991.98px) {
  .navbar .megamenu {
    padding: 15px !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

.navbar .menu-large h5 {
  font-size: 1.125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
  border-bottom: dotted 1px #ffffff;
}

@media (max-width: 767.98px) {
  .navbar .menu-large h5 {
    font-size: 0.9rem;
  }
}

.navbar .menu-large ul {
  margin: 0;
  padding: 0;
}

.navbar .menu-large ul .nav-item {
  list-style-type: none;
  border-bottom: solid 1px #eee;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 0;
}

.navbar .menu-large ul .nav-item a {
  color: #ffffff;
  font-size: 0.738rem;
  display: block;
  padding: 0 !important;
}

.navbar .menu-large ul .nav-item a:hover {
  color: #4fbfa8 !important;
  text-decoration: none;
}

.navbar .menu-large .banner {
  margin-bottom: 10px;
}

.navbar #basket-overview {
  padding: 0;
}

.navbar .navbar-btn {
  color: #fff;
  margin-right: 10px;
}

#search {
  background: #fff;
}

#search .container {
  text-align: right;
}

#search form {
  max-width: 500px;
  padding: 20px 0;
}

#search .navbar-form {
  float: right;
  width: 500px;
}

.breadcrumb {
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border-radius: 0;
  padding: 0.5rem 1rem;
}

CSS

// style.sea.css
*/
body {
  overflow-x: hidden;
  background-color: #ffffff;
}


/*
*
* ======================================================================
* TOP BAR
* ======================================================================
*
*/
#top {
  background: 	#ffffff;
  padding: 10px 0;
}

#top .offer {
  color: #fff;
}

#top .offer .btn {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@media (max-width: 991.98px) {
  #top {
    font-size: 0.738rem;
    text-align: center;
  }
}

#top a {
  color: #fff;
}

#top ul.menu {
  padding-top: 5px;
  margin: 0;
  font-size: 0.738rem;
}

#top ul.menu > li {
  margin-right: 0;
}

#top ul.menu > li a {
  color: #eee;
}

#top ul.menu > li + li:before {
  content: "|\00a0";
  padding: 0 5px;
  color: #f8f9fa;
}

#top ul.menu > .active {
  color: #999;
}

#top #login-modal .modal-header {
  background: #379392;
}

#top #login-modal .modal-header h5 {
  color: #fff;
}

#top #login-modal a {
  color: #379392;
}

#top #login-modal p {
  font-weight: 300;
  margin-bottom: 20px;
}

/*
*
* ======================================================================
* NAVBAR
* ======================================================================
*
*/
.navbar {
  border-bottom: 1px solid 	#ffffff;
  background-color: 	#ffffff;
}

.navbar .navbar-nav > .nav-item > .nav-link {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 30px 15px !important;
  color: #555;
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav > .nav-item > .nav-link {
    padding: 10px 15px !important;
  }
}

.navbar .navbar-nav > .nav-item > .nav-link.active, .navbar .navbar-nav > .nav-item > .nav-link:hover, .navbar .navbar-nav > .nav-item > .nav-link:focus {
  background: #379392;
}

@media (max-width: 991.98px) {
  .navbar .dropdown-menu {
    position: relative !important;
    border: none;
  }
}

@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
  }
}

.navbar .megamenu {
  padding: 30px !important;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

@media (max-width: 991.98px) {
  .navbar .megamenu {
    padding: 15px !important;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

.navbar .menu-large h5 {
  font-size: 1.125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 10px;
  border-bottom: dotted 1px #555;
}

@media (max-width: 767.98px) {
  .navbar .menu-large h5 {
    font-size: 0.9rem;
  }
}

.navbar .menu-large ul {
  margin: 0;
  padding: 0;
}

.navbar .menu-large ul .nav-item {
  list-style-type: none;
  border-bottom: solid 1px #eee;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 0;
}

.navbar .menu-large ul .nav-item a {
  color: #999;
  font-size: 0.738rem;
  display: block;
  padding: 0 !important;
}

.navbar .menu-large ul .nav-item a:hover {
  color: #379392 !important;
  text-decoration: none;
}

.navbar .menu-large .banner {
  margin-bottom: 10px;
}

.navbar #basket-overview {
  padding: 0;
}

.navbar .navbar-btn {
  color: #fff;
  margin-right: 10px;
}

#search {
  background: #fff;
}

#search .container {
  text-align: right;
}

#search form {
  max-width: 500px;
  padding: 20px 0;
}

#search .navbar-form {
  float: right;
  width: 500px;
}

.breadcrumb {
  -webkit-box-shadow: 0 1px 5px rgba(255,255,255);
  box-shadow: 0 1px 5px rgba(255,255,255);
  background: #fff;
  border-radius: 0;
  padding: 0.5rem 1rem;
}

Posted 4-Apr-23 21:40pm

Gcobani Mkontwana

Updated 5-Apr-23 1:11am

CHill60

v3

Add a Solution

Comments

Rebecca2002 12-Apr-23 7:42am

im not sure what you mean? but the #eee is a light greyish color and #fff is white. if you have trouble finding the colors you need try https://www.w3schools.com/colors/colors_picker.asp

Rebecca2002 12-Apr-23 7:44am

oh and #top ul.menu > li a is calling this
or your looking for #top ul.menu > .active this one calls a very dark grey

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)