navigation bar css template

Solutions on MaxInterview for navigation bar css template by the best coders in the world

showing results for - "navigation bar css template"

17 Oct 2017

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>

Victoire

17 Jun 2020

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>

Nicolò

30 Feb 2018

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>

similar questions

creating navigation menu using html and css top navbar css bar d 27exemple navigation horizontale css how to create a menu with html and css beautiful navigation bar css

queries leading to this page