Forbrukslån Billigst | Halvin Sähkö | Kredittkort Test 2019 | Strømpriser | Billigste Hjemmealarm | Hundeforsikring | Beste Mobilabonnement | Billigste Boliglån
Full screen landing page with transparent navbar
Full screen landing page with transparent navbar.
December 1, 2017
image gallery with Bootstrap 4
Responsive image gallery with Bootstrap 4 
December 4, 2017

Bootstrap Transparent menu with Responsive Slider

Bootstrap Transparent menu with Responsive Slider

In this video, I am going to tell you how to create transparent navbar on bootstrap carousel. Here I am going to taking a navbar default and make it totally transparent by using custom CSS. Here I am also going to tell you how to use media query in Bootstrap. The same technique you can apply for bootstrap 4 also.

What is Bootstrap?

Bootstrap one of the most popular framework used by Web Designer and developer to make the responsive websites.

How to use Bootstrap?

You have to open getbootstrap.com. From there you have to have to download a zip file. That file will content CSS and jQuery files. After that, you have to link these file to your website’s files.

After that, you can easily design responsive website by using bootstrap predefined classes and ids. It is very easy to design a website by using bootstrap in a very short time. You can use all custom styles along with Bootstrap.

Bootstrap CDN

When you only need to include Bootstrap’s compiled CSS or JS, you can use the Bootstrap CDN.

css:  https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css

js:    https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js

Bootstrap Transparent menu with Responsive Slider

HTML







Bootstrap - Prebuilt Layout













  
  
Thumbnail Image 1

Travel package 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid officia facere, tenetur similique, sapiente optio magni, expedita laborum mollitia saepe perspiciatis! Sint qui hic repudiandae, nobis quod ipsum deserunt sed.

Bye now!

Thumbnail Image 1

Travel package 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt voluptate numquam impedit esse recusandae iure rem expedita totam asperiores reiciendis repellendus adipisci obcaecati sint, sed sunt natus, excepturi eum illo.

Bye now!

Thumbnail Image 1

Travel package 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quis quibusdam totam, facere voluptatibus. Commodi sit, exercitationem expedita aliquam incidunt. Cupiditate laborum expedita accusamus neque velit amet repudiandae nemo fugiat?

Bye now!

CSS

*{margin: 0; padding: 0;}
.my-nav{position: relative;
       top:20px;
	   width: 100%;
	   z-index: 999;
	   background:none;
	   border: none;
	   border-radius: 0;
	
 }

.my-nav {
  background-color:rgba(0,0,0,0.00);
  border-color: rgba(0,0,0,0.00);
}
.my-nav .navbar-brand {
  color: #ecf0f1;
}
.my-nav .navbar-brand:hover,
.my-nav .navbar-brand:focus {
  color: #ecdbff;
}
.my-nav .navbar-text {
  color: #ecf0f1;
}
.my-nav .navbar-nav > li > a {
  color: #ecf0f1;
}
.my-nav .navbar-nav > li > a:hover,
.my-nav .navbar-nav > li > a:focus {
  color: #ecdbff;
}
.my-nav .navbar-nav > .active > a,
.my-nav .navbar-nav > .active > a:hover,
.my-nav .navbar-nav > .active > a:focus {
  color: #ecdbff;
  background-color: #3962ff;
}
.my-nav .navbar-nav > .open > a,
.my-nav .navbar-nav > .open > a:hover,
.my-nav .navbar-nav > .open > a:focus {
  color: #ecdbff;
  background-color: #3962ff;
}
.my-nav .navbar-toggle {
  border-color: #3962ff;
}
.my-nav .navbar-toggle:hover,
.my-nav .navbar-toggle:focus {
  background-color: #3962ff;
}
.my-nav .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.my-nav .navbar-collapse,
.my-nav .navbar-form {
  border-color: #ecf0f1;
}
.my-nav .navbar-link {
  color: #ecf0f1;
}
.my-nav .navbar-link:hover {
  color: #ecdbff;
}

@media (max-width: 767px) {
  .my-nav .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .my-nav .navbar-nav .open .dropdown-menu > li > a:hover,
  .my-nav .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecdbff;
  }
  .my-nav .navbar-nav .open .dropdown-menu > .active > a,
  .my-nav .navbar-nav .open .dropdown-menu > .active > a:hover,
  .my-nav .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecdbff;
    background-color: #3962ff;
  }
}

/*for full screen landing page*/
html,body{margin: 0;padding: 0; width: 100%; height: 100%;}

.wrapper{top:-70px;
	position: relative;
	width: 100%; 
	  height: 100%;
	background: url(../images/dark-full-hd-wallpaper-001.jpg);
	display: table;
	background-size: cover;
}
.wrapper .inner{
	
	display: table-cell;
	vertical-align: middle;
	widows: 100%; 
	max-width: none;
}
.content{
	text-align: center;
	max-width: 7000px;
	margin: 0 auto;
}

.content h2{color: #ffffff;
      font-family: 'Raleway',sand-serif;
	  text-shadow: 0 0 300px #000;
	font-size: 300%;
	
 }
.content p{color: aliceblue;font-size: 16px; font-family: Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif"; margin: 20px 0;}

.thumbnail{border: none;}




@media only screen and (max-width: 767px) {
    .my-carousel{position: relative;
	        top:0px;
                 
}
	
	.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff !important;
}
	
	.navbar .navbar-brand {
  color: white;
}
	.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color:wheat;
}
	.my-nav{top:0;}
	.navbar{margin-bottom: 0;}
	
.navbar-default .navbar-nav > li > a{color: black;}	/*link color change*/
	
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color:#000000;
    color: #fffff0;
}/*change link color*/

	 .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: black;
    color:#ffffff;
  }/*change dropdown link color*/
	.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}/*icon bar color*/
	.thumbnail{text-align: center;}
	
}

.my-carousel {top: -70px;}

Leave a Reply

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