CODEWITHSUNDEEP
htmlcss
Curious
Curious

Reputation: 111

Static menu in HTML / CSS when scrolling down?

How can I make the horizontal and main menu of my web page not be displaced by scrolling down the contents of the web? I think it should be with the position: fixed tag so that it remains static and does not change regardless of the dimensions of the body of the page but I can not.

The menu in question is this and thus remains with its respective CSS of the menu that is this:

#menu ul
{   margin: 0px;
    padding: 0px;
}

#menu ul li{
    list-style: none;
    display: inline-block;
    padding: 25px 8px;
    margin-right: 60px;
    margin-left: 60px;
}

#menu ul li a{
    color: #FFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 25px 8px;
}

#menu ul li a:hover{
    background-color: #91B0AF;
    color: #000;
    font-weight: bold;
    padding: 25px 8px;
}

If I put the position fixed in the complete div of the menu, the thing stays like this, it gets mismatched according to the background image and it is aligned to the left: S

Thank you!!

Upvotes: 2

Views: 756

Answers (4)

VSM
VSM

Reputation: 1785

$(window).scroll(function () {
    var y = $(window).scrollTop();
    if (y > 0) {
        $('#header').addClass('fixedPosition');
    } else {
        $('#header').removeClass('fixedPosition');

    }
});
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.home {
    min-height:400px;
}
#header-center {
    margin: 0 auto;
}
#header {
    height: 80px;
    background-color: #E0E0E1;
    color: #FFF;
    position: relative;
    width: 100%;
    z-index: 9999;
}
#header p {
    color: #FFF;
}
#header h1 {
    font-size: 20px;
    margin-top: 10px;
    letter-spacing: 0;
}
#header h1 a {
    font-size: 25px;
    color: #FFF;
    text-decoration: none;
}
#header h1 a:hover {
    color: #FFF;
}

ul {
  margin:0 auto;
  display: flex;
  justify-content: center;
}
ul li {
    float: left;
    list-style:none;
}
ul li a {
    font-size: 20px;
    color: #FFF;
    margin: 0px;
    padding: 10px;
    text-decoration: none;
    float: left;
}

.fixedPosition {
    position:fixed !important;
    top: 0;
    left: 0;
    right:0;
    width:100%;
    text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="header">
    <div id="header-center">
        <ul>
          <li><a>HOME</a></li>
          <li><a>WORKS</a></li>
          <li><a>ABOUT</a></li>
          <li><a>CONTACT</a></li>
        </ul>
    </div>
</div>
<div class="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>

Try this. See whether it is match with your requirement.

Upvotes: 2

Morteza Fathnia
Morteza Fathnia

Reputation: 435

$(window).scroll(function() {
    if ($(this).scrollTop() >= 100) { // this refers to window
        position:fixed;
    }
});

Upvotes: 1

AKASH PANDEY
AKASH PANDEY

Reputation: 363

so if you want to hide it that means on scrolling you want it to move with the page if that is the case you can go with 

     position: relative;
     width: 100%;
     top: 0;

but if you want it to br fixed trying applying this code on #menu. I suppose it is a div element. 

     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     right: 0;

if it is not working share a screenshot for us to check what the issue is exactly.

Upvotes: 1

VSM
VSM

Reputation: 1785

Add below styles to complete div of the main menu.

position:fixed;
left:0;
top:0;
right:0;
text-align:center;

This code works for you. Try it. let me know if there any problem.

Upvotes: 1

Related Questions