odzivna navigacijska vrstica, responsive navbar

Odzivna navigacijska vrstica (ang. Responsive navbar)

Odzivna navigacijska vrstica je izboljšana različica standardne navigacijske vrstice, ki se avtomatsko prilagodi različnim velikostim zaslonov in napravam, na katerih je spletna stran ali aplikacija prikazana. Odzivnost zagotavlja, da je navigacija enostavna in dostopna tako na namiznih računalnikih, kot tudi na tablicah in pametnih telefonih.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>iskalnik v navigacijski vrstici</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

@media screen and (max-width: 920px) {
            .navbar a:not(:first-child) {
                display: none;
            }
            .navbar a.icon {
                float: right;
                display: block;
            }
            .domov {
                display: none;
            }
            .material-symbols-outlined {
                display: block;
            }
        }
        @media screen and (max-width: 920px) {
            .navbar.responsive {
                position: relative;
            }
            .navbar.responsive .icon {
                position: absolute;
                top: 0;
                right: 0;
            }
            .navbar.responsive a {
                float: none;
                display: block;
                text-align: left;
            }
            .navbar input[type=text], .navbar .searchBox{
                float: none;
                display: block;
                text-align: left;
                width: 100%;
                margin: 0;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
<div class="navbar" id="navbar">
    <a href="#">
        <span class="domov">DOMOV</span>
        <span class="material-symbols-outlined">home</span>
    </a>

<div class="container">
    <h1>Dobrodošli v CSS vadnico</h1>
</div>

if (a.className === "navbar") {
            a.className += " responsive";
        }   else {
            a.className = "navbar";
        }
    }
</script>
</body>
</html>