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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 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>
Read More
</div>
</header>
JQuery i am trying:
$(document).ready(function () {
$('#hidden').slideDown(1000);
});
and in the css:
#hidden {
display: none;
}
I added the id="hidden" to the img class but all it does is hide the logo, not slide it down as intended.
Here is the general simple example of the effect you want https://jsfiddle.net/Ipman/kps2gcn5/1/
<div class="parent">
<div id="fake-image">
</div>
</div>
CSS:
.parent {
position: relative
}
#fake-image {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: -100px;
transition: all ease 2s
}
Script:
$(document).ready(function () {
$('#fake-image').css('top', '0px');
});
Related
I am quite new to BOOTSTRAP and web development in general. So I was once again hoping someone could help me as I can't find the solution. I've started making a simple website to practice and it looks fine in my browser size; however, when I switch to mobile my created divs seem to be smaller or not keeping the specified size; this also appears to be in turn, breaking my nav bar while in mobile mode. Any help would be grand!
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<style type="text/css">
#logo-space {
background-color: #0f2471;
width: auto;
height: auto;
}
#logo {
width: 300px;
height: 110px;
padding: 15px;
margin-left: 5rem;
}
#FMS-BTN {
width: 12rem;
position: relative;
top: 2rem;
left: 20rem;
}
#nav-bar{
background-color: #16377e;
height: auto;
}
#nav-bar a{
color: white;
font-weight: bold;
font-size: 20px;
padding: 5px;
position: relative;
top: 5px;
}
.navbar-text{
text-align: right !important;
position: relative;
font-size: 20px;
bottom: 5px;
padding: 5px;
right: 5rem;
}
.nav-move{
position: relative;
left: 5rem;
}
.navbar {
height: 55px !important; /*i assume your navbar size 100px*/
}
</style>
</head>
<body>
<div class=".container-fluid">
<div id="logo-space" class="row">
<div class="col">
<img id="logo" src="img/logo.png" alt="">
</div>
<div class="col">
</div>
<div class="col">
<a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
<img src="" alt="">Head to FMS</a>
</div>
</div>
<div id="nav-area">
<nav id="nav-bar" class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-xs-0">
<li class="nav-item">
<a class="nav-link active nav-move" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">APPEALS</a>
</li>
<li class="nav-item">
<a class="nav-link nav-move" href="#">FEED</a>
</li>
</ul>
<span class="navbar-text">
<a id="apply-link" class="nav-link" href="#">APPLY NOW</a>
</span>
</div>
</div>
</nav>
</div>
</div>
</body>
</html>
I have created a web portfolio for myself. Everything was fine while I was viewing it on my Desktop, but the issue happens when I view it on my phone.
a) The navbar collapses but it is not aligned properly.
b) There is some space on the right side of the viewport on my hero section. I am trying to understand the error but to no avail.
Link to portfolio: https://smammar.netlify.app/
HTML code
<header class="navigation fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand font-tertiary h3" href="index.html"><img src="images/logo2.png" alt="logo"
style="width: 130px; height: 130px;"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation" id="responsiveNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-center" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portfolio</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- hero area -->
<section class="hero-area bg-primary" id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 mx-auto">
<h2 class="text-white font-tertiary">Hi! I’m <br> Syed Mohammad Ammar <br> Full-Stack Designer</h2>
</div>
</div>
</div>
<div class="layer" id="l2">
<img src="images/illustrations/dots-cyan.png" alt="bg-shape">
</div>
<div class="layer" id="l4">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<div class="layer" id="l6">
<img src="images/illustrations/dots-group-cyan.png" alt="illustrations" class="bg-shape-6">
</div>
<div class="layer" id="l9">
<img src="images/illustrations/dots-orange.png" alt="bg-shape">
</div>
<!-- social icon -->
<ul class="list-unstyled ml-5 mt-3 position-relative zindex-1">
<li class="mb-3"><a class="text-white" href="https://twitter.com/SMAmmar5"><i class="fab fa-github"
id="socialIcons"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-twitter" id="socialIcons1"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-behance" id="socialIcons2"></i></a></li>
<li class="mb-3"><a class="text-white" href="#"><i class="fab fa-linkedin" id="socialIcons3"></i></i></a></li>
</ul>
<!-- /social icon -->
</section>
<!-- /hero area -->
<!-- about -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-lg-10 mx-auto text-center">
<p class="font-secondary paragraph-lg text-dark">I'm a full-stack designer based in Karachi, <span style="color: #228B22"> Pakistan </span> with
experience in delivering end-to-end UX/UI design to complete website for software products. I'm passionate about improving the
lives of others by creating human centric products.</p>
<a href="https://www.dropbox.com/.../syed%20mohammad%20ammar.pdf..." class="btn "
id="viewResume">View Resume</a>
</div>
</div>
</div>
</section>
CSS Code
.navigation {
padding: 40px 100px;
transition: .3s ease;
}
.navigation.nav-bg {
background-color: #000
;
padding: 0 70px;
}
#media (max-width: 600px) {
.navigation.nav-bg {
padding: 15px 20px;
}
}
#media (max-width: 600px) {
.navigation {
padding: 20px;
background: #000
;
}
}
.navbar .nav-item .nav-link {
font-family: "BwNistaInt-xBd";
text-transform: uppercase;
padding: 15px;
}
.navbar .nav-item.active {
font-weight: bold;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link:hover{
border-color: #ffa500;
color: #ffa500;
box-shadow: 0 0.5em 0.5em -0.5em #ffa500;
transition: all 0.2s;
cursor: pointer;
}
.hero-area {
padding: 300px 0 200px;
position: relative;
}
.hero-area h2 {
position: relative;
z-index: 2;
}
.layer {
position: absolute;
z-index: 1;
}
#l1 {
bottom: 0;
left: 0;
}
#l2 {
top: 190px;
left: -250px;
}
#l3 {
top: 200px;
left: 40%;
}
#l4 {
top: 200px;
right: 40%;
}
#l5 {
top: 100px;
right: -150px;
}
#l6 {
bottom: -20px;
left: 10%;
}
#l7 {
bottom: 100px;
left: 20%;
}
#l8 {
bottom: 160px;
right: 45%;
}
#l9 {
bottom: 100px;
right: -10px;
}
.layer-bg {
position: absolute;
bottom: 0;
left: 0;
}
Here's a quick fix. Try to add this into your css this will remove the spacing and improper alignments in responsive mode.
body, html {
overflow-x:hidden;
}
You can remove the header tag & it's class and then add 'fixed-top' class to the nav tag. That might solve the issue.
So i have problem with bs4 navbar so lets explain more about the problem:
I have page with content box that have container and i want above of it to put the navbar i want to make somethink like this
But when i try to make it happend that:
So here is my html file
<title> {{ $title }} </title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery.scrollbar/0.2.11/jquery.scrollbar.min.css"/>
<body class="scrollbar-inner">
<div id="particles-js"></div>
#if(!Auth::user())
<script type="text/javascript">
$(window).on('load', function () {
$('#userLogin').modal('show');
});
</script>
#include('modals.login')
#endif
<div class="servername">
{{ $heading }}
</div>
<h1 class="ip" onclick="CopyToClipboard('to-copy')">
<div id="to-copy">{{ $main_ip }} <b class="fa fa-copy"></b></div>
</h1>
<div class="content-box">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<div class="maincontent-box">
</div>
<div class="sidebar">
#if(Auth::user())
<div class="dropdown userPane">
<button style="color:#000000; width: 111%; background: #D3D3D3" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
<img src="http://cravatar.eu/head/{{ Auth::user()->username}}/128.png" width="32px;"
height="32px;"/> {{ Auth::user()->username }}
</button>
<div class="dropdown-menu" style="width: 111%">
<a class="dropdown-item">
<center>
<img src="http://cravatar.eu/head/{{ Auth::user()->username }}/128.png" width="32px;"
height="32px;"/>
</center>
</a>
<div class="dropdown-item">
<center>
Репутация: <span
class="badge badge-{{ Auth::user()->reputation == 10 ? 'success' : 'danger' }}">{{ Auth::user()->reputation }}
/10</span>
</center>
</div>
<div class="dropdown-item">
<center>В сървъра ли си?: <b>{{ Auth::user()->isLogged == 1 ? 'Да' : 'Не' }}</b></center>
</div>
<hr/>
<a class="dropdown-item" href="{{ url('/account/password') }}">
Смени парола
</a>
<a class="dropdown-item" href="#">
Нотификаций: <span class="badge badge-danger">5</span>
</a>
<a class="dropdown-item" href="#">
ични съобщения: <span class="badge badge-danger">5</span>
</a>
<a class="dropdown-item" href="{{ url('/logout') }}">
<center>Излез</center>
</a>
</div>
</div>
#endif
<div class="side">
<h5 class="boxes-title">Навигация <b class="fa fa-compass"></b></h5>
<div class="card">
<div class="card-body">
<a href="{{ url('/') }}" class="{{ request()->is('/') ? 'active' : '' }}"><b
class="fa fa-home"></b>
Начало</a>
<br>
<a href="{{ url('/shop') }}" class="{{ request()->is('shop') ? 'active' : '' }}"><b
class="fa fa-shopping-cart"></b> Магазин</a>
<br>
<a href="{{ url('/bans') }}" class="{{ request()->is('bans') ? 'active' : '' }}"><b
class="fa fa-gavel"></b> Банлист</a>
<br>
<a href="{{ url('/support') }}" class="{{ request()->is('support') ? 'active' : '' }}"><b
class="fa fa-question"></b> Поддръжка</a>
<br>
<a href="{{ url('/apply') }}" class="{{ request()->is('apply') ? 'active' : '' }}"><b
class="fa fa-file-o"></b> Кандидатури</a>
<br>
<a href="{{ url('/top-voters') }}" class="{{ request()->is('top-voters') ? 'active' : '' }}"><b
class="fa fa-thumbs-up"></b> Топ гласуващи</a>
<br>
</div>
</div>
</div>
<div class="side">
<iframe style="width: 300px;"
src="https://discordapp.com/widget?id=511173991168344069&theme=dark" width="350" height="500"
allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
<script src="{{ asset('js/particles.min.js') }}"></script>
<script src="{{ asset('js/ptcls.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="{{ asset('js/application.js') }}"></script>
</body>
</html>
My css file:
body {
font-family: 'Oswald', sans-serif;
background: url("https://i.imgur.com/CTT4cRp.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a {
color: rgba(0, 0, 0, 0.77);
}
a:hover {
color: #ffbd13;
}
.servername {
color: white;
text-align: center;
text-decoration: none;
font-size: 100px;
display: flex;
margin-top: 40px;
justify-content: center;
}
.ip {
color: white;
text-align: center;
text-decoration: none;
font-size: 24px;
margin-bottom: 50px;
justify-content: center;
}
#to-copy:hover {
cursor: pointer;
}
#particles-js {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0px;
z-index: -1;
left: 0px;
background-image: url('');
background-position: 50% 50%;
background-repeat: no-repeat;
}
.content-box {
border-radius: 25px;
border: 2px solid;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
max-width: 80rem;
margin: 0 auto;
background: white;
margin-bottom: 20rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.active {
color: #ffbd13;
}
.news-box {
background-color: lightgrey;
width: 90%;
padding: 15px;
margin: 30px;
}
.maincontent-box {
background-color: lightgrey;
width: 90%;
padding: 15px;
margin-top: 6.6rem;
margin-left: 30px;
margin-bottom: 30px;
}
.boxes-title {
padding-bottom: 5px;
}
.sidebar {
width: 90%; /*Changed*/
bottom: 520px;
margin: 30px;
}
.side {
padding: 15px;
bottom: 520px;
margin-bottom: 10px;
background-color: lightgrey;
}
#media only screen and (min-width: 768px) {
.sidebar {
width: 30%;
}
.news-box {
width: 100%;
}
.maincontent-box {
width: 100%;
}
.content-box {
flex-direction: row;
}
}
.userPane {
margin-bottom: 30px;
top: 0;
color: white;
right: 0;
width: 80%;
justify-content: center;
}
#media only screen and (min-width: 768px) {
.userPane {
width: 90%;
}
}
Please help me guys.. im trying to make it maybe 30 minutes without succedd! Thanks in advice!
hmm, maybe try with something like this :
<div class="content-box">
<div class="navbar_position" >
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
</div>
<div class="maincontent-box">
</div>
style:
#media only screen and (min-width: 768px) {
.sidebar {
width: 30%;
}
.navbar_position{
position: absolute;
width: 90%;
}
.news-box {
width: 100%;
}
.maincontent-box {
width: 100%;
}
.content-box {
flex-direction: row;
}
}
plunker: http://plnkr.co/edit/uJKmTlYZtSgRDSqGk27W?p=preview
Make sure you do like this
<html>
<head>
<!-- bootstrap css here -->
<!-- https://getbootstrap.com/docs/4.1/getting-started/introduction/ -->
</head>
<body>
<div class="container">
<nav>
<!-- This is inside container because the header is on the left side container only. -->
<!-- nav src here: https://getbootstrap.com/docs/4.1/components/navs/ -->
</nav>
<!-- main content here -->
</div>
<div class="sidebar">
<!-- main content -->
</div>
<!-- bootstrap js here -->
<!-- https://getbootstrap.com/docs/4.1/getting-started/introduction/ -->
</body>
</html>
I hope that this will give you an idea.
I currently have the following overlap problem with my dropdowns:
As you can see if I press my most right button (the filter logo) and then press my dropdown link it overlaps in an ugly way. I would like that the "Dropdown link" dropdown always goes on top.
I have tried playing with the CSS (z-index, position, display, etc.) of both dropdowns, but I can't seem to figure it out. From what I understand z-index should solve my problem, but it doesn't. So that's why I went to play with position / display etc, but that didn't help either and confused me even more.
Anyone have any idea what I am doing wrong? Would really appreciate a push in the right direction. (Other random feedback on my current code is also appreciated)
My code:
https://jsfiddle.net/afbs97dy/4/
HTML:
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="https://www.test.com"><img class="logoklant" src="images/test.png" alt="Logo"></a>
<a class="navbar-brand naamdashboard" href="#">test</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto menuitems" id="myNavbar">
<li class="nav-item"><a class="nav-link" href="#page1">Link 1</a></li>
<li class="nav-item"><a class="nav-link" href="#page2">Link 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#test1">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="" id="filter">
<i class="fas fa-filter filterlogo"></i>
</a>
<ul class="dropdown-menu dropdownqlik">
<div id="CurrentSelections" class="qvobjects">
<div class="current-selections-placeholder">
<span>Connect to app to see Selection Toolbar</span>
</div>
</div>
</ul>
</li>
</ul>
</div>
</nav>
</body></html>
CSS:
/* navbar */
.navbar {
background-color: #3b3b3b;
font-family: Montserrat, sans-serif;
font-size: 12px !important;
letter-spacing: 4px;
}
.navbar-brand {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 5px;
}
.logoklant {
height:40px;
}
.naamdashboard {
font: 20px;
}
.filterlogo {
font-size: 32px;
margin-left: 5px;
margin-top: 2px;
padding-right: 10px;
}
.dropdownqlik {
height: 36px;
}
#filter.is-active + .dropdown-menu {
display: block;
width: 100.1%;
top:53px;
}
.is-pos-static {
position: static !important;
color: white !important;
}
#CurrentSelections {
margin-top: -8px;
margin-left:-1px;
}
/* Scroll to top */
.scrollToTop {
text-align: center;
font-weight: bold;
color: #444;
text-decoration: none;
position: fixed;
top: 95vh;
right: 1vw;
z-index: 3000;
}
.scrollToTopLogo {
color: black;
}
JS:
/* https://stackoverflow.com/questions/48243406/change-color-on-hover-and-when-navbar-toggle-is-collapsed */
$(document).ready(function(){
$("#filter").click(function(){
$(this).parent('li').toggleClass('is-pos-static');
$(this).toggleClass("is-active");
});
});
Thanks for taking your time to help.
add CSS
.dropdown-menu.show {
z-index: 9999;
}
2 problems when trying to implement this:
Putting it in the body breaks the sticky nav.
Scroll bar on div.
If i try to do http://keithclark.co.uk/articles/pure-css-parallax-websites/ in a div. It causes a scrollbar in that div.
Trying to counter it by putting it in the body directly breaks the sticky nav (made using bootstrap).
Here is the pen http://codepen.io/dam0/pen/zviHr that I tried to do also. Similar concept.
I only need a parallax on a div. The different element speed type. Any help?
Here's the html structure i have. Please take a look. I already some put comments there.
I'm trying to make it Pure CSS as long as possible. But if it can't be done, help me with js.
EDIT: Added a Pen
http://codepen.io/anon/pen/qZVEgM
Adding the .parallax to the div i want to have a parallax effect causes it to have scrollbar. Putting the parallax class to the body will break the position:fixed of the sticky nav.
EDIT 2: Moved the pen code here
HTML:
<div class="parallax holder">
<div id="carousel" class="parallax__layer parallax__back carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
<div class="item">
<img src="http://loremflickr.com/1920/1080/vegetable,healthy,plate" class="img-responsive center-block">
</div>
</div>
</div>
<div id="headerCaption" class="parallax__layer parallax__layer--base">
<img src="http://healthyaxcess.ph/img/CaptionBg.png" id="curve" class="img-responsive center-block">
</div>
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<div class="container">
<!-- 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="#navbar-collapse" aria-expanded="false">
<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="#"><img src="http://healthyaxcess.ph/img/logo.png"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-shopping-cart"></i> Cart</li>
<li><i class="fa fa-user"></i> Sign Up/Login</li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
First Section
</li>
<li>
Second Section
</li>
<li>
Third Section
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
<li>Dropdown link 3</li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>
<div class="container main">
<div class="text-center" id="section-2">
<h1>Sample Title</h1>
<p>The sample title's description here.</p>
</div>
CSS:
.navbar-inverse {
background: #303030;
}
#navbar-main {
margin: 0;
}
/* To override the static-top */
#navbar-main.affix {
position: fixed;
top: 0;
width: 100%;
}
#media (min-width: 992px) {
#navbar-main .navbar-nav {
position: relative;
margin-top: 16px;
}
}
.main {
/* for example only */
min-height: 200px;
}
.navbar-brand {
padding: 0;
/* firefox bug fix */
height: 80px;
}
.navbar-brand>img {
height: 100%;
padding: 8px;
/* firefox bug fix */
width: auto;
position: relative;
}
#footerBox {
background-color: #303030;
color: #FAFAFA;
}
.holder {
display: none;
}
#headerCaption {
position: relative;
}
#headerCaption img {
z-index: 3;
position: absolute;
width: 100%;
}
.carousel {
position: relative;
}
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px);
}
JS:
$('#carousel img').on("load", function(){
$('body').scrollspy({ target: '#navbar-collapse' });
$('.holder').css('display', 'block');
$('#nav-wrapper').height($("#navbar-main").height());
$('#navbar-main').affix( { offset:{ top:$('#navbar-main').offset().top } } );
$('.carousel').carousel({pause: false});
})