bootstrap navbar background color transparent

You may want to change the default bootstrap navbar background color transparent to match with your bootstrap template. The default style looks like gray color background. Look at the image included here. 1st image is default navbar and second one is customized, transparent and with top margin on it. Also it is right aligned, matched with the design we needed.

bootstrap navbar background color transparent

Bootstrap navbar background color transparent – how to do it :

You can do it by over write custom css code on your css file. Let’s start our journey –

Create a style.css file nad place it after the line of bootstrap.min.css file. Because we need to over write bootstrap default style. The code will looks like:

Now let’s inspect the bootstrap code which class got the gray background. And the class is .navbar-default. Now you need to create a class on your custom css .navbar-default.And follow the css code. Also if you don’t want box-shadow on your menu, you can put on the same class.

Change navbar font color :

After that, you may want to change the font color, margin and other things.

bootstrap_3_navbar-custom-color-font

To change font navbar color, the class is to change – .navbar-default .navbar-nav>li>a see the code bellow:

You can put custom font, font-weight there. You can use google font there, typography is important fact.

Navbar margin :

Also,top margin is also important,if you need it. If you want to put margin on the menu. Css class is – .navbar-nav

bootstrap_3_navbar-top-margin

The css code is :

Navbar Toggle :

On responsive mode, if you want to modify the toggle button style, you can do it easily. Css class – .navbar-toggle

bootstrap 3 toggle menu customization

Code :

on html – you can change default toggle button style by adding icon, text or whatever you want.  read the code :