Easy Way Create Transparent Background Color Navbar Bootstrap 3

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

 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

<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

@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 http://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

.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

The following two tabs change content below.
This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Leave a Comment

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

%d bloggers like this: