Fixed Bootstrap Navigation Bar doesn't work

I have an issue with bootstrap fixed navigation bar, it stucks and doesn't stick to the top.

here is source code of my nav bar

<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style = "margin-bottom:0px;"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main"> <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="#">Your Brand Name</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-main"> <ul class="nav navbar-nav navbar-right"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#information">Information</a></li> <li><a href="#google_map">Contact</a></li> <li><a href="http://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/">Back to tutorial</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

I identified what is the issue, it is my video background

<video autoplay loop muted poster="" id="bgvid" style = ""> <source src="bg_video(cut).webm" type="video/webm"> <source src="bg_video(cut).mp4" type="video/mp4"> </video>

CSS

video#bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); background-size: cover; }

When I remove this video background the nav bar works good. What should I do to make it work with my video background?

Category:css Views:0 Time:2018-10-09

Related post

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.250 (s). 11 q(s)