Menu inside full width slider

[conduitcomms 0]

Hi everyone,

 

I am wondering if DMS can make the Menu inside the full width slider and make it like transparent background like the example below?

 

Is there any code I need to add on CSS or I need to use other plugin other than REV slider?

 

Best,

Vienna

 

[Aires 265]

Hi, conduitcomms

 

This type of site can be done with DMS  but it will take some CSS Knowledge working with z-index and media queries... but is totally doable. I did a quick build on a test site as an example its not perfect took me about 10min and the mobile version is ugly as hell.

 

http://mytestdesigns.pw/homepage/

[conduitcomms 0]

Wow! Thank you @Aires†!

 

You are amazing! May I know what slider you are using? I am currently using a gif background and place the menu on top. 
I don't know how to put menu like a layer on REV slider. Can you help?

 

Thank you very much! :)

 

Best,

Vienna

[Aires 265]

You know I can be an  idiot sometimes … I could have at least told you how I did it or where to start. It’s late and I have to get up early so I will try and do that tomorrow or the weekend. 

 

Really tired.

[conduitcomms 0]

Thank you Aries! 
You are my star. I will be patient and meanwhile keep trying ;)

 

Have a good rest!

Vienna

[Aires 265]

Hi, conduitcomms

 

Just to tell you the basic of what I did before I go into this long explanation. I used the rev slider along with the navi section with a applied negative top margin on the revslider to achieve this look. 

 

Note there are so many ways this can be done you dont have to use fixed area you could use the header area but then you are going to have to use z-index along with relative positioning with some additional css

 

I did make some changes to the test from what you originally saw. Instead of using a canvas section with z-index and other css applied I went with navi in the fixed area because the fixed area already has a high z-index so when you add the neg margin to the rev slider it will slider under the fixed area. Also it looks ok on mobile.

 

But for this to look transparent you will need to add this to your css this will make your fixed area transparent

 

#site .pl-fixed-top {

  background-color: transparent;

  box-shadow: none;

}

 

and also add a custom class to your rev slider for example:  navi-margin

 

 

add this to your css area (play with the margin till it looks ok)

.navi-margin {

margin-top : -180px;

}

 

Some things to note once you add the neg margin to the rev slider the edit option for the rev slider will not be visible because the fixed area will be over it so if you want to change a slide you will need to remove the neg margin and add it back afterwards.

 

While I was remaking it I played around with some jquery just to see what it looked like.  http://mytestdesigns.pw/homepage/ Something to work on and perfect maybe.

 

I  am sure you will have questions or maybe I missed something cause it possible...LOL.

 

~Aires

 

 

 

 

[conduitcomms 0]

Thank you Aires! 

Sorry for the late reply. I am just back from Marathon!  will make a try today!

I will let you know if I have any problem! 

 

Cheers,

Vienna

[conduitcomms 0]

Hello Aires

 

I think I got what you mean and I am half-way there I guess. :geek:  

When I scroll down the page, it turns to transparent.

The RevSlider did move upper a bit, but I can't turn the menu transparent when i wasn't scrolling.

I am here to attach my link (http://conduitcomms.com/parallax_experiment/) for your reference,

Could you please kindly tell me what have i missed out in between?

 

Thank you very much! :D

[Aires 265]

Hi, conduitcomms

 

Add this to your css and see if it helps

 

/*neg margin for rev slider*/

#revslideru9cxpkh {

margin-top: -58px;

}

 

/*font color and font size*/

#naviuypthuk.section-navi .pl-nav > li > a {

color: white;

font-size: 18px; 

}

[Aires 265]

I see a 

 

.pl-area-wrap {

1. margin-top: -5%;

}

 

That bit of code is throwing the footer area out of wack... maybe thats something you added?

[quinntinm 4]

Hi Aires, i am following a similar idea to what you have here, but i am using the header section as the navigation area instead of the fixed area.

Everything was going well, but then all of a sudden the z-index does not seem to be working and the header goes below the the template canvas area.

 

This is the code i am using - please note that i have not moved the template canvas all the way up to show how the header is behind the template canvas area.

 

Hoping you can shed some light on this.

 

Here is the link - there is only one page as i have just started the setup.

http://millsphotography.co.za.www402.jnb1.host-h.net/welcome/

/*--- Overlay the header ---*/
#pl_areau84dbf {
z-index:1000;  
}
/*--- logo and nav ---*/
.section-navi .navi-container {
height: 57px;
padding: 7px;
}
/*--- moving the template layer up under the header with the nav ---*/
#pl_areau764ff {
  margin-top:-72px;
}

[Aires 265]

Hi quinntinm

 

 http://mytestdesigns.pw/

 

/*header*/

#pl_areauf3e38 {

  z-index: 100;

  position: relative;

}

 

/*template*/

#pl_areaubdb50 {

  position: relative;

  top: -150px;

  margin-bottom: -150px;  //added this to take up the gap from moving it up

 }

 

There has to be another way to adjust the gap other than using  neg margin I just havent figured it out yet..LOL 

 

Just my 2 cents I think this would be ideal for a single page/one pager site if you could move the whole template area up  across the site then that might be good for multipage  but thats just my O!!

[quinntinm 4]

Aires = rockstar!

Thank you for solving this for me, really, really appreciate it!

[quinntinm 4]

One more question - is there a simpler way to target the header other than by using the ID #pl_areauf3e38?

[Aires 265]

You could apply a custom class to the header. That would work also.
Sent from my Windows Phone using Tapatalk