Jump to content

Archived

This topic is now archived and is closed to further replies.

conduitcomms

Menu inside full width slider

Recommended Posts

conduitcomms

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?

Screen-Shot-2015-01-22-at-11.38.36-AM.pn

 

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

 

Best,

Vienna

 

Share this post


Link to post
Share on other sites
Aires

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/


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
conduitcomms

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

Share this post


Link to post
Share on other sites
Aires

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.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
conduitcomms

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

 

Have a good rest!

Vienna

Share this post


Link to post
Share on other sites
Aires

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
 
 
 

 


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
conduitcomms

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

Share this post


Link to post
Share on other sites
conduitcomms

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

Share this post


Link to post
Share on other sites
Aires

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

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
Aires

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?

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
quinntinm

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

Share this post


Link to post
Share on other sites
Aires

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!!

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
quinntinm

Aires = rockstar!

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

Share this post


Link to post
Share on other sites
quinntinm

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

Share this post


Link to post
Share on other sites
Aires
You could apply a custom class to the header. That would work also.
Sent from my Windows Phone using Tapatalk

ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites

  • Similar Content

    • jeomiland
      By jeomiland+
      Greetings
      I just migrated an old DMS2 site to PL5 at cassClayton.com. If you look at the site on Safari browser, you will see the top nav bar (NavPro) is white, but gets revealed as you start to scroll the page. NavPro is used in the Header section, then a Text section in which I have Shortcode for the Smart Slider3 plugin. Would have preferred to use a PL-compatible slider but found it difficult to get Flick and Impress slider to simply fill full screen, just height of images (they were filling whole screen, hence large black area filling in the rest).
      So seems on Safari that the load order of the plugin may be causing the Nav bar to be overwritten? or something. 
      Hoping someone can help?
      thanks...  (works fine on Chrome, Firefox, even Tor, just not Safari)
    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      Todd
       
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • stijnxo
      By stijnxo+
      The Filtering of categories in the Masonic Gallery refreshes back to ALL categories when the DMS Revslider loads a new image?
      Anybody any idea? See Artists Category refreshes back to ALL when the DMS Revslider with images on the top loads a news image on http://www.18hrsfestival.nl/
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

×