Challenges with CSS when elements are positioned on top of each other

My navigation code looks like this:

#banner {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.element {
    margin-right: 2em;
    color: #534728;
    width: 100px;
}

#logo {
    height: 125px;
    width: auto;
}

<div id="banner" class="banner-header">

    <a class="element" href="/">Home</a>
    <a class="element" href="/shop/">Shop</a>
    <a class="element" href="/our-story/">Our Story</a>
    <img id="logo" class="element" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/new-logo.png" />
    <a class="element" href="/products/">Products</a>
    <a class="element" href="/contact-us/">Contact Us</a>
    <a class="element" href="/foundation/">Foundation</a>

</div>

https://jsfiddle.net/v0uuak2u/2/

I am currently trying to add another element below the navigation, overlapping the logo as shown in the attached image:

https://i.sstatic.net/leLKu.png

I have attempted adjusting the z-index of elements but it seems challenging due to parent-child z-index relationships. Here is what I have tried:

https://jsfiddle.net/6w8nbjvq/10/

If you have any suggestions on how to resolve this issue, please let me know.

htmlcss

Answer №1

Is this layout what you're looking for?

HTML

<div id="banner" class="banner-header">
    <a class="element" href="/">Home</a>
    <a class="element" href="/shop/">Shop</a>
    <a class="element" href="/our-story/">Our Story</a>
    <img id="logo" class="element" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/new-logo.png" />
    <a class="element" href="/products/">Products</a>
    <a class="element" href="/contact-us/">Contact Us</a>
    <a class="element" href="/foundation/">Foundation</a>
</div>
<div class="bot">
<p>XXXX XXXXX</p>
</div>

CSS

#banner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 99999;
}

.element {
    margin-right: 2em;
    color: #534728;
    width: 100px;
}

.element:last-child {
  margin-right: 0px
}

#logo {
    background-color: black;
    border-radius: 50%;
    height: 125px;
    width: auto;
}
.bot {
    background-color: black;
    color: gold;
    position: relative;
    top: -50px;
    height: 100px;
}
.bot p {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

Answer №2

Give this a try: adjust the spacing at the top and bottom based on the gradient percentage.

#banner {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    background-image: -webkit-linear-gradient(bottom, #000000 65%, #0000 35%);
    background-image: linear-gradient(bottom, #000000 65%, #0000 35%);
}

.element {
    margin-right: 2em;
    color: #534728;
    width: 100px;
}

.element:last-child {
  margin-right: 0px
}

#logo {
    height: 125px;
    width: auto;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background: #000;
}
<div id="banner" class="banner-header">

<a class="element" href="/">Home</a>
<a class="element" href="/shop/">Shop</a>
<a class="element" href="/our-story/">Our Story</a>
<img id="logo" class="element" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/new-logo.png" />
<a class="element" href="/products/">Products</a>
<a class="element" href="/contact-us/">Contact Us</a>
<a class="element" href="/foundation/">Foundation</a>

</div>

Answer №3

This solution offers a way to maintain aspect ratio and scalability without using flexbox:

  • Designed to be compatible with older browsers.
  • The logo is not clipped in this solution.

Visit the link for a detailed explanation on how aspect ratio is maintained and the design remains fully scalable.

.header {position:relative; z-index:1; padding-top:15%;}

.header .navbar {position:absolute; top:0; bottom:60%; left:0; right:0; padding-top:3%; background:#ebeae6; line-height:0; font-family:"Tw Cen MT",sans-serif;}
.header .navbar .left {float:left; width:45%; text-align:right;}
.header .navbar .right {float:right; width:45%; text-align:left;}
.header .navbar a {text-decoration:none; color:#534728;}
.header .navbar a:hover, .header .navbar a:active {text-decoration:underline;}
.header .navbar .left a {margin-right:10%; font-size:1.7vw;}
.header .navbar .right a {margin-left:10%; font-size:1.7vw;}

.header .logobar {position:absolute; top:40%; bottom:0; left:0; right:0; background:#000;}
.header .logobar .logo {position:absolute; left:0; right:0; margin:0 auto;}
.header .logobar .logo.img {top:-60%; width:10%; padding-top:10%;}
.header .logobar .logo.txt {top:50%; height:50%; font-size:2.0vw; color:#bfaa5d;}
.header .logobar .logo > div {position:absolute; top:0; bottom:0; left:0; right:0; text-align:center;}
.header .logobar .logo.img > div {padding:5px 7px 5px 5px; border-radius:50%; background:#000;}
.header .logobar .logo > div img {width:100%; height:auto;}
<div class="header">
  <div class="navbar">
    <div class="left">
      <a href="/">Home</a>
      <a href="/shop/">Shop</a>
      <a href="/our-story/">Our Story</a>
    </div>
    <div class="right">
      <a href="/products/">Products</a>
      <a href="/contact-us/">Contact Us</a>
      <a href="/foundation/">Foundation</a>
    </div>
  </div>
  <div class="logobar">
    <div class="logo img"><div><img src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/new-logo.png" /></div></div>
    <div class="logo txt"><div>JAMAICA CANNABIS</div></div>
  </div>
</div>
codepen: View on CodePen
jsfiddle: View on JSFiddle

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

Incorporate fresh Google sites into different web pages using iFrame integration

Wishing you a fantastic day! I am currently working on embedding a brand new Google site into another webpage. I attempted to use an iframe for this purpose, but unfortunately it did not work as expected. Here is the code snippet: <iframe width="1280 ...

javascripthtmliframeembedded-resource

Ensure the footer remains fixed while scrolling

For the past day, I've been tackling a challenge with my online shop project. On the specific item's page, I want to include a fixed [add to cart] button as a footer initially, which then becomes sticky when scrolling to a certain point. You can ...

javascripthtmljquerycss

Creating a persistent sticky element that remains at the forefront in Electron or JavaScript development

Currently, I have a remote desktop control application built on Electron that functions as a desktop app on Mac and Windows, and as a web app on Chrome and Firefox. My next goal is to create a sticky component that remains on top at all times, regardless ...

javascripthtmlelectron

Is it possible to use jQuery to load the content of the page?

Using jQuery to dynamically load html forms using the append function. The code below demonstrates how to load page content based on different values in a while loop. I have encountered an issue when trying to display content with different values. It wor ...

phpjqueryhtmlajax

Enhancing the appearance of each letter within a word

I am currently working on styling the word "Siteripe". Each letter should have a different color, just like it is shown on this website. I have successfully styled only the first letter using the following CSS code: #namer:first-letter { color:#09C; f ...

csscss-selectors

Jquery's intermittent firing of .ajax within if statement

So, I've inherited a rather messy codebase that I need to modernize. The task involves upgrading from an old version of prototype to the latest jQuery 3.2.1 within a dated website built on php and smarty templates (not exactly my favorite). When a lo ...

javascriptphpjqueryhtmlajax

Comparing Zend_Navigation to Zend Layout

Greetings! I am a beginner to Zend Framework, starting with version 1.12. Currently, I am in the process of creating my first website and feeling a bit lost on which path to follow. I have integrated an HTML template as my Zend Layout, where the navigatio ...

phphtmlzend-frameworkzend-navigationzend-layout

CSS and HTML design displaying JSON object inputs in a vertical order

Any assistance is deeply appreciated. I am currently developing a web interface for a grading system focused on SAT prep. The server is returning tests in the form of JSON objects, containing details such as test names, sections, and questions per section. ...

htmlcssjsoninput

How to resolve HTML errors when uploading images in Dropzone and remove them from display

Removing HTML Error Display After Uploading Image in Dropzone I am looking for a solution to remove the HTML data displayed in the popup after uploading an image or other document using Dropzone. https://i.sstatic.net/kl0BM.png <form action="/ ...

htmlnode.jsexpressdropzone.jsdropzone

What is the best way to align the checkbox and label in a React form?

I've been struggling to align the labels next to the checkboxes on this form. I'm currently utilizing React with React-Hook-Form for validation and state management (you can find the code on GitHub: https://github.com/cipdv/ciprmt-mern/blob/main/ ...

cssreactjsformsreact-hook-form

I am facing an issue where the jQuery method does not work when an AJAX function is called within another AJAX function

There seems to be an error showing up in the console. XMLHttpRequest has finished loading: POST "http://localhost/redono/Redono-ChurchAdmin/code/churchprofile/edit_password". I am currently working on implementing a change password method. $.ajax({ ...

javascriptphpjqueryajaxhtml

Zeroclipboard will fail to copy the text

I seem to be encountering an issue with the Zeroclipboard system. I suspect there might be an error in my code. Even though it indicates that the content has been copied, it actually hasn't been. The code I am currently using is as follows: <scri ...

javascriptjqueryhtml

When links are hovered over, the cursor hand does not vanish even when using the style code "cursor: none;"

Currently, I am attempting to customize my cursor so that it only changes when hovering over links. Instead of setting cursor: none for the entire body, I am working on removing the default hand cursor using JavaScript. Despite the inspector showing that ...

javascriptcsscursordocument-body

Is it possible for Bootstrap to arrange the 1st and 3rd columns next to the 2nd column

I am working on a design that needs to be responsive, with a simple layout on mobile: [A] [B] [C] However, on desktop, I want [B] to be larger and positioned to the right side, while A and C stack on the left. [ A ][ B ] [ C ][ B ] I am wondering if Bo ...

csstwitter-bootstrapbootstrap-4

The method to utilize JavaScript for capturing an HTML document along with its values

I am facing a challenge with a dynamic page that contains several input fields, select menus, and checkboxes. My goal is to save the entire page with all its content into a variable, including text entered and menu selections made. While document.getEleme ...

javascripthtml

Floating label hides the textbox text with a unique style

I'm trying to create a floating label effect for textboxes in my form that moves up on hover and focus. However, I'm running into an issue where the text gets hidden when the label moves up. Below is the HTML and CSS code I've been working ...

htmlcss

Is it possible to slide-toggle and alter the background color of a div when clicked?

Imagine having several div's on a webpage all with the ID of "Toggle". Each div contains two other smaller divs. "Headline" which is always visible. "Comment" which appears/disappears when the headline is clicked (initially hidden). How could I ac ...

jqueryhtmlcssslidetoggle

Properly arrange the positioning of floating HTML elements

I am currently using the float property to structure the layout. <style> div { float: left; } .pro { width : 100px; color : blue; } </style> <span> <div class="pro">Long property name : </div> <div>value&l ...

htmlcsslayoutcss-float

The svg line is drawn with a width that is half of the specified width

I am looking to create a horizontal line that is 10px wide. I tried using the code below <svg width="500" > <line x1="100" x2="460" y1="0" y2="0" stroke="red" stroke-width="10px&qu ...

htmlcsssvgline

Reducing the height of Bootstrap4 rows will enhance the layout

Is there a way to make my table rows thinner without changing the height? I want each row to have minimal space at the top and bottom, maybe only 1-2px, what's the best approach? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boot ...

htmlcssbootstrap-4