Jump to content

Archived

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

tomtwigg

Placing a vertical menu over a RevSlider

Recommended Posts

tomtwigg    1
tomtwigg

I'm using v2.1.1, I am looking for advice about how to place a vertically oriented menu over the top of a RevSlider. I could use Canvas and TextBox to place a coded menu into position, but my concern is that it would not scale with the slider (or maybe I would just need to create many screen size determined CSS rules to accommodate size), but I would prefer to use a WP piece that would be configurable. Anyway, maybe there is a more elegant solution? 

 

Thanks,

Tom

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Tom,

 

In order to add something custom like a vertical menu will require you to use the Slider Extra Options panel and use HTML. However, I am not sure if this will work or not, if you want to continue and give it a try, you will need to use the guide from here - http://www.orbis-ingenieria.com/code/documentation/documentation.html

 

You can see my example code here which demonstrates how to add a video to the RevSlider section before the video options were implemented. The priniciple is the same for adding HTML such as a text or a list, so you can use this as a guide.

 

http://forum.pagelines.com/topic/28168-revslider-how-to-add-video-and-have-it-resize-properly/page-2#entry171007


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
tomtwigg    1
tomtwigg

Thanks for your advice. I went ahead yesterday and hammered something into place just using a Canvas section below the slider with a TextBox that I manually created a menu for and then used CSS to place it where it needed to be — you can see it here: http://www.heronswoodgarden.org

 

I was hoping I might find an easy WP menu I could place so updating it would be easier for somebody who was uncomfortable with coding, but I think this will be suitable. I hid it on small screens in favor of the default sliding menu.

 

-Tom

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Looks awesome, nicely done. Also, you could try using this plugin to display a WordPress menu via a shortcode. 

 

https://wordpress.org/plugins/shortcode-menu/

 

Please bear in mind that I haven't tested this plugin personally.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad+    80
jmad

Nice.  So you put the menu code in a text box, in a canvas section below the slider?

Share this post


Link to post
Share on other sites
tomtwigg    1
tomtwigg

Nice.  So you put the menu code in a text box, in a canvas section below the slider?

 

Yes, that is exactly what I did, place the "menu" as html in a Text Box within a Canvas section, and use the LESS css customize area to place the new piece up and over the slider (using negative margin-top and z-index: 200;). 

 

By making this part of a custom template the new vertical navigation is automatically added to new pages—with the tools available it really seems like a very flexible system.

 

-Tom

Share this post


Link to post
Share on other sites
jmad+    80
jmad

tomtwigg

 

I'm trying to do something similar with a horizontal menu over RevSlider.  I have it in place but can't sort out the Z-index.  Did you go through and assign a Z-index to every section on the page?  I looked at your site and the z-index for the vertical menu seems to be 10 and I couldn't see how the other sections were assigned z-index.

 

Share this post


Link to post
Share on other sites

  • Similar Content

    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • Jarek
      By Jarek+
      How to make the Impulse menu sticky?
      Here is a site that seems like it is doing just that: http://www.manhattanperiodontist.com/
      Here is the site I am working on: http://boeriu.digitalvector.com/ 
      I have no problem showing the menu at the bottom, but when scrolling up it does not stick.  I tried to add Nav Pro menu but when I do that, it just shows on top and no matter what I try is not working as I want it to.
      Any suggestions?
    • Dave
      By Dave+
      1) Toggle menu on mobile devices does not work properly, combination Chrome 56.0.2924.87 with Android 6.0.1

      2) Mobile / Default Menu > Set the primary/default navigation for your site. This will be used in the pop out mobile menu and as the default in navigation sections. Does not work.
    • David
      By David+
      We are building a long-page scrolling site with Pagelines 5. Our menu is made with # links that go to a container's unique ID, e.g. container_ux7al6g
      This works, but it doesn't look great in the menu. Is it possible to assign a 'nice' # link, e.g. /#solutions ? 
      We used to do this in the DMS2 platform through a workaround, but that doesn't seem to be possible now. 
      Any suggestions? 
    • Perry
      By Perry+
      Hello there,
      We are still using DMS 2 and were wondering if it was at all compatible with slider revolution. (https://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380). Our issue is that the default revslider for DMS clips the top and sides of videos when made responsive. As the video is made smaller or larger the bottom of it tends to be cut off, or the sides are. We noticed slider revolution was 100% responsive, but have had numerous issues even getting it to display in DMS 2. We have tried using the shortcode, and various php scripts to no avail. Our last attempt was to try and load it with header scripts, but at this point we seem to be further away than ever. 
      This leads me to a few questions:
      1. Is Slider Revolution even compatible with DMS2?
      2. Is there a way we can get 100% responsive video in DMS 2 with zero clipping? (tonyrobbins.com is another good example of the effect we are trying to achieve.)
      3. If Slider Revolution is compatible, how do we go about adding it in?
       
      Thank you for any help.
       
×