CODEWITHSUNDEEP
htmlcsslayoutnavigationbar
pomoworko.com
pomoworko.com

Reputation: 1018

How to position icon and navigation bar correctly in HTML/CSS?

I'm trying to replicate the website design from a YouTube tutorial. Here's the target layout:

target website

...and here's how mine looks:

current website

The main issue is the icon and navigation bar positioning. It seems like there's missing space between the browser bar and my elements. Can anyone help me achieve the correct layout?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
}

.topbar {
  position: fixed;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  width: 100%;
  height: 60px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 10fr 0.4fr 1fr;
  align-items: center;
  z-index: 1;
}

.logo h2 {
  color: #df7f27;
}

.search {
  position: relative;
  width: 60%;
  justify-self: center;
}

.search input {
  width: 100%;
  height: 40px;
  padding: 0 40px;
  font-size: 16px;
  outline: none;
  border: none;
  border-radius: 10px;
  background: #f5f5f5;
}

.search i {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
}

.user {
  position: relative;
  width: 50px;
  height: 50px;
}

.user img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<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">
  <link rel="stylesheet" href="styles.css">
  <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
  <title>pomodone.app</title>
</head>

<body>
  <div class="container">
    <div class="topbar">
      <div class="logo">
        <h2>Pomodone</h2>
      </div>
      <div class="search">
        <input type="text" id="search" placeholder="search here">
        <label for="search"><i class="fas fa-search"></i></label>
      </div>
      <i class="fas fa-bell"></i>
      <div class="user">
        <img src="img/user.jpg" alt="">
      </div>
    </div>
    <div class="sidebar"></div>
    <div class="main"></div>
  </div>
</body>

Upvotes: 1

Views: 131

Answers (1)

WebKing
WebKing

Reputation: 301

@Iomipac, you need to set position to the label. Please add this style. Hope it is helpful~.

.search >label {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'poppins', sans-serif;
}

.topbar {
  position: fixed;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  width: 100%;
  height: 60px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 2fr 10fr 0.4fr 1fr;
  align-items: center;
  z-index: 1;
}

.logo h2 {
  color: #df7f27;
}

.search {
  position: relative;
  width: 60%;
  justify-self: center;
}

.search input {
  width: 100%;
  height: 40px;
  padding: 0 40px;
  font-size: 16px;
  outline: none;
  border: none;
  border-radius: 10px;
  background: #f5f5f5;
}

.search>label {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}

.search i {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
}

.user {
  position: relative;
  width: 50px;
  height: 50px;
}

.user img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<div class="container">
  <div class="topbar">
    <div class="logo">
      <h2>Pomodone</h2>
    </div>
    <div class="search">
      <input type="text" id="search" placeholder="search here">
      <label for="search">icon<i class="fas fa-search"></i></label>
    </div>
    <i class="fas fa-bell"></i>
    <div class="user">
      <img src="img/user.jpg" alt="">
    </div>
  </div>
  <div class="sidebar"></div>
  <div class="main"></div>
</div>

Upvotes: 1

Related Questions