INU Login Sign up
Login Or Sign up

Answers for "w3school navbar"

Html
28

html navigation bar

<!-- How to create a navigation bar:
 This is the html file:

 Put the class="active" in the html file/page you are coding in
 (e.g. put the class="active" in the Home.html file)
 To position a page link to the right do class="right"
-->
<body>
<ul class="topnav">
  <li><a class="active" href="Home.html">Home</a></li>
  <li><a href="Page1.html">Page1</a></li>
  <li><a href="Page2.html">Page2</a></li>
  <li class="right" ><a href="About.html">About</a></li>
</ul>
</body>

<!-- This is the css file:
 (have a play with the colours and features!)-->
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  font-family: arial;
  text-align: left;
  width: 100%;
  position: sticky;
  top: 0;
}
ul.topnav li {float: left;}
ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  float: left;
  font-size: 17px;
  border-right: 1px solid #bbb;
}
ul.topnav li a:hover:not(.active) {
	background-color: #ddd;
    color: black;
}
ul.topnav li a.active {
	background-color: #4CAF50;
}
ul.topnav li.right {
	float: right;
}
@media screen and (max-width: 720px) {
  ul.topnav li{
	  width: 100%;
  }
  ul.topnav a{
	  width: 100%;
  }
}
<!-- END -->
Posted by: Guest on October-17-2020
4

navbar with css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navbar</title>

<style>
body {
margin: 0;
}
.navbar{
padding: 15px;
background-color: grey;
display: flex;
justify-content: space-between;
font-size: 30px;
text-decoration: none;
color: #fff;
}
    .nav-item {
    margin: 0;
    padding: 0;
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: space-evenly;
    font-size: 25px;
    }
    .nav-link {
    display: inline-block;
    }
    a{
    text-decoration: none;
    color: #fff;
    }

    @media (max-width: 715px) {
    .nav-item {
    flex-direction: column;
    align-items: center;
    }
    .nav-link {
    margin: 5px 0;
    }
    }
</style>


</head>
<body>
<nav class="navbar">
    <a class="brand" href="">Navebar</a>
    <ul class="nav-item">
        <li class="nav-link"><a href="">Learn more</a></li>
        <li class="nav-link"><a href="">About</a></li>
        <li class="nav-link"><a href="">Contact</a></li>
    </ul>
    <a class="home" href="">Home</a>
</nav>
</body>
</html>
Posted by: Guest on July-23-2021
9

bootstrap navigation bar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
Posted by: Guest on March-31-2020
5

html navigation bar

<!--Method 1: Using HTML5 Nav Tag-->
<nav>
	Thing1 |
  	Thing2 |
  	Thing3
</nav>

<!--Method 2: HTML5 + CSS3 with DIV element-->

<ul class="topnav">
  <li><a class="active" href="#">Thing 1</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li class="right" ><a href="#">Thing 2</a></li>
</ul>
<style>
	
  ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    font-family: arial;
    text-align: left;
    width: 100%;
    position: sticky;
    top: 0;
  }
  ul.topnav li {float: left;}
  ul.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    float: left;
    font-size: 17px;
    border-right: 1px solid #bbb;
  }
  ul.topnav li a:hover:not(.active) {
      background-color: #ddd;
      color: black;
  }
  ul.topnav li a.active {
      background-color: #4CAF50;
  }
  ul.topnav li.right {
      float: right;
  }
  @media screen and (max-width: 720px) {
    ul.topnav li{
        width: 100%;
    }
    ul.topnav a{
        width: 100%;
    }
  }
</style>
Posted by: Guest on January-03-2021
0

how to make a navigation bar in html

<!-- HTML PART -->
<a class="active" href="#home">Home</a>
<a href="news.html">News</a>
<a href="contact.html">Contact</a><a href="about.html">About</a>


<!-- CSS PART -->

.topnav a {
    float: left;
    color: goldenrod;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: rgb(221, 221, 221);
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: red;
    color: goldenrod;
  }
Posted by: Guest on September-04-2021

Code answers related to "w3school navbar"

Code answers related to "Html"

Browse Popular Code Answers by Language

Python
Javascript
Whatever
Shell/Bash
CSS
Html
PHP
SQL
Java
C#

Popular Programming Languages

Abap ActionScript Assembly BASIC C C# C++ Clojure Cobol CSS Dart Delphi Elixir Erlang F# Fortran Go Groovy Haskell Html Java Javascript Julia Kotlin Lisp Lua Matlab Objective-C Pascal Perl PHP Prolog Python R Ruby Rust Scala Scheme Shell/Bash SQL Swift TypeScript VBA Whatever

Advertisements

290x500

Company

Compilers

Help

Connect with us

footer logo

Copyright © 2021 Codeinu