Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Css Position Sticky

Post a Comment
How can I make these menus show under the inscription menu in one line and not one below the other? And the menu should always be visible at the top. --EDITED POST- I added a piec

Solution 1:

Make the li elements inline:

functionmenux() {
    var x = document.getElementById("menu");
    if (x.style.display === "none") {
        x.style.display = "block";
    }
    else {
        x.style.display = "none";
    }
}
nav {
    top: 0;
    font: 15px verdana;
    background-color: #368a9a;
    width: 15%;
    height: 100%;
    position:sticky;         
}
ul {
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
}
li {
    display: inline;
}
<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width,initial-scale=1.0"></head><body><nav><h3onclick="menux()">Menu</h3><ulid="menu"><li><aclass="active"href="#home">Home</a></li><li><ahref="#news">News</a></li><li><ahref="#contact">Contact</a></li><li><ahref="#about">About</a></li></ul></nav><section><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div><div>test</div></section></body></html>

Post a Comment for "Css Position Sticky"