1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Navbar</title>
6
7<style>
8body {
9margin: 0;
10}
11.navbar{
12padding: 15px;
13background-color: grey;
14display: flex;
15justify-content: space-between;
16font-size: 30px;
17text-decoration: none;
18color: #fff;
19}
20 .nav-item {
21 margin: 0;
22 padding: 0;
23 flex: 1;
24 max-width: 50%;
25 display: flex;
26 justify-content: space-evenly;
27 font-size: 25px;
28 }
29 .nav-link {
30 display: inline-block;
31 }
32 a{
33 text-decoration: none;
34 color: #fff;
35 }
36
37 @media (max-width: 715px) {
38 .nav-item {
39 flex-direction: column;
40 align-items: center;
41 }
42 .nav-link {
43 margin: 5px 0;
44 }
45 }
46</style>
47
48
49</head>
50<body>
51<nav class="navbar">
52 <a class="brand" href="">Navebar</a>
53 <ul class="nav-item">
54 <li class="nav-link"><a href="">Learn more</a></li>
55 <li class="nav-link"><a href="">About</a></li>
56 <li class="nav-link"><a href="">Contact</a></li>
57 </ul>
58 <a class="home" href="">Home</a>
59</nav>
60</body>
61</html>
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body {
7 margin: 0;
8 font-family: Arial, Helvetica, sans-serif;
9}
10
11.topnav {
12 overflow: hidden;
13 background-color: #333;
14}
15
16.topnav a {
17 float: left;
18 color: cyan;
19 text-align: center;
20 padding: 14px 16px;
21 text-decoration: none;
22 font-size: 17px;
23}
24
25.topnav a:hover {
26 background-color: #ddd;
27 color: black;
28}
29
30.topnav a.active {
31 background-color: gold;
32 color: white;
33}
34</style>
35</head>
36<body>
37
38<div class="topnav">
39 <a class="active" href="#home">Home</a>
40 <a href="#news">News</a>
41 <a href="#contact">Contact</a>
42 <a href="#about">About</a>
43</div>
44
45<div style="padding-left:16px">
46 <h2>Top Navigation Example</h2>
47 <p>By Yasin</p>
48</div>
49
50</body>
51</html>
52
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6body {
7 margin: 0;
8 font-family: Arial, Helvetica, sans-serif;
9}
10
11.topnav {
12 overflow: hidden;
13 background-color: #333;
14}
15
16.topnav a {
17 float: left;
18 color: cyan;
19 text-align: center;
20 padding: 14px 16px;
21 text-decoration: none;
22 font-size: 17px;
23}
24
25.topnav a:hover {
26 background-color: #ddd;
27 color: black;
28}
29
30.topnav a.active {
31 background-color: gold;
32 color: white;
33}
34</style>
35</head>
36<body>
37
38<div class="topnav">
39 <a class="active" href="#home">Home</a>
40 <a href="#news">News</a>
41 <a href="#contact">Contact</a>
42 <a href="#about">About</a>
43</div>
44
45<div style="padding-left:16px">
46 <h2>Top Navigation Example</h2>
47
48</div>
49
50</body>
51</html>
1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
2
3
4
5
6Use the link above in your code, between head, for bootstrap because the
7code below is used with bootstrap.
8Change the names and links to whatever you want, but don't change the
9class just make a custom class within that.
10
11
12
13<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
14 <a class="navbar-brand" href="">Brand name</a>
15 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
16 <span class="navbar-toggler-icon"></span>
17 </button>
18 <div class="collapse navbar-collapse"id="navbarSupportedContent">
19 <ul class="navbar-nav ml-auto">
20 <li class="nav-item">
21 <a class="nav-link" href="#top">TOP</a>
22 </li>
23 <li>
24 <a class="nav-link" href="#middle">MIDDLE</a>
25 </li>
26 <li>
27 <a class="nav-link" href="#bottom">BOTTOM</a>
28 </li>
29 </ul>
30</nav>