[onemanparsonsParticipant]

Hi there,

I want to do a couple of things with the styling of .x-navbar-wrap:
– Add a drop shadow (at the moment it is being blocked by another element, but I’m not sure how to fix it)
– Fix the element to the top of the page so that it stays in place when the user scrolls
– Alternatively, I want to show a different navbar when a user scrolls down. At the moment, the navbar’s width is set to 88% – I want to show a full width navbar with different styling.

Here is the site: http://mikateko.storiesandscience.co.za/

[FriechModerator]

Hi There,

Thank you for writing in! #1 First, please navigate to Custom > Global CSS and look for this block.

.x-navbar-wrap {
  height: 100px !important;
  background-image: url(https://mikateko.storiesandscience.co.za/wp-content/uploads/2017/03/Mikateko-Logo-smallest.png);
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  box-shadow: 0 0.25em 0.45em 0 rgba(0,0,0,0.135);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}

Remove the height: 100px !important; from that.

Set the Navbar Top Height from Customizer > Header instead, a height that just enough for the navbar to accommodate the logo and menu. With that the shadow should be visible now.

#2 & #3 Please clarify what element you’re referring to.

Cheers!

[Author]

Posts