Skip to main content
carolyn@10541
carolyn@10541
Known Participant
August 7, 2020
Question

Change the color of the header or navbar background

  • August 7, 2020
  • 3 replies
  • 3435 views

Hi I am creating a website in Bootstrap and am unable to change the top part of the page where the logo and navbar are. I am able to change the background to the color my client wants. I would appreciate nay thoughts.

Thank you in advance.

 

Carolyn Josephs

 

This topic has been closed for replies.

3 replies

C
carolynj52524498
Participating Frequently
August 15, 2020

The navbar text is now blue even though I put in #8000 which is a maroon brown color. I also have dropdown menus that need to be the same color.

 

Thanks.

 

 

Carolyn

C
carolynj52524498
Participating Frequently
August 15, 2020

I was able to get the text brown but now I'm trying to get the dropdown text to have a transparent background like the rest of the menu. Please see below screenshot.

 

Thank you in advance.

 

Carolyn

 

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 15, 2020

What's the URL to your online site?  Answers to questions like these are contained in your code.  Depending on the version of Bootstrap you're using, you can usually change the dropdown selector's CSS to background:transparent. 

 

However, the best possible way for us to help you is for you to post the URL here so we can see everything we need to see.

 

 

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
August 7, 2020

Expert Bootstrapers use CSS preprocessors (LESS/SASS) to change sitewide variables & mixins.  This is the most efficient means for custom theming Bootstrap.

https://getbootstrap.com/docs/4.0/getting-started/theming/

 

================

 

Bootstrap also contains contextual classes that can be used to change background colors in the markup:

https://getbootstrap.com/docs/4.0/components/navbar/#color-schemes

bg-primary

bg-secondary

bg-info

bg-success

bg-warning

bg-danger

 

===============

 

Or use a free Bootstwatch Theme.  There are about 20 to choose from.

https://bootswatch.com/

Replace your current Bootstrap CSS with a Bootswatch CSS file like this one called Solar: 

<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.0/solar/bootstrap.min.css">

 

Nancy O'Shea— Product User & Community Expert
O
osgood_
Legend
August 7, 2020

Assuming you are using the basic Bootstrap navbar, something like below:

 

<nav class="navbar navbar-expand-lg navbar-light bg-light">

 

Then change it to the below (navbar-light and bg-light) are just a couple of a number of alternative default colors/background you can deploy using the bootstrap helper classes but if you want to set your own then you don't need them;

 

<nav class="navbar navbar-expand-lg">

 

<style>

/*This will change the navbar background-color*/
.navbar {
background-color: tomato;
}

/*This will change the navbar links color*/
.navbar a {
color: #fff!important;
}

/*This will change the navbar links hover color*/
.navbar a:hover {
color: #000!important;
}

</style>

 

Obviously DONT make the changes in the bootstrap.css file. You make your changes in an additional stylesheet you link to the page AFTER the link to the bootstrap.css file or you can add them in a <style></style> tag block in the <head></head> section of your page, again as long as the block is inserted AFTER the link to the bootstrap.css file.

 

Personally I would advise against using Bootstrap until you are proficient in writing css at which point Bootstrap becomes pointless. Its a framework, hugely full of redundant bloat, not only css but html mark-up when you use the default method of deploying it and far too complex to spin up a bespoke version for the beginner. Its quite outdated as the new way forward is to use css grid for layout which Bootstrap is not likely to get for a couple of years despite v5 coming out later this year, its behind the curve in terms of what more advanced developers are now integrating into their constructions.

 

If you must use it then I would suggest getting familar with your browser development tools. They will show you what css is being deployed if you click on a component, it should then be easier for you to amend the css.

 

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices