After seeing my last post titled How to add a background image for Header and About section in Modern Portfolio Pro Davinder asked,
Looks cool, can we replace background image with Responsive slider?
In this article I share the code to
- register a 'Home Slider' widget area
- wrap the above widget area's output and Header in a custom div
- style Soliloquy slider and absolutely position Header on homepage relative to the custom div while taking care of mobile responsiveness
While the active theme used in this tutorial is Modern Portfolio Pro, the code should work in other Genesis child themes as well with minor adjustments.
Step 1
Add the following in child theme's functions.php:
Great tutorial as always! Have you experimented with adding video as a background (perhaps with the sample theme)? A nice example of usage is http://getflywheel.com/. I think the challenge would be making sure mobile has some sort of image fallback.
Looks super cool, Many Thanks Sri !
Little clarification, does this work with free (lite) version of soliloquy slider ?
Fantastic tutorial thank you! Do you have to use Soliloquy slider or would the same code work with Genesis Responsive slider ?
Great Tutorial Sridhar,
I noticed Soliloquy V2 is out for members, can you update the tutorial for V2 if you can?
this is a super useful idea! thanks for taking the time to show what’s possible.
i too am curious about whether or not the basic functionality will work with the lite version of soliloquy, and also, what modifications would be required for this idea to work with minimum pro? i’ve tried changing all the obvious stuff to no avail.
any advice is appreciated,
emily
Thanks for the tutorial, is it possible to have this as a full page (width & height) background slider with the page content also floating on top?
Looks great but the only issue is when the resolution of the screen goes beyond a certain point the site breaks. The img is set to 100% width so this will force the content below to break. I am at a resolution of 2560×1440.
Hello, I’m really in love with this slider concept. However I do not use Modern Portfolio Pro theme, I use the Dynamik tools. I have the option to register a Soliloquy widget, before the header (genesis_before_header). That can be done under the Dynamic –> Dynamik Custom –> Widget Areas, I can make a such widget e.g. priority 10, hooked etc. However, how can I place it in a Div or make the condition in “sk_home_opening_div” I’m a little lost here.
Thanks in advance,
Hans
Hi, Thanks for this. Good write up, but I can’t get it to work. My images only go as wide as their original dimensions. So a 1600px image only extends 1600 pixels wide and does not fill up the browser window. Any thoughts.
Forgot to tick email box.
Hi Jeff. Did you find a solution to your problem? I currently have the same size images and would like for them to be 100% as well.
Can you provide the URL of your site?
In the slider settings, set Slider Dimensions to ‘Full Width’. Let me know when done.
done
Now add this in style.css:
.header-slider .soliloquy-container .soliloquy-image {width: 100%;
}
Great! It goes full width now! Thanks. The menu looks better transparent too, I think. I will suggest to her to change the logo colors and keep the transparency. So happy! Thanks a million!
Thanx for this tutuorial. Worx like a charme 🙂
What would i have to change to have it an a page?
I tried to just change ‘is_front_page’ to ‘is_page’ or is_post’ and changed every “home” to “page” … but that didn’t work for me.
What would the code be to be put in a custom hook box for the Dynamik Theme?
This would make it so easy to just use different labels with different sliders for different pages.
Thanx for your help.
Roland
HI All,
I am trying to work a variation of this idea; I’m working with Foodie Pro and Revolution slider but trying to move the slider under a primary and secondary nav menu rather than the whole header.
I tried this code above, with a bit of adjustment, but the menus displayed below the slideshow.
Do I need to use custom menus instead and place them in a widget in the same wrap div as the slideshow? OR what would be the best way to do this?
Thanks!
Allison
Do you have a mockup or screenshot that shows how you want this to appear?
This site is the inspiration for the look of the menu(s) over the slideshow. (obviously not a WP site)
http://www.goducks.com/SportSelect.dbml?DB_OEM_ID=500&SPID=11401&SPSID=94831&KEY=
Except I would want the header positioned above the menus and the slideshow. I fiddled with it to try and make it work, but could not get the menus to display over the slideshow (I used absolute positioning and played with the z-index), though they were in the right spot under the slides.
This is the rough dev site:
http://dev-aec.com/cal/
I did find a little fix that might work that involves inserting an absolutely positioned div, 1px tall after the header element using the :after passed selector. It worked on another site I’m working on, so it may on this one, though I haven’t had a chance to try it.
thanks!
Tutorial coming up.
Here you go: https://sridharkatakam.com/floating-navigation-on-top-of-slider-in-foodie-pro/
[…] the comments section of Full width Soliloquy slider with Header floating on the top in Genesis tutorial, a user […]
Hi Sridhar
Would you be able to implement backstretch.js to this in order to force the images to be fullscreen? If so, could you show us how that might work?
Thanks
James
Hi Sridhar,
Is there any chance of having a version of this for Dynamik. I tried it but like with another full-width type layout, I couldn’t position the menu properly.
Thanks,
John
hello Sridhar
how can replace nav bar menu on bottom logo ( afer logo image ) ?????
I do not understand your question. Can you elaborate?
I want to get this to work for Carrie Dil’s Utility Pro theme and replace the first intro area. Would that work?
Tutorial coming up.
That would be awesome
A slider that was 100% full width and seamless – that would change the UP theme for me
Follow https://sridharkatakam.com/full-width-soliloquy-slider-utility-bar-header-navigation-floating-top-utility-pro/.
[…] the comments section of Full width Soliloquy slider with Header floating on the top in Genesis, a user […]
Hi Sridhar,
Great tutorial !
Would love to see similar tutorial with header and navigation floating on top of genesis responsive slider in Outreach pro, with the genesis responsive slider extending edge to edge (1600 px) as with the Soliloquy slider.
Regards !