navbar top fixed shrink with a carousel without overlap

Question

I want to get this effect: www.kemtecnia.com This website has a navbar fixed top which shrinks on scroll down, has below a carousel fixed which seems to disappear by the content below.

How can I do in my code to get it?

I have the navbar top:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Desplegar menú</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="logo" href="index.php">
            <img src="img/logo.gif" class="img-responsive" alt="DIESIA Networking Academic Program - UHU" />
        </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <?php
            $i = 0;
            foreach($menuItems as $menuItem => $url){
                if($i == 0 && (basename($_SERVER['PHP_SELF']) == 'index.php') || (basename($_SERVER['PHP_SELF']) == ''))
                    echo "<li class='active'>\n";
                else
                    echo "<li>\n";
                echo $url . $menuItem . "</a>\n";
                echo "</li>\n";
                $i++;
            }
            ?>
        </ul>
    </div>
</div>

but seems to overlap my carousel. The navbar shrinks too by js. I want to get that doesn't overlap my carousel and carousel dissapear with the rest of the content when scroll.

CSS of the navbar:

@media(min-width:768px) {
.navbar-fixed-top {
    padding: 25px 0;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
}

.navbar-fixed-top .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

.navbar-fixed-top.navbar-shrink {
    padding: 10px 0;
}

.navbar-fixed-top.navbar-shrink .navbar-brand {
    font-size: 1.5em;
}
}
.navbar a:focus {
    outline: 0;
}

.navbar .navbar-nav {
    letter-spacing: 1px;
}

.navbar .navbar-nav li a:focus {
    outline: 0;
}

.navbar-default,
.navbar-inverse {
    border: 0;
}

Thanks so much in advance!

Edit: Codepen here: http://codepen.io/jesfer/pen/oLvQYY

score 0 · Answer 1 · answered May 22 '16 at 11:23

don't know if this helps... but might be what you are looking for or atleast push you in the right direction.

http://codepen.io/MatthewBryce/pen/qZBPpp

HTML

 <div class="headerWrap">
    <div class="headerWrapContent">
      Title
    </div>
  </div>

  <div class="menuWrap">
    <div class="menuNavigationFloat">
      <a href="#">Home</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
    </div>
  </div>

    <div class="headerMast">
      This is a Header
    </div>

  <div class="contentWrap">
    <h1>Page Content Bit</h1>
    <p>A really simple sticky menu bar</p>
    <p>Lorem ipsum dolor sit amet,</p>
  </div>

</div><div class="wrap">

  <div class="headerWrap">
    <div class="headerWrapContent">
      Stupidly simple stick-on-scroll Menu
    </div>
  </div>

  <div class="menuWrap">
    <div class="menuNavigationFloat">
      <a href="#">Home</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
    </div>
  </div>

    <div class="headerMast">
      This is a Header
    </div>

  <div class="contentWrap">
    <h1>Page Content Bit</h1>
    <p>A really simple sticky menu bar</p>
    <p>Lorem ipsum dolor sit amet</p>
  </div>

</div>

CSS

body {
    color: #444;    
    font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  margin: 0px;
  background: #222;
}

.headerMast {
  background: #AAA;
  min-height: 200px;
  max-height: 200px;
  margin-top: 0px;
  text-align: center;
  padding-top: 110px;
  color: #FFF;
   -webkit-transition: 1s; /* Safari */
  transition: 1s;
}

.headerMastAnim {
  margin-top: -300px;
  margin-bottom: 300px;
  -webkit-transition:  1s; /* Safari */
  transition: 1s;
}

.wrap {
    background: #444;
    overflow: auto;
}

.headerWrap {
  background: #222;
  font-size: 30px;
  height: 100px;
  line-height: 100px;
  font-weight: lighter;
  color: #CCC;
}

.headerWrapContent {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.menuWrap {
  background: RGBA(0,0,0,0.7);
  color: #fff;
  height: 55px;
  line-height: 60px;
  letter-spacing: 1px;
  width: 100%;
  margin-bottom: -55px;
  -webkit-transition: 0.4s; /* Safari */
  transition: 0.4s;
  z-index: 100;
  position: absolute;
}

.menuWrap.sticky {
  position: fixed;
  top: 0px;  
  height: 30px;  
  line-height: 30px;
  -webkit-transition: 0.4s; /* Safari */
  transition: 0.4s;
}

.menuNavigationFloat {
  background: RGBA(0,0,0,0.5);
  padding: 0px 20px;
    width: 80%;
  height: inherit;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  overflow: hidden;
}

.menuNavigationFloat a{
    list-style: none;
    color: #FFF;
    font-size: 16px;
    width: 170px;
  height: auto;
  margin-left: 0px;
  margin-right: 0px;
  padding-bottom: 2px;
    display: inline-block;
    text-align: center;
    text-transform: capitalize;
  text-decoration: none;
    transition: background 0.4s,  width 0.3s; 
}

.menuNavigationFloat a:hover{ 
    text-decoration: none;
    width: 200px;
    transition: background 0.4, width 0.3s;
}

.menuNavigationFloat  a:nth-child(1)         { background: #CC2222; }
.menuNavigationFloat  a:nth-child(1):hover { background: #FF3333; }


.contentWrap {
  background: #EEE;
  width: 80%;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  margin-bottom: 80px;
  min-height: 1000px;
}

JS

    $(window).scroll(function() {
if ($(this).scrollTop() > 100) {  
    $('.menuWrap').addClass("sticky");
    $('.headerMast').addClass("headerMastAnim");
  }
  else{
    $('.menuWrap').removeClass("sticky");
    $('.headerMast').removeClass("headerMastAnim");

  }
});

http://codepen.io/MatthewBryce/pen/qZBPpp

Thanks for your answer. Even using your help, doesn't work correctly. I have edited the post with a codepen. The only thing that fails is the below content, which doesn't overlap the slider. — Jesfer, May 26 '16 at 18:09
still not 100% sure this is what you are trying to achieve, take a look at this though? http://codepen.io/MatthewBryce/pen/KMKXOe?editors=0100 — Matt Bryce, May 29 '16 at 09:51
That is! Thanks so much for your help and sorry for the delay in my answer. — Jesfer, Jun 03 '16 at 17:58

navbar top fixed shrink with a carousel without overlap

1 Answers1