0

I am working on a website for a school project. I have a menu bar that is floating at the top of my screen, but i want things to look nice and fancy.

I did some research on how to create a menu bar that looks like this

https://nl.malwarebytes.org/mwb-download/

Can someone help me?

S. ter Keurs
  • 57
  • 1
  • 9
  • Rather than simply asking for help ambiguously, if you provide us with your current code, or demonstrate what you've tried and what isn't working about it, I'd be happy to point you in the right direction, and provide some assistance with a situation specific to you. Have a look at http://stackoverflow.com/help/how-to-ask – JaanRaadik Apr 13 '16 at 10:35
  • 1
    http://stackoverflow.com/questions/20630848/how-can-i-make-a-fix-positioned-menu-bar here is the same quetion – Oleh Leskiv Apr 13 '16 at 10:36
  • Sorry, first time poster :) I have managed to get a sticky navbar now :) – S. ter Keurs Apr 13 '16 at 10:42

2 Answers2

0
$(window).on('scroll', function(event) {
    if($(this).scrollTop()>50 && $(this).innerWidth()>480) {
        $('header').addClass('sticky');
    }
    else {
        $('header').removeClass('sticky');
    }
});

use this in java script then just style your nav for .sticky class

Lukasz Stolarski
  • 11
  • 1
0

It is important to note that the header on the example site does not transition from 'static' to 'fixed' position. It is always positioned 'fixed'.

To recreate the effects of the provided link, you need to be somewhat savvy in your choices on what gets transitioned, types of transitioning and what properties are changing.

One way to accomplish this is using jQuery to create a condition when the user has scrolled beyond the top of the window.

For instance:

HTML:

<div class="menu">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

<div class="content">
    <!--Site content-->
</div>

CSS:

.menu{
  position:fixed;
  width:100%;
  height:100px;
  background-color:transparent;
  -webkit-transition:  all 200ms ease;
  transition: all 200ms ease;
}

.content{
  padding:100px 60px 60px 60px; /*accomodates the fixed position header space*/

  -webkit-transition:  all 200ms ease;
  transition: all 200ms ease;
}

/* Styles for the menu after scrollTop >= 1 */
.menu.scrolled{
  height:60px;
  background-color:black;
  color:white;
}

.menu.scrolled + .content{
  padding-top:60px;
}

JS:

$(function() {
  $(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled >= 1) {
      $('.menu').addClass("scrolled");
    } else {
      $('.menu').removeClass("scrolled");
    }
  });
});

A version containg more stylistic CSS and additional CSS transitions can be seen here: http://codepen.io/eoghanTadhg/pen/PNRNOv

EoghanTadhg
  • 512
  • 5
  • 14