I'm trying to have a sticky promotion bar at the top of the website. Any logo just under it. And under the logo a sticky navbar. Promotion & navbar should be col-8.
All works with the sticky function, but when I add 'col-8' at my nav & promotion bar the sticky doesn't works..
I'm using Bootstrap 4.
(Fun fact is that on CodeSandbox it works but not on chrome/safari: https://codesandbox.io/s/stoic-haslett-qyrhn?fontsize=14)
Here is the code:
html {
scroll-behavior: smooth;
}
body,
* {
font-family: 'Futura', 'Montserrat', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font: 16px/18px sans-serif;
background-color: black !important;
max-width: 100%;
max-height: 100%;
}
img {
max-width: 100%;
max-height: auto;
}
/* ----- Logo ----- */
.logo {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%);
height: 35em;
max-width: 100%;
margin: 3em 0 3em 0;
}
/* ----- Promo bar ----- */
.promo-bar {
text-align: center;
font-weight: bold;
background: linear-gradient(to bottom, #e8b923 0%, #e8b923 100%);
color: #2F2E2E;
vertical-align: middle;
font-size: 1.3em;
padding: 0.5%;
}
/* ----- Navbar ----- */
#navbar {
background-color: #333;
text-align: center;
border-top: 1px solid whitesmoke;
border-radius: 7px;
display: flex;
justify-content: space-around;
margin: 1em 0 1em 0;
width: 100%;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: .7em;
text-decoration: none;
}
.sticky {
position: sticky;
top: 0;
padding: 0 !important;
}
<!-- Promotion bar -->
<div class="col-8 container-fluid sticky" style="z-index: 1">
<div class="promo-bar ">Réduction -10% en caisse avec le code: "SITEWEB10"</div>
</div>
<!-- Logo Centered -->
<img src="logo.jpg" class="logo">
<!-- Nav Bar -->
<div class="col-8 container-fluid sticky" style="z-index: 1">
<div id="navbar">
<a>|</a>
<a href="#home">Accueil</a>
<a>|</a>
<a href="#story">Notre histoire</a>
<a>|</a>
<a href="#contact">Contacts</a>
<a>|</a>
</div>
</div>
Thank you for the time you will give, and sorry for my bad english.
@DDeveloper's answer helps me to find the solution.
In the first <div>
put the sticky
function, and in his child the col-8
.
Like this:
<div class="sticky">
<div class="col-8"></div>
</div>