• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » CSS » Easy Way Create Transparent Background Color Navbar Bootstrap 3

Easy Way Create Transparent Background Color Navbar Bootstrap 3

By Sigit Prasetya Nugroho ∙ May 20, 2015 ∙ CSS ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

In this post I will share about how to create a transparent background color navbar bootstrap. My way is probably quite stupid, but for a beginner like me very useful. Make the background color transparent on bootstrap navbar can create an elegant and beautify the appearance of your website.

Easy way create tranparent background color navbar bootstrap by seegatesite.com

Navbar on bootstrap is usually used to create a website menu, and has the advantages will collapse when the website was opened with a mobile phone or tablet. The standard navbar bootstrap background color is gray. I change that background color into transparent like demo below.

live demo transparent background color navbar bootstrap

Related Articles :

  • Upgrade Responsive Bootstrap Table Using Footable Plugin
  • [Resolved] SweetAlert Prompt Not Working On Modal Dialog Bootstrap In Firefox
  • Change Bootstrap Modal Dialog Effect With Animate.css

 How to change transparent background color navbar bootstrap ? 

Let’s start create transparent background color navbar bootstrap  in my way.

1. Create a php file as index.php dan copy this below script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
<head>
<title>How to create transparent background color navbar bootstrap by seegatesite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles_navbar.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
 
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

3. Create a styles.css file and copy this script

1
2
3
4
5
6
7
8
@import url(http://fonts.googleapis.com/css?family=Russo+One|Play|Orbitron:500,400,700);
body{
font-size: 12px;
background : #000000 url("../image/wallpaper.jpg") no-repeat fixed center;
background-position: top;
background-size: 100% auto;
font-family: 'Orbitron', sans-serif;
}

Save style.css in css folder.

2. Go to https://seegatesite.com/bootstrap/bootstrap-navbar-online-generator.php tohelp create CSS styles in the navbar as below

how to create tranparent background color navbar bootstrap

Look for colors that are easy to remember, in this example I use color as follows

  • Default Background : #ffffff
  • Active Background : #0040ff
  • Default Color : #000000
  • Active Color : #ff00000

Then copy that css style, and save as  styles_navbar.css in the css folder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.navbar-default {
  background-color: #000000; /*Change with transparent*/
  border-color: #0040ff;/*Change with transparent*/
}
.navbar-default .navbar-brand {
  color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ff0000;
}
.navbar-default .navbar-text {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #ff0000;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
  background-color: #000000;/*Change with transparent*/
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #ff0000;
  background-color: #0040ff;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #000000;/*Change with transparent*/
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ff0000;
  background-color: #0040ff;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ff0000;
  background-color: #0040ff;
}
.navbar-default .navbar-toggle {
  border-color: #0040ff; /*Change with transparent*/
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #0040ff;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ffffff;
}
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-link:hover {
  color: #ff0000;
}
 
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ff0000;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ff0000;
    background-color: #0040ff;
  }
}

Find background-color:#000000, background-color: #0040ff dan border-color: #0040ff in styles_navbar.css,  then change to background-color:transparent and border-color: transparent. Save and see the results.

This method is fairly stupid, but I can easily create transparent background color on navbar bootstrap. to get me please download the source code on the button below

[sociallocker id=”58″]

source code transparant background color navbar bootstrap

[/sociallocker]

Another CSS Related Post :

  • Free Simple Admin Dashboard Bootstrap 4 By Seegatesite
  • 4 Best Sites To Download School And Education Icons Sets
  • How to Make a Shake Effect Validation Like the WordPress Login Form
  • [CSS] How To Fixed Select2 Responsive Width
  • Upgrade Responsive Bootstrap Table Using Footable Plugin
  • How To Centering And Make Full Width Youtube Iframe On Blog Article

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com