How to Make a Fix Positioned Menu Bar

How can I make a fix positioned menu bar?

What you're after is a 'sticky navbar/menu'.

The simplest way would be to add the below CSS to your menu/navbar

position:fixed;
top:0px;

That said, for an effect closer to the one you've posted, you'll probably want to look at using some jQuery, e.g.:

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.menu').addClass('fixed');
     }
     else {
         $('.menu').removeClass('fixed');
     }
});

What this does is 'fix' the menu bar to the top of the page once you scroll past a certain point (e.g. 50px) by adding the CSS class 'fixed' to the .menu element, the fixed class would simply be e.g. the CSS above.

There are some nice examples listed here.

Menu bar with position fixed not working

Add z-index to #cssmenu to make link clickable as below,

The z-index CSS property specifies the z-order of a positioned element
and its descendants. When elements overlap, z-order determines which
one covers the other.

#cssmenu {
  position: fixed;
  left: 0;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #E6E6E4;
  z-index:9;/*Add this*/
}

#cssmenu {  position: fixed;  left: 0;  top: 0;  height: 40px;  width: 100%;  background-color: #E6E6E4;  z-index: 9;}
.row {  margin: 0 auto;  width: 100%;  height: 400px;}
.col-sm-4 {  height: 100%;  border: 1px solid black;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div id='cssmenu'>  <ul class="menubar">    <li><a href="#" class="btn btn-sm">Please</a></li>    <li><a href="#" class="btn btn-sm">Fix</a></li>    <li><a href="#" class="btn btn-sm">This</a></li>    <li><a href="#" class="btn btn-sm">Problem</a></li>  </ul></div><div class="container-fluid">  <div class='row'>    <div class="col-sm-4"></div>    <div class="col-sm-4"></div>    <div class="col-sm-4"></div>  </div></div>

How to make a navigation bar always stay at the top of a fixed-position panel that is in the middle of the screen?

To make an element scrollable it has to have a height - otherwise the element just extends
to be the height of whatever is in it.

In this instance we can't know the exact height of the remainder of the panel, but we can use flex to ask that the text be given the height remaining. Put your text into a div which can then take up the remaining vertical space. I have given this div an id of textdiv and have put the additional CSS into #content and #panel as I don't know whether you use the classes elsewhere but of course you could use classes if appropriate.

So the additional CSS is:

#panel {
  display: flex;
  flex-direction: column;
}
#content {
  display: flex;
  flex-direction: column;
  overflow-y:hidden;
}
#textdiv {
  overflow-y: auto;
}

Here is the complete snippet, with navBarContainer1 which solves your other, horizontal overflow, problem.

:root {
  --edges: #333;
  --footer: #fff;
  --bgd: #777;    
  
  --button: #333;
  --button_hover: #111;
  --button_lit: #33aaff;
  
  --selectable: #999;
  --selectable_hover: #ddd;
  
  --accent: #33aaff;
  --theme_main: #e9f4ff;
  --theme_second: #ddd;
  
  --formcolor: #fff;
  --inactive: #eee;
}

body{
background-color: var(--bgd);
margin: 0%;
padding: 0;
}
.navBarContainer1{
position: absolute;
background-color: var(--button);
width: 100%;
margin: 0%;
padding: 0;
}
.navBarContainer2{
position: fixed;
background-color: var(--button);
width: 100%;
margin: 0%;
padding: 0;
}
.blockbutton {
display: inline;
margin: 0%;
padding: 0;
}
button{
border: none;
cursor: pointer;
color: white;
text-align: center;
padding: 14px 16px;
margin: 0;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease;
}
.navButton{
background-color: var(--button);
float: none;
}
.navButton:hover:not(.activeNav) {
background-color: var(--button_hover);
}
.mainButton{
background-color: var(--selectable);
border: 1px solid var(--edges);
}
.mainButton:hover:not(:disabled){
background-color: var(--selectable_hover);
}
.activeNav {
background-color: var(--button_lit);
}
button:disabled{
background-color: var(--inactive);
color: var(--inactive);
}
.overlay{
position: fixed;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
border-radius: 15px;
background-color: var(--theme_main);
border: 10px solid var(--edges);
overflow: auto;
}
.mainWindow{
margin-top: 40px;
padding: 20px;
}
.file{
background-color: var(--selectable);
width: 99%;
border: 1px solid var(--edges);
cursor: pointer;
color: black;
padding: 14px 0px;
font-size: 16px;
transition: all 0.3s ease;
}
.file:hover{
background-color: var(--selectable_hover);
}
.upload_form{
background: var(--formcolor);
padding: 0px;
border-radius: 5px;
border: 1px solid var(--edges);
max-width: 600px;
margin: 0px auto;
text-align: center;
}
#footer{
position: fixed;
bottom: 0;
text-align: center;
padding: 15px;
color: var(--footer);
font-size: 16pt;
}
progress::-webkit-progress-bar {
background-color: var(--theme_second);
width: 100%;
border: 1px solid var(--edges);
}
progress::-webkit-progress-value {
background-color: var(--accent);
width: 100%;
}
progress {
background-color: var(--theme_second);
width: 100%;
border: 1px solid var(--edges);
color: var(--accent);
}
.hidden{
display: none;
}
#panel {
  display: flex;
  flex-direction: column;
}
#content {
  display: flex;
  flex-direction: column;
  overflow-y:hidden;
}
#textdiv {
  overflow-y: auto;
}

<div class="navBarContainer1">
  <button class="navButton activeNav" onclick="">A</button>
  <button class="navButton" onclick="">B</button>
  <button class="navButton" onclick="">C</button>
  <button class="navButton" onclick="">D</button>
  <button class="navButton" style="float:right;" onclick="toggleIssues">E</button>
</div>
<div id="panel" class="overlay" style="display:flex;flex-direction:column;">
  <div class="navBarContainer1">
    <button class="info navButton" onclick="">W</button>
    <button class="info navButton" onclick="">X</button>
    <button class="info navButton" onclick="">Y</button>
    <button class="info navButton" onclick="">Z</button>
  </div>
  <div id="content" class="mainWindow">
  <form class="upload_form">
    <h3 id="friendly_prog">Progress: 50%</h3>
    <progress id="sysprog" max="100" value="50"></progress>
    <input type="file" class="file" id="file">
    <h3 id="status">Status: Reticulating Splines</h3>
    <button class="mainButton" type="button" id="start" onclick="">Start!</button>
  </form>
  <div id="textdiv">
  <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
  <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
  <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
  </div>
  </div>
</div>

How can I make a menubar fixed on the top while scrolling

This should get you started

 <div class="menuBar">
        <img class="logo" src="logo.jpg"/>
        <div class="nav"> 
            <ul>
                <li>Menu1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
            </ul> 
        </div>
    </div>

body{
    margin-top:50px;}
.menuBar{
    width:100%;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    }
.logo{
    float:left;
    }
.nav{
    float:right;
    margin-right:10px;}
.nav ul li{
    list-style:none;
    float:left;
    }

Fix positioned menu bar covers elements that's linked to it

I've faced a similer prob where i've used some jquery.

$('#linkId').click(function(){
    $('html, body').animate({ scrollTop: $('#toMove').offset().top });

});

but now in your case since the header is a fixed one i've done something and updated the same here in FIDDLE

nav bar fixed position and how it affects other elements positioning

Just use position: sticky; combined with top: 0; and it will work as intended. your main issue is following css line:

.header-wrapper{

position: fixed;

position: top;

z-index:10;

width:90%;

}

its invalid css as you first declare position: fixed; and right after position: top; which is invalid and overwriets the first. What you actually mean is top: 0;

background-color: white; }

.full-page-div {
  width: 90%;
  margin: 0 auto;
}

.name-header {
  font-family: 'Raleway';
  font-size: 25px;
  color: grey;
  text-transform: uppercase;
  margin-bottom: 80px;
}

.feature-recipe-div {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 80px;
  z-index: 1;
}

.feature-paragraph-div {
  width: 55%;
}

.feature-recipe-talk,
.feature-recipe-link {
  font-family: 'Cormorant';
  font-size: 18px;
}

.feature-recipe-link {
  color: grey;
}

.feature-recipe-header {
  text-align: center;
  font-family: 'Raleway';
  font-size: 50px;
  color: black;
  font-weight: 400;
}

.header-wrapper {
  position: sticky;
  top: 0;
  width: 90%;
  background-color: white;
}

.header-nav {
  display: flex;
  list-style: none;
  justify-content: space-evenly;
  border-bottom: 1px solid black;
  padding-bottom: 10px;
  margin-bottom: 50px;
  z-index: 10;
}

.header-nav-link {
  text-decoration: none;
  font-family: 'Raleway';
  text-transform: uppercase;
  color: grey;
}

<h1 class="name-header">Lacy Roe Recipes</h1>

<nav class="header-wrapper">
  <ul class="header-nav">
    <li>
      <a href=# class="header-nav-link">Home</a>
    </li>
    <li class="header-nav-link-dropdown">
      <a href=# class="header-nav-link">Recipes</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Cookbooks</a>
    </li>
    <li>
      <a href=# class="header-nav-link">About</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Work With Me</a>
    </li>
    <li>
      <a href=# class="header-nav-link">Contact</a>
    </li>
    <li>
      <a href=# class="header-nav-link" class="search-icon"><i class="fas fa-search"></i><input type="text" class="search-area"></a>
    </li>
  </ul>
</nav>

<div class="feature-recipe-div">
  <div class="feature-paragraph-div">
    <h2 class="feature-recipe-header">New Lunch Classics</h2>
    <p class="feature-recipe-talk">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe facilis, iure sed quo, expedita nam voluptates consequatur eius vero omnis accusantium. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci quibusdam voluptatem facilis
      aut cumque consequuntur fugiat dicta, praesentium sapiente mollitia in nobis dolorum voluptates iste, laboriosam porro saepe maiores vitae. </p>
    <p><a href="#" class="feature-recipe-link">Continue Reading</a></p>
  </div>
  <div class="main-img-div">
    <img class="main-img" src="https://greenkitchenstories.com/wp-content/uploads/2013/01/Breakfast_bowl_2.jpg">
    <p class="cite">Photograph by David Frankel</p>
  </div>
</div>

Static to fixed menu bar

It is important to note that the header on the example site does not transition from 'static' to 'fixed' position. It is always positioned 'fixed'.

To recreate the effects of the provided link, you need to be somewhat savvy in your choices on what gets transitioned, types of transitioning and what properties are changing.

One way to accomplish this is using jQuery to create a condition when the user has scrolled beyond the top of the window.

For instance:

HTML:

<div class="menu">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

<div class="content">
    <!--Site content-->
</div>

CSS:

.menu{
  position:fixed;
  width:100%;
  height:100px;
  background-color:transparent;
  -webkit-transition:  all 200ms ease;
  transition: all 200ms ease;
}

.content{
  padding:100px 60px 60px 60px; /*accomodates the fixed position header space*/

  -webkit-transition:  all 200ms ease;
  transition: all 200ms ease;
}

/* Styles for the menu after scrollTop >= 1 */
.menu.scrolled{
  height:60px;
  background-color:black;
  color:white;
}

.menu.scrolled + .content{
  padding-top:60px;
}

JS:

$(function() {
  $(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    if (scrolled >= 1) {
      $('.menu').addClass("scrolled");
    } else {
      $('.menu').removeClass("scrolled");
    }
  });
});

A version containg more stylistic CSS and additional CSS transitions can be seen here:
http://codepen.io/eoghanTadhg/pen/PNRNOv

with position: fixed the posts go under the menu

Just add some margin to the first paragraph:

header + p {
  margin-top: 100px; // example value
}

Also, note that, when you set something position to other that static, set the initial values for top/bottom/left/right:

header {
  top: 0;
  left: 0;
  right: 0;
}

Fix sticky navigation bar on top of the screen

sticky positioning will be treated as relative positioned until you start scrolling down. so if the parent of the sticky element has some margin/padding it will affect the element.

you might want to try fixed positioning so that the element is always fixed at the top without any margin.

of course, fixed element removes the gap of where the element was supposed to be so you content might overlap and will need to add another element with the same height as your fixed element to fix overlapping content.

see below for example.

.bar {  position:fixed;  top:0;  color: white;  background-color: black;  width:100%;  left:0;}
p {  display: inline;}

<nav class="bar">  <p>Home</p>  <p>Info</p>  <p>Contact Us</p></nav><div style="height:1000px"></div>

---

Related Topics