1

This won't work in any browser I pull it up in. I can't even get the fixed position property to work when following along with tutorials.

Here's one tutorial that I tried among others. https://youtu.be/3I2Uh-D-lzI Everything goes great until I enter in the position: fixed; line.

I just really want a fixed nav that follows down the page as a user scrolls...

CSS:

header {
    height: 100px;
    width: 100%;
    position: fixed;
    -webkit-transform: translateZ(0);
    top: 0px;
    left: 0px;
    right: 0px;
}

.container{
    margin: 0 auto;
}

HTML:

<header>
    <div class="container">
        <div class="logo">
            <h1>Company Name</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">services</a></li>
                <li><a href="#">resources</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </div>
</header>
Termininja
  • 6,620
  • 12
  • 48
  • 49
swens688
  • 11
  • 2

3 Answers3

0

Here is the CSS you need for nav to fix at top:

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100px;
  -webkit-transform: translateZ(0);
  background-color: #00a087;
}

Remove the styles you do not need. for example, the background.

This is very good source for reading to make nav bar fixed at top: http://sixrevisions.com/css/fixed-navigation-bar/

I created a fiddle: https://jsfiddle.net/tn0hm9y7/

Maihan Nijat
  • 9,054
  • 11
  • 62
  • 110
0

The given answer should work, but here's why: You need to remove that transform.

The transform property starts a new stacking context and containing box. Translation: the element that has both transform and position fixed is essentially sticking to itself now, not the window like you desire.

https://stackoverflow.com/a/15256339/4504641

Community
  • 1
  • 1
ingridly
  • 159
  • 10
0

I'm not sure how you expect it to look with your provided code, however, I made a few minor changes using your setup.

<style>
header {
    height: 100px;
    width: 100vw;
    position: fixed;
    -webkit-transform: translateZ(0);
    top:0px;
    left:0px;
}
.container{
    margin: 0 auto;
}
</style>

If you want to verify just throw a div in with a large height in the body. 

<div style="height:1200px;">&nbsp;</div>

I like to use the width: 100vw; (Viewport Width) because it will grab the full width of the screen regardless of what div the element is in. You don't have to specify the 'right' if you specify 'left'.

JPA9000
  • 21
  • 4