• 0
Sign in to follow this  
Followers 0

Bring RevSlider navigation to the front


Question

Posted · Report post

Hi,
 
I am trying to figure out the new DMS before I activate it on my real website, but have run into a small problem.

I am in other words currently running DMS on a local server.
 
Anyhow, I have made some small changes to my local site using custom CSS-coding. One of the things I have done is that I have placed my branding section, navigation and a text box on top of the revslider to give that part of my site a nice transparent effect. Please see this photo for reference: 

Screen-Shot-2013-07-29-at-2.48.08-PM.png

Now, I had to use custom CSS-coding to place the revslider underneath all the other elements in the header section, which worked. However, the slider controls/navigation still seem to be placed behind or underneath the actual slider, making it impossible to actually use the controls since they are invisible.
 
I suspect my custom CSS coding to be the problem:

.revslider-container {
width: 100% !important;
position: relative;
padding: 0;
max-height: 724px !important;
min-height: 724px !important;
overflow: visible;
margin-top: -161px;
z-index: -2;
}

Any idea how I get the slider controls to appear on top of the revslider again, yet the revslider is layered underneath the rest of my header elements?

 

Thanks!

- Christian

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

Hi Christian,

 

As you doubtlessly know, each element has its own CSS code.  If you're using tools like Chrome Inspection or Firebug for Firefox, you should be able to find the right element, and likely will need to set a different z-index for the controls.

 

I hope this helps.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks a lot Rob. I tried setting a different z-index for the controls on the slider, but with no success. I can't seem to place the revslider underneath my textbox, branding and navigation without the slider controls disappearing. 

 

Any idea how I should proceed to get this issue fixed?

 

Thanks!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

When you say "underneath" do you mean as a background?  It is not a background slider. It is a full-width slider.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No, not as a background. The slider is functioning the way I want it - as a fullwidth slider. I can however not get the controls/slider arrows to appear on top of the actual slider images. It seems like they are layered below the Revslider images. For better understanding, please have a look at my website here: www.creativefuturemag.com

 

Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI,

 

z-index only works on positioned elements.

 

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Therefore, if you have't used this, then using z-index is pointless.

Please bear in mind that we do not provide support to user created custom code. I would do as Rob suggested and use Chromes web dev tools.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0