Archived topic

Full container shadow over main navigation shadow

1 reply · Started by Slaven on March 30, 2019

Viewing posts 1–2 of 2

March 30, 2019 at 5:47 am #854142

Hello, how to z-index full container shadow over main navigation shadow. I would like to remove shadow on main navigation left and right to have full container shadow on left and right side of main navigation.

I'm using this CSS code for main navigation shadow

.main-navigation {
	position: relative;
	z-index: 98;
	padding-top: 10px;
	padding-bottom: 10px;
 -webkit-box-shadow: 0 0 3px rgba(22,32,32,.12), 0 1px 2px rgba(22,32,32,.24);
    box-shadow: 0 0 3px rgba(22,32,32,.12), 0 1px 2px rgba(22,32,32,.24);
}

nav#sticky-navigation {
-webkit-box-shadow: 0 0 6px rgba(22,32,32,.16), 0 3px 6px rgba(22,32,32,.23);
    box-shadow: 0 0 6px rgba(22,32,32,.16), 0 3px 6px rgba(22,32,32,.23);
}

.sticky-enabled .main-navigation.is_stuck {
-webkit-box-shadow: 0 0 6px rgba(22,32,32,.16), 0 3px 6px rgba(22,32,32,.23);
    box-shadow: 0 0 6px rgba(22,32,32,.16), 0 3px 6px rgba(22,32,32,.23);
}

And this for full container shadow

.full-container {
      box-shadow: -2px 0 10px rgba(188,190,202,0.32);
}

March 30, 2019 at 9:36 am #854431

Hi there,

so you want to keep the shadow below the nav and just remove it from the sides?
If so you can add a overflow-x: hidden; property to your .full-container

Sticky will be more tricky as its a fixed element so it effectively be outside of the full container. One fix is to use a negative value for the spread radius value. This will stop it from expanding out the edges.

This archived topic is closed to new replies.

Start building better websites today.