CSS position sticky

Question

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.

function menux() {
    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;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
    <nav>
        <h3 onclick="menux()">Menu</h3>
        <ul id="menu">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#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>        
    </section>
</body>
</html>

--EDITED POST- I added a piece of code and I'm counting on someone to help me

I want the menu to be in one line and always be visible at the top — vmahth1, Nov 09 '19 at 21:19
if there's only sticky + inline, a coordonate is missing.however , please clarify your question : https://stackoverflow.com/help/how-to-ask — G-Cyrillus, Nov 09 '19 at 21:23
start by sharing your code instead of an impossible-to-read screenshot — Temani Afif, Nov 09 '19 at 21:43

score 0 · Accepted Answer · answered Nov 09 '19 at 22:20

Make the li elements inline:

function menux() {
    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>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
    <nav>
        <h3 onclick="menux()">Menu</h3>
        <ul id="menu">
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#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>

Thanks to you I found my mistake. I have tried this method before, but it turned out that the elements were so large that they did not fall into one line, but when I matched them everything fits. — vmahth1, Nov 09 '19 at 22:28

CSS position sticky

1 Answers1

Linked