Hei, har prøvd en liten stund på å få laget en navigasjons bar. Vil dette vær ok, hva kan jeg evt gjøre for å gjøre den bedre?
https://jsfiddle.net/bhc6su79/
https://jsfiddle.net/bhc6su79/
https://jsfiddle.net/bhc6su79/
Kode
<!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>Navigation bar</title> <link rel="stylesheet" href="./index.css"> </head> <body> <header class="wrapper"> <nav class="navbar"> <a class="navbar-brand" href="./index.html">Nichlas</a> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link" href="#">CSS3</a></li> <li class="nav-item"><a class="nav-link" href="#">HTML5</a></li> <li class="nav-item"><a class="nav-link" href="#">Portefolio</a></li> </ul> <a class="CV" href="#">Last ned min CV</a> </nav> </header> </body> </html>
Kode
*{ margin: 0; padding: 0; } .wrapper{ height: 76px; } .navbar{ position: fixed; background-color: aquamarine; width: 100%; padding: 16px; text-align: center; text-decoration: none; } .navbar-nav{ display: inline-block; } .nav-item{ display: inline-block; } .nav-link{ text-decoration: none; padding: 0 10px; text-align: center; color: blueviolet; } .navbar-brand{ display: inline-block; padding: -10px; text-align: center; text-decoration: none; color: blueviolet; font-size: 20px; font-weight: 600; float: left; } a:hover{ color: black; } .CV{ display: inline-block; color: blueviolet; text-decoration: none; position: fixed; text-align: center; padding: 0px 10px; right: 10px; border: 2px solid black; border-radius: 100px; font-size: 20px; font-weight: 600; }
Sist endret av Jonta; 30. mai 2022 kl. 16:12.
Grunn: Code-tagger og jsfiddle-lenke lagt til