How to Change the Background Color for Bread Crumbs on CSS
The bread crumb navigation links at the top of your Web page provide a helpful means for your visitors to know where they are on your site. Because of the usefulness of these links for your visitors, you may want to change the background color so that the links stand out more. You can accomplish this effect by adjusting the cascading style sheets, or CSS, properties for the bread crumbs to make the background color whatever you want it to be.
Other People Are Reading
Instructions
-
-
1
Open your Web-editing program.
-
2
Click "File" at the top of the window, click "Open" and then double-click one of the pages containing your bread crumb links. If your Web-editing program offers you a "Design" and "Code" view for editing your pages, select the "Code" view.
-
-
3
Click "File" at the top of the window, click "Open" and then open your CSS style sheet as well, as you will need to switch between this document and your Web page.
-
4
Browse to the location of your bread crumb links.
-
5
Locate the name of the CSS class used for your bread crumb links. For example, if you use <div> tags to structure your pages, then you would find your class name in the "<div class="xxxxxx">" text, where "xxxxxx" is the name of your desired class.
-
6
Switch to your CSS style sheet, and then locate your bread crumb class.
-
7
Add a background color CSS style to your bread crumb class. For example, if you wanted to make your background color black, your class might look like
.xxxxxx {
background-color: #000000;
} -
8
Click "File" at the top of the window and then click "Save" to save your style sheet file.
-
1
Tips & Warnings
You can also adjust the color of your bread crumb links by adjusting the "Color" value of the CSS for your bread crumb link classes. For example, if you are using a black background color, you may want to set the link color to white with the CSS code "color: #ffffff;."
