Question 284803 in Html Question posted in
Some basic documentation can be found here.

Html – How to make the picture above the horizontal line

How to move the icon above more and cover the horizontal line at the same time? I’ve tried to add min-height at the intro.css .intro__logo{ }, but it occured another problem, there was a white block between the navbar and the horizontal line, I have no idea how to solve it.

The design pattern

My work

.header__nav {
  display: flex;
  justify-content: center;
  padding: 10px 10px;
}

.header__menu,
.header__social {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 15px;
}

.header__menu {
  gap: 90px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 16px;
  color: var(--second-primary-color);
}

.header__menu span {
  color: var(--background-color);
}

.header__social {
  gap: 10px;
}

.header__social img {
  width: 20px;
  height: 20px;
}

.intro {
  overflow: hidden;
}

.intro hr {
  border: 1px solid var(--primary-color);
  margin: 0;
  z-index: 1;
}

.intro__logo {
  display: flex;
  justify-content: center;
  min-height: 64px;
}

.intro__logo img {
  position: absolute;
  width: 90px;
  height: 90px;
  padding: 15px;
  border-radius: 100%;
  border: 3px solid var(--primary-color);
  background-color: var(--background-color);
  object-fit: contain;
  z-index: 2;
}

.intro__page img {
  width: 1280px;
  object-fit: contain;
}
<header>
  <nav class="header__nav">
    <ul class="header__menu">
      <li>
        <a href="#about-me">About Me</a>
      </li>
      <li>
        <a href="#last-activity">Last Activity</a>
      </li>
      <li>
        <a href="#policy">Policy</a>
      </li>
      <li>
        <span>Blank Blank
      </li>
      <li>
        <a href="#donate">Donate</a>
      </li>
      <li>
        <a href="#feedback">Feedback</a>
      </li>
    </ul>

    <ul class="header__social">
      <li>
        <img src="public/icon-fb.svg" alt="facebook" />
      </li>
      <li>
        <img src="public/icon-ig.svg" alt="instagram" />
      </li>
      <li>
        <img src="public/icon-youtube.svg" alt="youtube" />
      </li>
      <li>
        <img src="public/icon-line.svg" alt="line" />
      </li>
    </ul>

  </nav>
</header>
<section class="intro">
  <div class="intro__logo">
    <img src="public/logo.svg" alt="logo"/>
  </div>
  <hr>
  <div class="intro__page">
    <img src="public/cat-6960532_1280 2.png" alt="intro__background" />
  </div>

</section>
Tags:

2

Answers


  1. 0

    Make sure you set the z-index so it overlaps the HR element. Then push the top down. Adjust the HR accordingly.

    .intro__logo {
  position: relative; /* or you can try absolute */
  top: -20px; /* adjust this value as needed to move up */
  z-index: 10; /* ensures it's above the horizontal line */
}
    
hr {
  margin-top: 0; 
  margin-bottom: 0; 
}
    Login or Signup to reply.
  2. 0

    Try to put the logo inside the nav menu, give position: relative; to the nav and then to the logo:

    .logoCovering{
    position: absolute;
    top: /* optional, usally 0*/;
    left: /* optional, usally 0*/;
    display: flex;
    align-items: center;
    justify-content: center;
}

    In this way, your logo will be centered, the nav will not recognize the logo and you will get the desired alignment

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search