How to set the Navigation bar in the top of the html page?

VivekMogalla
March 29, 2023
143 views
0 votes
2 Answers

I developed an index.html page in django project. The below is the template code I developed. Right now, the navigation bar is coming at the bottom

index.html

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #dddddd
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 20px 24px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}

.active {
  background-color: #337ab7;
}

<!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">
  <title>Contact Book Template</title>
  <link type="text/css" rel="stylesheet" href="{%static 'css/style.css' %}" />
  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
</head>

<body>
  <img class="contact_book" src="{% static 'img/contact_book.jpg' %}" alt="first" />
  <div id="booking" class="section">
    <div>
      <ul id="horizantal-style">
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li style="float:right"><a href="#">Login</a></li>
        <li style="float:right"><a class="active" href="#about">Sign up</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

I am expecting it to set the navigation bar at the top, could anyone please help?

Answers

You just need to change your HTML markup a little bit. Put the image tag after the menu.
If you want to place an image before the menu it’s also possible to wrap everything in a flex container and change the order of items, but it’s overhead for this task.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #dddddd
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 20px 24px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}

.active {
  background-color: #337ab7;
}

<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">

  <title>Contact Book Template</title>

  <link type="text/css" rel="stylesheet" href="{%static 'css/style.css' %}" />

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">

</head>

<body>
  <div>
    <ul id="horizontal-style">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li style="float:right"><a href="#">Login</a></li>
      <li style="float:right"><a class="active" href="#about">Sign up</a></li>
    </ul>
  </div>

  <img class="contact_book" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" alt="first" />

  <div id="booking" class="section">
    <!-- Rest of the page content here -->
  </div>

</body>

</html>

I made two examples using some altered markup to not use ul and li items which gives a slight bit of flexibility in the layout so we can then style with independent html blocks in the header to push them each direction using grid css

First example shows the provided small set with some ugly borders and padding to show what is where.

The second build on this with a commonly seen addition to a navigation as a header.

Why: Review the second example to see the "header" with content and a footer.

* {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.section {
  width: 100vw;
}

.nav-container {
  background-color: #dddddd;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: space-between;
  border: solid #00FF00 1px;
  padding: 0.5rem;
}

.nav-group {
  padding: 0.5rem;
  display: grid;
  grid-gap: 0.5rem;
  border: solid 1px #FF00FF;
}

.nav-links {
  grid-template-columns: repeat(3, minmax(5rem, 1fr));
}

.nav-actions {
  grid-template-columns: repeat(2, minmax(5rem, 1fr));
  justify-self: end;
}

.nav-item {
  text-align center;
  border: solid #FFFF00 1px;
}

.nav-item a {
  display: block;
  padding: 1.5em;
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  text-align: center;
  color: #000000;
  text-decoration: none;
}

.nav-item a:hover {
  background-color: #00000044;
  color: #FFFFFF;
}

.active {
  background-color: #337ab7;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="{%static 'css/style.css' %}" />
  <link rel="preload" as="image" href="https://via.placeholder.com/800x500">
</head>

<body>
  <div class="section">
    <div>
      <div class="nav-container">
        <div class="nav-group nav-links">
          <div class="nav-item linker"><a href="#">Home</a></div>
          <div class="nav-item linker"><a href="#">News</a></div>
          <div class="nav-item linker"><a href="#">Contact</a></div>
        </div>
        <div class="nav-group nav-actions">
          <div class="nav-item login"><a href="#">Login</a></div>
          <div class="nav-item signup"><a class="active" href="#about">Sign up</a></div>
        </div>
      </div>
    </div>
  </div>
</body>

Why not use li: here I add some additional markup:

* {
  font-size: 16px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #00ffff22;
}

.page-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: #ddaa0022;
}

.section {
  padding: 0.25rem;
}

.nav-container {
  background-color: #dddddd;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #00000044;
}

.footer-container {
  display: grid;
  place-items: center;
  height: 3rem;
}

.nav-group {
  display: grid;
  grid-template-rows: 3rem;
  align-items: center;
  grid-gap: 0;

}

.nav-item {
  height: 100%;
}

.nav-links {
  grid-template-columns: repeat(3, 1fr);
}

.nav-actions {
  grid-template-columns: repeat(2, 1fr);
  justify-self: end;
}

.nav-item {
  text-align: center;
}

.nav-item a {
  padding: 0.5em;
  padding-top: 0.75em;
  display: block;
  height: 100%;
  color: #000000;
  text-decoration: none;
}

.nav-item a:hover {
  background-color: #00000044;
  color: #FFFFFF;
}

.active {
  background-color: #337ab7;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400" rel="stylesheet">
  <link type="text/css" rel="stylesheet" href="{%static 'css/style.css' %}" />
  <link rel="preload" as="image" href="https://via.placeholder.com/800x500">
</head>

<body>
  <div class="page-container">
    <div class="section nav-container">
      <div class="nav-group nav-links">
        <div class="nav-item linker"><a href="#">Home</a></div>
        <div class="nav-item linker"><a href="#">News</a></div>
        <div class="nav-item linker"><a href="#">Contact</a></div>
      </div>
      <div class="nav-group nav-actions">
        <div class="nav-item login"><a href="#">Login</a></div>
        <div class="nav-item signup"><a class="active" href="#about">Sign up</a></div>
      </div>
    </div>
    <div class="section content-container">HI I am here
    <img src="https://via.placeholder.com/800x500"alt="I am image">
    </div>
    <div class="section footer-container">I am after
    </div>
  </div>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.