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.
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.
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
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
Leave a Reply