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

Html – Keep element relative to another element using "position: absolute"

I’m trying to add a circle with an image inside to a navbar. The circle has to be bigger than the navbar such as this image:
enter image description here

I am using "position: absolute" so the circle remains at that position, problem is that on smaller screens it looks like this:
enter image description here

Covering the navbar items, how can I keep the circle as it is but make it’s position relative to the rest of the navbar items?

I have tried removing the "position: absolute" attribute from the circle but that makes the navbar increase it’s height to match the circle’s height & align vertically the navbar items with the circle, as such:
enter image description here

Making the navbar too thick. If there’s something I could do to maintain the navbar height and items alignment with it while leaving the circle centered horizontally with the rest of the items, that would be perfect.

HTML:

  <nav class="navbar p-4 z-2 justify-content-center">
    <div class="circle me-4">
      <img src="images/logo.png" alt="Logo" class="img-fluid">
    </div>
    <a class="nav-item text-white text-decoration-none" href="#">MENU</a>
    <a class="nav-item text-white text-decoration-none" href="#">LOCATION & HOURS</a>
    <a class="nav-item text-white text-decoration-none" href="#">ABOUT US</a>
    <div id="socials" class="d-flex">
      <div class="sm-circle me-2">
        <a href="#" class="text-decoration-none">
          <img src="images/facebook_logo.png" alt="Facebook Logo" class="img-fluid">
        </a>
      </div>
      <div class="sm-circle me-2">
        <a href="#">
          <img src="images/instagram_logo.png" alt="Instagram Logo" class="img-fluid">
        </a>
      </div>
      <div class="sm-circle">
        <a href="#">
          <img src="images/tripadvisor_logo.png" alt="TripAdvisor Logo" class="img-fluid">
        </a>
      </div>
    </div>
  </nav>

CSS:

nav {
    position: absolute !important; 
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #d58d26;
}

nav a {
    color: white;
}

nav a.nav-item:not(:last-child) {
    margin-right: 55px;
}

.circle {
    width: 155px;
    height: auto;
    background-color: #d58d26;
    border-radius: 50%;
}

.sm-circle {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border-radius: 50%;
}

.sm-circle img {
    width: 27px;
    height: auto;
}
Tags:

2

Answers


  1. 0

    The image may need to be outside the nav container in order for that to work. Have you tried wrapping the image with a , with the enclosed in that tag. Then setting a margin right styling in css to push the image to the right position?

    Login or Signup to reply.
  2. 0

    You can use display: grid, and grid-template-columns and grid-template-rows to solve that problem.

    In the grid, you have three items: the background, the logo, and the navigation.

    • You divide your grid into three rows, and three columns.
    • The logo will extend over all 3 rows, and is placed in the second column.
    • The background will only be in the second row, and cover all three columns.
    • The navigation will also only be in the second rows, and be places in the third column.

    The 1fr units in the row section ensure, that the remaining space the logo uses is distributed equally at the top and bottom, and the auto is just there so that the navigation bar can take as much space as it needs.

    :root {
   --logo-size: 150px;
}

.top-bar {
  display: grid;
  grid-template-columns: [background-start] 50px [logo-start] auto [logo-end navbar-start] 1fr [navbar-end background-end];
  grid-template-rows: [logo-start] 1fr [navbar-start background-start] auto [navbar-end background-end] 1fr  [logo-end];
}

.background {
  grid-area: background;
  background-color: #d58d26;
}

.logo {
  grid-area: logo;
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: var(--logo-size);
  background-color: #d58d26;
}

.navbar {
  padding: 20px;
  grid-area: navbar;
}
    <div class="top-bar">

  <div class="background">
  </div>

  <div class="logo">
  </div>

  <nav class="navbar">
    <a href="#">MENU</a>
    <a href="#">LOCATION & HOURS</a>
    <a href="#">ABOUT US</a>
  </nav>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search