CSS how to add fixed menu to parallax website layout

Question

I am trying to make a parallax website with a fixed menu bar but cant figure out how to fix the menu bar at the top of the page. I tried different position values but none of them seem to work

Could really use some help here! Im stuck.. Doing this for free and its for a nice guy whom I sure will appreciate it!

https://jsfiddle.net/p3osoddq/

CSS

* {
  margin: 0px;
  padding: 0px;
}

html, body {
  height: 100%;
  font-family: "Arial, Helvetic Neue, Helvetic, monospace";
  font-weight: normal;
  font-size: 16px;
}


.navigation {
  position: relative;
  top:0;
  background-color:white;
  width:100%;
  height:120px;
}

.block-one, .block-two, .block-three {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.block-one {
  background-color: blue;
  min-height: 100%;
}

.block-two {
  background-color: green;
  min-height: 70%;
}

.block-two-header {
  position: relative;
  background-color: #ffffff;
  color: #777777;
  min-height:30%;
  display:flex;
  align-items: center; /* Vertical center alignment */
  justify-content: center; /* Horizontal center alignment */
}
.block-two-header h3 {
  padding-bottom:20px;
  text-align: center;
}

.block-two-header p {  
  text-align: center;
  line-height: 25px;
  padding: 0px 50px;
}

.block-three {
  background-color: red;
  min-height: 400px;
}

HTML

<!doctype html>
<html>

  <head>
    <link type="text/css" href="style.css" rel="stylesheet"/>
    <title>Home</title>
  </head>

  <body>

        <div class="navigation">

        </div>

        <div class="block-one">
        </div>

        <div class="block-two-header">
          <span>
          <h3>Parallax Demo</h3>
          <p>
            Parallax scrolling is a web site trend where the background content is moved at a different speed than the 
            foreground content while scrolling. Nascetur per nec posuere turpis, lectus nec libero turpis nunc at, sed 
            posuere mollis ullamcorper libero ante lectus, blandit pellentesque a, magna turpis est sapien duis blandit 
            dignissim. Viverra interdum mi magna mi, morbi sociis. Condimentum dui ipsum consequat morbi, curabitur 
            aliquam pede, nullam vitae eu placerat eget et vehicula. Varius quisque non molestie dolor, nunc nisl dapibus 
            vestibulum at, sodales tincidunt mauris ullamcorper, dapibus pulvinar, in in neque risus odio. Accumsan 
            fringilla vulputate at quibusdam sociis eleifend, aenean maecenas vulputate, non id vehicula lorem mattis, 
            ratione interdum sociis ornare. Suscipit proin magna cras vel, non sit platea sit, maecenas ante augue etiam 
            maecenas, porta porttitor placerat leo.
          </p>
          </span>
        </div>

        <div class="block-two">
        </div>

        <div class="block-three">
        </div>

        <div class="block-one">
        </div>

  </body>

</html>

You might want to look into https://stackoverflow.com/questions/35958375/css-make-div-position-fixed-inside-div-with-perspective-propertie/ — qbolec, Jun 10 '17 at 00:21

ab29007 · Accepted Answer · 2016-12-24T07:46:12.810

1

Edit this in your css. Adding padding-top to your body won't hide the upper part of your parallax.

Here's the working fiddle

body{
  padding:120px 0 0 ;
}

.navigation {
  position:fixed;
  z-index:100;
  top:0;
  background-color:white;
  width:100%;
  height:120px;
}

edited Dec 24 '16 at 07:46

answered Dec 24 '16 at 07:38

ab29007

7,611
2
17
43

@John Doe Did it solve your problem? if yes then can you please accept the answer. you know click on the checkmark on the left of the answer. – ab29007 Dec 24 '16 at 16:47
Thank you very much! Sorry for the wait, holiday had me all wrapped up. – John Doe Dec 26 '16 at 03:52

Jishnu V S · Answer 2 · 2016-12-24T07:46:42.783

0

Try with position:fixed, the header part always stick on top

.navigation {
  position:fixed;
  z-index:100;
  top:0;
  background-color:white;
  width:100%;
  height:120px;
}

Try with the working fiddle

https://jsfiddle.net/1a45z65g/

edited Dec 24 '16 at 07:46

answered Dec 24 '16 at 07:40

Jishnu V S

8,164
7
27
57

score 0 · Answer 3 · answered Dec 24 '16 at 07:49

Using Bootstrap, you can have a navigation bar at the top of the webpage, and using custom CSS, you can have its position fixed, so that when you scroll down, the whole div will have the attribute position:fixed.

Here's the code:

In the <head> , include the CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

score 0 · Answer 4 · answered Apr 12 '19 at 22:20

I have the same problem

With"sticky" position resolves the issue

body {
 margin: 0;
 padding: 0 0;
 perspective: 1px;
 transform-style: preserve-3d;
 height: 100%;
 overflow-y: scroll;
 overflow-x: hidden;
 }

  header {
  position: sticky;
  top: 0px;
  height: auto;
  width: 100%;
 }

score -1 · Answer 5 · answered Dec 24 '16 at 07:41

-1

I would suggest to change the position absolute to fixed. Give it a try to see the difference

answered Dec 24 '16 at 07:41

RJN

13
8

CSS how to add fixed menu to parallax website layout

5 Answers5