Bootstrap 3 Tutorial Pt.11 – CSS Modifications to Navbar and Buttons
Homepage: http://bootstrapbay.com Source Files: http://github.com/bootstrapbay/tutorials In this installment of our Bootstrap 3 tutorial, we add some custom CSS modifications to the common…
Video Tutorial Rating: 5 / 5
Don’t forget to check out our other video tutorials or share this video with a friend.
0 votes
Loading...7 responses to “Bootstrap 3 Tutorial Pt.11 – CSS Modifications to Navbar and Buttons”
Leave a Reply
Video Tutorials
Bringing you the best video tutorials for Photoshop, Illustrator, Fireworks, WordPress, CSS and others.
Video tutorial posted 23/04/15
Category: CSS Tutorials
Pages
Random Videos
-
Dreamweaver Tutorial – CSS3 Box Shadows
3,872 views
-
-
-
Lightroom Tutorial : Color Isolation
1,548 views
Video Categories
- 3DS Max Tutorials (150)
- After Effects Tutorials (160)
- C# Tutorials (121)
- Colour (6)
- Crazy Effects (1)
- CSS Tutorials (120)
- Dreamweaver Tutorials (139)
- Excel Tutorials (127)
- Featured (10)
- Fireworks Tutorials (131)
- General Effects (9)
- HTML Tutorials (143)
- Illustration and Vector (1)
- Illustrator Tutorials (174)
- IMove Tutorials (119)
- Lightroom Tutorials (145)
- People and Faces (3)
- Photoshop Tutorials (169)
- Text Effects (7)
- Uncategorized (32)
- WordPress Tutorials (140)
Tags
VideoTutorials.co.uk
-
Videotutorials.co.uk offers the web's best Photoshop tutorials, Illustrator video guides, CSS and HTML tutorials and much more all in one place. With new videos being added every day, you can learn how to master software and code to give your images and website some great effects.
Our site has beginner, intermediate and advanced video tutorials of varying lengths so you can learn a new skill at your own speed and level. So whether you're a web designer, print designer or just wanting to edit some family photos, you can get to it quickly and easily using these free video guides. (more)
In this installment of our Bootstrap 3 tutorial, we add some custom CSS to
our navbar and buttons.
UPDATE:
My last comment was not 100% effective solution.
If using navbar-default or navbar-inverse:
**If you want a custom navbar check below**
FIRST: To change the CSS make sure the link to the stylesheet of your
custom file is below the bootstrap style sheets.
Next: In your CSS file:
.navbar-default { // replace “default” with inverse if using
inverse
background-image: none; // This eliminates the issue of color
not changing
background-color: #anyColor ;
border-color: #anyColor ;
}
If you want to use navbar-custom do this: (“custom” can say anything)
HTML:
CSS:
.navbar-custom {
// no need to remove the image since there is none in your “custom”
navbar
background-color: #anyColor ;
border-color: #anyColor ;
}
.navbar-default{
background-color: #2C3E50;
border-color: #FFFFFF;
color: #FFFFFF;
}
does nothing for me pleas help
*See my other comment for more detail*
A FIX TO .navbar CSS modifications being overridden.
in the HTML doc. change:
to
The navbar-custom will let you reference the navbar in CSS like this:
.navbar-custom {
}
This should fix people’s problems with the navbar not changing color.
Hey Christopher,
Great videos! I’m trying to accommodate a larger image logo in the navbar.
What would be the proper CSS code to adjust the height of the navbar to
accommodate a larger logo and to make sure that my menu buttons all fall
into place?
Great videos. Everything works except for changing the color on .active on
the navbar. Not sure what I’m doing wrong.
I wasn’t able to change the .navbar-default bg colors, borders or anything.
The .navbar-default was over riding my settings for it.