Img dropdown issue
Multi tool use
Clash Royale CLAN TAG#URR8PPPImg dropdown issue
I would like the logo image I have located in the navbar element of my html to slowly dropdown (or even the whole navbar itself), but it won't seem to do anything when i try with JQuery (I am not very familiar with this yet). I am thinking this is due to the fullscreen video I have and some sort of interaction problem with that. Any ideas on how i can make:
img src="img/logo.png"
dropdown with that slidedown animation, if its even possible at all would be greatly appreciated. Thanks.
My Code
* {
box-sizing: border-box;
}
.container {
max-width: 960px;
padding-left: 1rem;
padding-right: 1rem;
margin: auto;
text-align: center;
}
.v-header {
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.fullscreen-video-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.fullscreen-video-wrap video {
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-overlay {
height: 100vh;
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 1;
background: #225470;
opacity: 0.4;
}
.header-content {
z-index: 2;
}
<!-- Social media icon sidebar -->
<div class="icon-bar">
<a href="#" class="facebook">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="twitter">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="linkedin">
<i class="fa fa-linkedin"></i>
</a>
<a href="#" class="youtube">
<i class="fa fa-youtube"></i>
</a>
</div>
<!-- Transparent navbar -->
<nav class="navbar sticky-top navbar-expand-sm navbar-dark transparent">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt=" ">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Video for fullscreen intro with fallback video formats for different browsers -->
<header class="v-header container">
<div class="fullscreen-video-wrap">
<!-- muted for autoplay to work in Chrome -->
<video muted autoplay="true" loop="true">
<source src="video/holoVid.mp4" type="video/mp4">
<source src="video/holoVid.webm" type="video/webm">
<source src="video/holoVid.ogv" type="video/ogg">
<!-- Provide user message if their browser doesn't support html5 video -->
your browser doesn't support HTML5 video.
</video>
</div>
<div class="header-overlay"></div>
<div class="header-content">
<h1>Welcome to the Video Wall</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
<a href="# " class="btn btn-primary ">Read More</a>
</div>
</header>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
