Highlighted

Change the color of the header or navbar background

Explorer ,
Aug 07, 2020

Copy link to clipboard

Copied

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

 

Topics

How to

Views

81

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Change the color of the header or navbar background

Explorer ,
Aug 07, 2020

Copy link to clipboard

Copied

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

 

Topics

How to

Views

82

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
LEGEND ,
Aug 07, 2020

Copy link to clipboard

Copied

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.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Aug 07, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Aug 15, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Aug 15, 2020

Copy link to clipboard

Copied

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

Screen Shot 2020-08-15 at 4.47.37 PM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Aug 15, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
osgood_ LATEST
LEGEND ,
Aug 15, 2020

Copy link to clipboard

Copied

Add the below Bootstrap css selectors to your Bootstrap amended css styles, either in the head section of the page or in a linked style sheet, which needs to be linked AFTER the default Bootstrap css file.

 

.dropdown-menu {
background: transparent!important;
border: none!important;
}

.dropdown-item{
background: transparent!important;
color: #000!important; /* Change link color of menu item */
}
.dropdown-item:hover {
color: #fff!important; /* Change link color of menu item on hover */
}

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...