Ensure an element stays in its position relative to another element by utilizing the CSS property "position: absolute"

I want to incorporate a circle with an image inside into a navbar. The circle should be larger than the navbar, similar to the image shown here: https://i.sstatic.net/kpJgC.png

I have been using "position: absolute" to keep the circle in place, but the issue arises on smaller screens as depicted in this image: https://i.sstatic.net/6G3ri.png

This causes the circle to overlap the navbar items. How can I maintain the circle's position while ensuring it relates to the other navbar items?

I attempted to remove the "position: absolute" attribute from the circle, but this resulted in the navbar height increasing to match the circle's height, aligning the navbar items vertically with the circle like so: https://i.sstatic.net/qnaYl.png

Consequently, the navbar becomes too thick. Is there a solution to retain the navbar height and item alignment while centering the circle horizontally with the other items?

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;
}

Answer №1

To tackle the issue, you can utilize display: grid, along with grid-template-columns and grid-template-rows.

Within the grid layout, there are three main items: the background, the logo, and the navigation bar.

  • The grid is divided into three rows and three columns.
  • The logo spans all 3 rows and is positioned in the second column.
  • The background occupies only the second row and spans all three columns.
  • The navigation bar is also confined to the second row and is placed in the third column.

The 1fr units in the row section ensure that the remaining space used by the logo is evenly distributed at the top and bottom, while the presence of auto allows the navigation bar to expand as needed.

: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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Ajax to update the login form without reloading the page and displaying any errors

I have created a login form that utilizes ajax to handle login errors such as "incorrect password" from my login.php file. Instead of reloading a new page with the error message, it now displays the errors on the same login form, which is working perfectly ...

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

Could someone assist me with a coding issue I am facing? I would like to be able to go to the top of the page when clicking on a link and have the link open in the same tab. I attempted to implement this functionality using the following code, however, I ...

Images with full-width will scroll horizontally

Is there a way to fix the horizontal scroll issue? <!DOCTYPE html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https:// ...

Using Flexbox to ensure two elements do not appear next to each other

When viewing on large screens, I want all elements to be on one row. On smaller screens, I want them to be on three rows. Specifically, I don't want to see the button next to the H1 element on the same row. How can flexbox help solve this problem? Tha ...

Interactive canvas artwork featuring particles

Just came across this interesting demo at . Any ideas on how to draw PNG images on a canvas along with other objects? I know it's not a pressing issue, but I'm curious to learn more. ...

Using ng-class directive with condition in AngularJS

Here is a unique pop-up that allows users to encode item information. https://i.sstatic.net/sn9QZ.png I need to implement a feature where, if both the Foreign Currency and Conversion Rate fields have values, the Amount should be calculated by multiplying ...

Utilize Sass @extend to incorporate imported CSS files in the build process

In my development setup, I have a global CSS file that houses all of the generic CSS styles. My goal is to extend the classes from this global CSS file in any of my SCSS files. However, when I attempt to do so, I encounter an error stating that the .xyz c ...

Displaying a progress bar during image uploads in PHP without using AJAX

I am in the process of uploading a file on my website and it is working well. However, I would like to display a progress bar while the upload is taking place. I have considered using ajax for this purpose, but I am unable to use ajax. Is there a way to ac ...

Updating an HTML element by using the input value in a text field with JavaScript/jQuery

Although it may seem straightforward, I am new to Javascript and struggling to find or create the script I need. I have a list of BIN numbers for credit cards and want to extract the first 6 digits of the card number field to determine the type of card, an ...

Flexbox keeps elements on the same line without breaking

I'm currently delving into flexbox and aiming to create a layout similar to the one shown below: https://i.sstatic.net/epnkU.png Here is the code I have come up with: .container { display: flex; gap: 26px; } .flex50 { flex: 50%; ...

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

My CSS includes the following font definition: html { font-size: 95%; font-family: Arial, Helvetica, sans-serif } I want my application to display well on PC, iOS, and Android tablets. I am aware that different devices have varying resolutions. C ...

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

Adjusted the background scale transformation without impacting the content inside the div

My concern revolves around the transform: scale property. I am trying to achieve a gradual zoom effect on my background when hovered over, without affecting the text content. I have omitted browser prefixes for brevity. Below is the CSS code: #cont-nl { ...

Modify the appearance of the post-content's color and background when hovering

I am struggling to achieve the goal of changing the background of the search box to transparent and making the search icon white on hover. Any help or suggestions would be greatly appreciated! Below is the code where I want to apply the hover CSS effect: ...

How do you feel about sharing HTML files online?

I have a project in .NET 2.0 where I am creating a control that allows users to input HTML into a textarea and then upload it. The issue is that .NET requires me to set ValidateRequest=false on the page for the upload to work, which can potentially creat ...

Whenever I run my HTML through a server, it doesn't seem to connect with my CSS file

I'm currently developing a Django app, and I have encountered an issue where the CSS is not loading when I run different pages through the server. Oddly enough, everything works fine when I open the files directly without using the server. The problem ...

I am experiencing an issue with Bootstrap's Jumbotron where the bottom border is not visible even after setting it. I am quite curious as to why

I'm new to using bootstrap and I've encountered an issue with the Jumbotron class. Specifically, I have set a border for the Jumbotron and it appears on the top, left, and right sides, but for some reason, the bottom border is missing. After goi ...

What order should jquery files be included in?

Today I ran into an issue while trying to add datepicker() to my page. After downloading jqueryui, I added the scripts in the following order: <script type="text/javascript" src="js/jquery.js"></script> <script src="js/superfish.js">< ...

fewer security personnel leads to a higher success rate

I've tried searching for it online, but unfortunately, I couldn't find any helpful results. What I'm attempting to achieve is a mixin that can lighten or darken a color based on a given percentage. If the percentage is less than 0, then I w ...

The mouseover animation doesn't reset to its original position during quick movements, but instead continues to move without interruption

Greetings! Welcome to my live page. Currently, I am facing an issue with the sliding animation on the header. Specifically, the small gray slide-up divs at the bottom of the sliding pictures are not behaving as expected. They are meant to slide up on mous ...