Smart Sticky Navigation Menu

Question

I'm having a small problem with some text jumping around in my sticky menu. This is my code: http://jsfiddle.net/u6ywraj8/

As you can see, I want the red #menu to stick to the top when a user scrolls down. However, the text in the top left part of the menu jumps around. I want this text to always be in the top left part of the red menu, I don't want it to have the initial ~100px padding.

Thank you for your help!

Answer 1

Add float: left; to this class sticknav{}

sticknav {
  background: #ffffff;
  height: 30px;
  width: 100%;
  margin-right: 0px;
  margin-left: 0px;
  left: 0px;
  right: 0px;
  position: relative;
  z-index: 9999;
  float: left;
}

Answer 2

Try this one

sticknav {
  background: none repeat scroll 0 0 #ffffff;
  display: inline-block;
  height: 30px;
  left: 0;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  right: 0;
  width: 100%;
  z-index: 9999;
}