CODEWITHSUNDEEP
htmlcss
user979331
user979331

Reputation: 11941

CSS problems with elements over other element

I have a navigation like so:

#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/

What I am trying to do now is add an element that goes below the navigation, but over top the logo bottom like in the image attached

enter image description here

What I have tried is adding an element and playing around with the z-index like this, but its not possible to have a child z-index when the parent has a z-index like so:

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

Anyone got any ideas on how to fix this issue I am having?

Upvotes: 1

Views: 366

Answers (3)

myfunkyside
myfunkyside

Reputation: 3950

A solution without flexbox, and fully scalable:

  • Better compatible with older browsers.
  • This solution doesn't clip the logo.

Read this to understand how I maintain aspect ratio and make it 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: https://codepen.io/anon/pen/XEpQGw?editors=1100
jsfiddle: https://jsfiddle.net/z0cLwkj0/10/

Upvotes: 1

Saravana
Saravana

Reputation: 3506

Try this. adjust the top and bottom black space based on 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>

Upvotes: 1

ecg8
ecg8

Reputation: 1392

How is this for what you want?

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

Upvotes: 1

Related Questions