Viktor February 2016

Css sticky menu height re sizing incorrectly

Why when I do scroll, height of the navigation is resizing and becoming bigger than it should be. How can I fix this problem?

Full code: https://jsfiddle.net/9Leq24dq/

$(function() {
  var navOffset = $('nav').offset().top;
  $("nav").wrap('<div class="nav-placeholder"></div>');
  $(".nav-placeholder").height($("nav").outerHeight());

  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos >= navOffset) {
      $("nav").addClass("fixed");
    } else {
      $("nav").removeClass("fixed");
    }
  });
});
body {
  background-color: #eee;
}
#menu {
  text-align: center;
}
header {
  width: 950px;
  height: 120px;
  background-color: #1B78EA;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  line-height: 80px;
}
header h1 {
  line-height: 120px;
  font-family: sans-serif;
}
nav {
  background-color: #7B7B7B;
  width: 950px;
  margin: 0 auto;
}
.nav-palceholder {
  margin: 0 0 20px 0;
}
.menu {
  text-align: center;
}
.menu li {
  list-style-type: none;
  display: inline-block;
  line-height: 49px;
  cursor: pointer;
  padding: 8px 15px 8px 15px;
}
nav li:hover {
  background-color: #999999;
}
.menu a {
  text-decoration: none;
  font-size: 18px;
  font-family: sans-serif;
  text-align: center;
  position: relative;
  color: #eee;
  font-weight: bold;
}
.content {
  margin-top: 80px;
}
.content h1 {
  text-align: center;
  margin-top: 20px;
  font-family: sans-serif;
  margin-bottom: 40px;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  box-shadow: 0 6px 2px #646464;
}
      

Answers


Wilkoklak February 2016

You have to specify .nav height

 nav  {
    background-color: #7B7B7B;
    width: 950px;
    margin: 0 auto;
    height: ; /* for ex. 75px */
}


Pangloss February 2016

You'd better to reset the default padding and margin for the ul:

.menu ul {
  padding: 0;
  margin: 0;
}

Updated jsFiddle


EricBellDesigns February 2016

Your browser is adding a margin to the ul when it is fixed. You could add this rule to remove that margin and keep the nav the same height:

.fixed ul{
  margin:0px;
}

Post Status

Asked in February 2016
Viewed 2,458 times
Voted 7
Answered 3 times

Search




Leave an answer