How to make a Fixed or Sticky Navbar using media query?-CodePudding

How to make the navbar into a fixed or sticky position using media query? I want to make it visible when you scroll down the scroll bar of your page. I tried anything I could but I don't really get it.

Here are my examples of codes.

.navbar {
    background-color: #111;
    padding: 12px 16px;
    
}
    
.navbar ul {
    list-style-type: none;
    text-align: center;
    display: flex;
}

.navbar li a{
    color: #ccc;
    text-decoration: none;
    padding: 8px 16px;
    margin-left: 20px;
}


/* MEDIA QUERY */

HERE

@media screen and (max-width: 700px) {

    .navbar ul{
        flex-direction: column;
        padding: 20px;
    }

    .navbar ul a{
        margin: 5px 0px;
        width: 30%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div >
    <ul>
        <li><a href="" >Home</a></li>
        <li><a href="" >About Me</a></li>
        <li><a href="" >My Skills</a></li>
        <li><a href="" >Services</a></li>
        <li><a href="" >Certificates</a></li>
    </ul>
</div>

</body>
</html>

CodePudding user response：

You can make a navbar sticky or fixed by using the CSS position property. Set position property as "sticky" or "fixed".

See the snippet below. You can add it to any view port according to your need I have added it for larger screens.

body {
  height: 800px;
  background: cyan;
}

.navbar {
    background-color: #111;
    padding: 12px 16px;
    position: sticky;
    top: 0;
}
    
.navbar ul {
    list-style-type: none;
    text-align: center;
    display: flex;
}

.navbar li a{
    color: #ccc;
    text-decoration: none;
    padding: 8px 16px;
    margin-left: 20px;
}

@media screen and (max-width: 700px) {

    .navbar ul{
        flex-direction: column;
        padding: 20px;
    }

    .navbar ul a{
        margin: 5px 0px;
        width: 30%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div >
    <ul>
        <li><a href="" >Home</a></li>
        <li><a href="" >About Me</a></li>
        <li><a href="" >My Skills</a></li>
        <li><a href="" >Services</a></li>
        <li><a href="" >Certificates</a></li>
    </ul>
</div>

</body>
</html>