Fixed top menu scrolling along with content

Question

I'm attempting to make a fixed top menu. On a viewport > 1170px (which is my minimum page viewport here), everything is ok. On viewport less than 1170px, main content of the page is horizontally scrollable (ok), but #main-menu is displayed only up to current window height, so the last items are hidden.

Is is possible to make this menu fixed and to act like a part of the scrollable content?

The site will be not responsive.

HTML:

<nav id="main-menu">
    <div class="container">
        <ul class="nav">
            <li id="item1"><a href="#">Menu item 1</a></li>
            <li id="item2"><a href="#">Menu item 2</a></li>
            <li id="item3"><a href="#">Menu item 3</a></li>
            <li id="item4"><a href="#">Menu item 4</a></li>
            <li id="item5"><a href="#">Menu item 5</a></li>
        </ul>
    </div>
</nav>

<div id="content">
    <div class="container">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum odio et interdum pretium.</p>
    </div>
</div>

CSS

body {
  background-color: #000;
  color: #fff;
  font-size: 17px;
  min-width: 1170px;
}
.container {
  width: 1170px;
}
#main-menu {
  position: fixed;
  height: 68px;
  width: 100%;
  display: block;
  top: 0px;
  z-index: 500;
}

#content {
  position: relative;
  top: 150px;
}

DEMO: http://jsfiddle.net/zyqkrwtk/1/

I know it is partially solvable by setting overflow-x: auto to menu, but there will be extra scrollbar, which is not desirable.

EDIT: Sorry, I forgot to mention important thing - the page content is actually very long (it will be one-page microsite), so the fixed position is therefore desirable. Updated demo - http://jsfiddle.net/fvgf2mj6

possible duplicate of [Centering a fixed element, but scroll it horizontally](http://stackoverflow.com/questions/5250573/centering-a-fixed-element-but-scroll-it-horizontally) — Alvaro Menéndez, Sep 17 '15 at 14:30

score 0 · Answer 1 · answered Sep 17 '15 at 14:23

0

You have unnecessary uses of the CSS rule position.

I fixed your code here http://jsfiddle.net/nuc4s6h9/ Basically I removed the style for #content element and the position:relative for #main-menu element. Out of the box this 2 elements have display:block which made them render one below the other.

Let me know if that is what you wanted for.

answered Sep 17 '15 at 14:23

mvpasarel

775
5
13

Sorry, I forgot to mention important thing - the page content is very long and the fixed position is therefore desirable **Demo:** http://jsfiddle.net/fvgf2mj6/ – Michal Fíbek Sep 17 '15 at 14:26
Unfortunately this is not possible with pure CSS. – mvpasarel Sep 17 '15 at 14:33
And is it possible with some (ideally platform-independent) JS code? – Michal Fíbek Sep 17 '15 at 14:38
I do not think there are any plugins that are doing this exactly. You still need that scroll to work on entire page which is ignored when `position:fixed` is applied to the menu. So you will need to create this from scratch with JavaScript. You need to apply to the menu `position:absolute; top:0`, take the top coordinates of the page to see how much has been scrolled and increase the top CSS rule. That should definitely keep the scroll and make the menu sticky. – mvpasarel Sep 17 '15 at 14:47

score 0 · Answer 2 · edited May 23 '17 at 12:14

Ok, so I'm coming back with my solution! I have inspired in this similar question Centering a fixed element, but scroll it horizontally

Basically everything I had to change was

#main-menu {
position: absolute
...

and add this little jQuery code to set menu position and width when user scrolls/resizes window:

var alignMenu = function() {
    $('#main-menu').css({
        'top': $('body').scrollTop(),
        'width': $('#vystuduj-to').width()
    })
}

$(window).scroll(function(){ alignMenu() });
$(window).resize(function(){ alignMenu() });

DEMO: http://jsfiddle.net/LorLe7jx/

Thanks to everybody for pointing out to right direction!

Fixed top menu scrolling along with content

2 Answers2