How to line up the nav bar items for website responsiveness?

webdev2009 0
Viewed 35

Here is the image: website responsiveness bug

One of my nav bar items is completely not lined up. I am thinking it is the search bar but I don't entirely know, or it might be the padding or margin, but I still don't know. It has been a day since I have been able to solve the problem. I just need help getting it lined up for the website.

Here is the CSS code:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

.nav-bar {
  overflow: hidden;
  height: 80px;
}

.nav-bar a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 16px;
}

.nav-bar a:hover {
  cursor: pointer;
}

.nav-bar a.active {
  background-color: #ccc;
}

.nav-bar .search-container {
  float: right;
}

.nav-bar input[type="text"] {
  margin-top: 6px;
  margin-top: 12px;
  margin-left: 1.5rem;
  font-size: 16px;
  height: 20px;
  border: 1.5px solid black;
  border-radius: 0.15rem;
}

.nav-bar .search-container button {
  float: right;
  padding: 6px;
  margin-top: 7px;
  margin-right: 5rem;
  background: none;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.nav-bar .search-container button .fa-search {
  font-size: 15px;
  margin-left: 0.5rem;
}

.nav-bar .logo-container {
  float: left;
}

.nav-bar .logo-container img {
  margin-left: 4rem;
  object-fit: contain;
  width: max-content;
  height: 50px;
}

@media screen and (max-width: 1050px) {

  .nav-bar ul a {
    float: none;
  }

  .nav-bar {
    height: max-content;
  }

  .nav-bar input[type=text] {
    margin-left: 0rem;
  }
}
<!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>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="nav-bar" id="nav-bar">
      <ul>
        <div class="logo-container">
          <img src="images/textlogo.png" alt="Paradigm Pet Professionals" />
        </div>
        <div class="search-container">
          <form action="">
            <input type="text" name="search" />
            <button type="submit"><i class="fa fa-search"></i></i></button>
          </form>
        </div>
        <a href="Small A/index.html">Small A</a>
        <a href="Birds/index.html">Birds</a>
        <a href="Fish/index.html">Fish</a>
        <a href="Dogs/index.html">Dogs</a>
        <a href="Cats/index.html">Cats</a>
        <a class="active" href="#">Home</a>
      </ul>
    </div>


I need help lining up the nav bar items for a website that I am trying to work on the responsiveness for, any help is appreciated. I just need some help and this problem will be fixed.
css html
2 Answers

TL;DR

In short: float is the issue. Instead, I recommend CSS Flexbox or CSS Grid.

A solution

Warning: I used display: contents, which currently comes with major accessibility bugs and should therefore not be used in a business environment.

Instead of display: contents, you can e.g. use absolute positioning and CSS translate.

Fixing your HTML

Your HTML is invalid, so let's fix these issues:

  • Your <ul> contains content not wrapped in <li>.
  • You use end-tags (<... />) on void-elements in HTML5.

Further, it looks like you want to create a page header, and not only a nav-bar. Since you declare that you're using HTML5 (<!DOCTYPE html>), let's use some semantic elements:

  • Use <header> for page header section.
  • Use <nav> for navigational section (in page header section).

Personally I find that the website logo is part of the page header, but not of the navigation. Therefore I did not contain it in <nav>.

Here are the changes to your HTML:

/* CSS temporatily removed */
<header><!--Replace .nav-bar with HEADER element-->
  <div class="logo-container">
    <img src="images/textlogo.png" alt="Paradigm Pet Professionals" />
  </div>
  <nav><!--Add NAV element-->
    <div class="search-container">
      <form>
        <input name="search" />
        <button><i class="fa fa-search"></i></button>
      </form>
    </div>
    <ul><!--Wrap children in LI elements-->
      <li><a href="Small A/index.html">Small A</a>
      <li><a href="Birds/index.html">Birds</a>
      <li><a href="Fish/index.html">Fish</a>
      <li><a href="Dogs/index.html">Dogs</a>
      <li><a href="Cats/index.html">Cats</a>
      <li><a class="active" href="#">Home</a>
    </ul>
  </nav>
</header>

Changes to CSS

Now that we have restructured your HTML, we need to readjust the CSS too.

We want:

  • The logo on the left.
  • The search bar on the right.
  • The navigational links as a list below logo and search bar:
    • On large screen sizes, tightly pack navigational links left of the search bar.

Treating small screen sizes as default and larger sizes extra is called mobile-first design. Layouts usually work for larger sizes too, but not necessarily for smaller ones. Therefore, starting with a layout for the smallest size usually ensures that all screen sizes will work.

header {
  display: grid;
  grid-template-columns: auto auto;
}

.logo-container {justify-self: flex-start} /*Left-align*/
.search-container {justify-self: flex-end} /*Right-align*/

nav ul {grid-column: 1/-1} /*Span all columns*/
nav a { /*Span full-width and center text*/
  display: block;
  text-align: center;
}

@media screen and (min-width: 1050px) {
  header nav {
    display: flex;
    flex-direction: row-reverse;
  }
  nav ul {display: flex}
}

/* Additional styling */
nav {display: contents} /*Ignore nav; required for my CSS Grid example*/

/* Presentational styling; can be ignored */
/* Styles the example like your snippet */
body {
  margin: 0;
  font-family: sans-serif;
}
nav>ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
nav a {
  padding-inline: 16px;
  padding-block: 14px;
  color: inherit;
  text-decoration: none;
}
nav a.active {background-color: #ccc}
.logo-container {margin-inline-start: 4rem}
.search-container {
  margin-block-start: 12px;
  margin-inline-end: 5rem;
}
.search-container input {
  border: 1.5px solid black;
  border-radius: 0.15rem;
}
.search-container button {
  padding: 6px;
  border: none;
  background: none;
  font-size: 1rem;
  cursor: pointer;
}
.search-container button>.fa {padding-inline-start: .5rem}
<header>
  <div class="logo-container">
    <img src="images/textlogo.png" alt="Paradigm Pet Professionals">
  </div>
  <nav>
    <div class="search-container">
      <form>
        <input name="search">
        <button><i class="fa fa-search"></i></button>
      </form>
    </div>
    <ul>
      <li><a href="Small A/index.html">Small A</a>
      <li><a href="Birds/index.html">Birds</a>
      <li><a href="Fish/index.html">Fish</a>
      <li><a href="Dogs/index.html">Dogs</a>
      <li><a href="Cats/index.html">Cats</a>
      <li><a class="active" href="#">Home</a>
    </ul>
  </nav>
</header>

<!--For FA-icon-->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Oskar Grosser0

A quick example using your design. Click 'Full page' to see the desktop layout.

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
img {
  border: 0;
  height: auto;
}

/* structure */

.nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 80px;
}
.logo-container {
  flex: 0 0 40%;
  max-width: 40%;
  order: 1;
  display: flex;
  align-items: center;
  padding-left: 4rem;
}
.nav-container {
  flex: 0 0 100%;
  max-width: 100%;
  order: 3;
}
.search-container {
  display: flex;
  flex: 0 0 60%;
  max-width: 60%;
  order: 2;
  justify-content: flex-end;
  white-space: nowrap;
}
@media (min-width: 800px) {
  .logo-container {
    flex: 0 0 15%;
    max-width: 15%;
    order: 1;
  }
  .nav-container {
    flex: 0 0 60%;
    max-width: 60%;
    order: 2;
    justify-content: flex-end;
    padding: 0 10px;
  }
  .search-container {
    flex: 0 0 25%;
    max-width: 25%;
    order: 3;
  }
}

/* logo */

.logo-container img {
  height: 50px;
}

/* search */

.search-container input[type="text"] {
  width: calc(100% - 50px);
  padding: 3px 10px;
  font-size: 16px;
  border: 1px solid grey;
  border-radius: 3px;
}
.search-container button {
  padding: 6px;
  background: none;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.search-container button .fa-search {
  font-size: 16px;
  margin-left: 6px;
}

/* nav */

.nav-container ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
}
.nav-container ul,
.nav-container li,
.nav-container a  {
  width: 100%;
  margin: 0;
  padding: 0;
}
@media (min-width: 800px) {
  .nav-container li,
  .nav-container a {
    width: auto;
  }
}
.nav-container a {
  display: block;
  padding: 14px 16px;
  text-align: center;
  text-decoration: none;
  color: black;
  font-size: 16px;
}
.nav-container a:hover {
  cursor: pointer;
}
.nav-container a.active,
.nav-container a:hover {
  background-color: #ccc;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="nav-bar" id="nav-bar">
    <div class="logo-container">
        <img src="https://placekitten.com/50/50" alt="Pet">
    </div>
    <div class="nav-container">
        <ul>
            <li><a class="active" href="index.html">Home</a></li>
            <li><a href="Cats/index.html">Cats</a></li>
            <li><a href="Dogs/index.html">Dogs</a></li>
            <li><a href="Fish/index.html">Fish</a></li>
            <li><a href="Birds/index.html">Birds</a></li>
            <li><a href="Small A/index.html">Small A</a></li>
        </ul>
    </div>
    <div class="search-container">
        <form action="">
            <input type="text" name="search" />
            <button type="submit"><i class="fa fa-search"></i></button>
        </form>
    </div>
</div>

bron0
Related