CODEWITHSUNDEEP
htmlcssnavbarvertical-alignment
divinelemon
divinelemon

Reputation: 2097

Vertical align items in navbar

I have a navbar, and would like all items in it to be vertically aligned. I first tried using flexbox, which lead to having too much space in between the elements, which I fixed by using float: right instead of flexbox.

My goal is to have a navbar that looks something like this: (made in Photoshop)

photoshopped navbar

But with a different layout.

Here's what I have so far:

html, body {
  margin: 0;
}

.topnav {
    overflow: hidden;
    background-color: #252525;
    color: rgb(236, 236, 236);
}

.topnav a {
    float: left;
    display: block;
    color: rgb(236, 236, 236);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
  background-color: rgb(243, 33, 33);
  color: white;
}

.search {
    float: right;
    margin-right: 10px;
    height: 6vh;
    padding-left: 12px;
    border-radius: 0;
    width: 20vw;
}

input[type="text"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0px none transparent;
    border-radius: 10px;
    line-height: 20px;
    background: #181818;
    color: rgb(255, 255, 255);
}

input[type="text"].dark {
    background: rgb(27, 27, 27);
    color: #fff;
}

input[type="text"].light {
    background: #fff;
    color: #222;
}

input[type="text"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1.4em;
    width: 1.4em;
    border-radius: 50em;
    background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 70% 70%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    margin-right: min(5%, 20px);
}

input[type="text"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
}

input[type="text"].dark::-webkit-search-cancel-button {
    filter: invert(1);
}

::placeholder {
    color: rgb(194, 194, 194);
    opacity: 1;
}

:-ms-input-placeholder {
    color: rgb(194, 194, 194);
}

::-ms-input-placeholder {
    color: rgb(194, 194, 194);
}

.create {
    color: white;
    float: right !important;
    cursor: pointer;
    border:0;
    background-color: #343434;
    border: 1px solid #f6f6f6;
    padding: 5px;
    border-radius: 10px;
    font-size: 250%;
    margin-right: .5vw;
    height: 3vh;
    color: #1f282c;
}

.usericon {
    font-size: 5vh;
    font-weight: 100;
    margin-right: 3vw;
    cursor: pointer;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Homepage</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css"/>
    </head>
    <body>
        <div class="topnav">
            <a class="active" href="#">Home</a>
            <a href="#profile" style="float:right"><i class='fas fa-user-circle usericon' id="profile"></i></a>
            <input type="text" placeholder="Search.." class="search dark">
            <a href="#create" style="float:right"><i class='fas fa-plus create' id="create"></i></a>
        </div>
    </body>
</html>

This is the result:

my navbar

The only difference is that I use a custom SVG instead of the font awesome icon, which is why it looks weird.

Is it possible to vertically align all items in the navbar? Currently, it looks like the profile image and the plus icon are vertically aligned, but the search bar and home text is not.

Is this possible? Thanks.

Upvotes: 0

Views: 1655

Answers (2)

bitski
bitski

Reputation: 1258

General .topnav layout as asked for by:

  1. positioning HTML nav items in logical order
  2. replacing float with flexbox
  3. having all 3 right side nav items share the same flex item div
  4. making flex container items align vertically and spread out horizontally with the help of flex container properties align-itemsand justify-content:

html, body {
  margin: 0;
}

.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    background-color: #252525;
    color: rgb(236, 236, 236);
}

.topnav a {
    color: rgb(236, 236, 236);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
  background-color: rgb(243, 33, 33);
  color: white;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Homepage</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css"/>
    </head>
    <body>
      <div class="topnav">
        <a class="active" href="#">Home</a>
        <div>
          <a href="#create"><i class='fas fa-plus create' id="create"></i></a>
          <input type="text" placeholder="Search.." class="search dark">                
          <a href="#profile"><i class='fas fa-user-circle usericon' id="profile"></i></a>
        </div>
      </div>
    </body>
</html>

Upvotes: 3

ksav
ksav

Reputation: 20840

If you simplify the layout, you can achieve this with just one flexbox container (.topnav__right) inside another (.topnav).

html,
body {
  margin: 0;
}

.topnav {
  border: 1px solid #252525;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.topnav a {
  display: block;
  color: rgb(236, 236, 236);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  color: white;
}

.home {
  background-color: red;
}

.create {
  background-color: blue;
}

.profile {
  background-color: green;
}


.topnav__right {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.search {
  height: 6vh;
  width: 20vw;
  margin: 0 12px;
}
<div class="topnav">
  <a class="home" href="#">Home</a>
  <div class="topnav__right">
    <a href="#create" class="create">Create</a>
    <input type="text" placeholder="Search.." class="search dark">
    <a href="#profile" class="profile">Profile</a>
  </div>
</div>

Upvotes: 0

Related Questions