-
-
Save srikat/8941906 to your computer and use it in GitHub Desktop.
Full width Soliloquy slider with Header floating on the top in Genesis. http://sridharkatakam.com/full-width-soliloquy-slider-header-floating-top-genesis/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Register Home Slider widget area | |
| genesis_register_sidebar( array( | |
| 'id' => 'home-slider', | |
| 'name' => __( 'Home Slider', 'mpp' ), | |
| 'description' => __( 'This is the home slider widget area.', 'mpp' ), | |
| ) ); | |
| //* Add custom Slider + Header wrapper's opening div tag | |
| add_action( 'genesis_before_header', 'sk_home_opening_div' ); | |
| function sk_home_opening_div() { | |
| if (! is_front_page() ) | |
| return; | |
| echo '<div class="slider-header-wrapper">'; | |
| genesis_widget_area( 'home-slider', array( | |
| 'before' => '<div id="home-slider">', | |
| 'after' => '</div>', | |
| ) ); | |
| } | |
| //* Add custom Slider + Header wrapper's closing div tag | |
| add_action( 'genesis_after_header', 'sk_home_closing_div' ); | |
| function sk_home_closing_div() { | |
| if (! is_front_page() ) | |
| return; | |
| echo '</div>'; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h4 class="slide-title">This is the first slide's title</h4> | |
| <div class="slide-content">This is first slide's description. Vestibulum lobortis bibendum dui, in accumsan nisi sodales id. Vivamus et sapien ullamcorper, placerat eros scelerisque, varius diam.</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Full width Soliloquy slider with Header floating on the top | |
| -------------------------------------------------------------- */ | |
| .slider-header-wrapper { | |
| position: relative; | |
| } | |
| .home .site-header { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 2; | |
| width: 100%; | |
| background-color: transparent; | |
| } | |
| #home-slider .widget { | |
| margin-bottom: 0; | |
| } | |
| #home-slider .soliloquy-container { | |
| max-width: none !important; | |
| } | |
| #home-slider .soliloquy-container .soliloquy .soliloquy-slides img { | |
| width: 100%; | |
| } | |
| #home-slider .soliloquy-container .soliloquy-caption { | |
| background: rgba(0, 0, 0, 0.5); | |
| } | |
| #home-slider .soliloquy-container .soliloquy-caption h4 { | |
| color: #fff; | |
| } | |
| #home-slider .soliloquy-container .soliloquy-caption .soliloquy-caption-inside { | |
| margin: 0 auto; | |
| max-width: 1140px; | |
| background: transparent; | |
| line-height: 1.625; | |
| margin-bottom: 2.4rem !important; | |
| padding: 6rem 0 3.6rem; | |
| } | |
| .slide-content { | |
| font-size: 2rem; | |
| text-align: left; | |
| } | |
| @media only screen and (max-width: 1140px) { | |
| #home-slider .soliloquy-container .soliloquy-caption .soliloquy-caption-inside { | |
| padding-left: 5%; | |
| padding-right: 5%; | |
| } | |
| } | |
| @media only screen and (max-width: 860px) { | |
| #home-slider .soliloquy-container .soliloquy-caption { | |
| position: relative; | |
| background: #3f3f3f; | |
| } | |
| #home-slider .soliloquy-container .soliloquy-caption .soliloquy-caption-inside { | |
| margin-bottom: 0 !important; | |
| padding-top: 4rem; | |
| padding-bottom: 6rem; | |
| } | |
| #home-slider .soliloquy-container .soliloquy { | |
| height: auto !important; | |
| background: #3f3f3f; | |
| } | |
| } | |
| @media only screen and (max-width: 591px) { | |
| #home-slider .soliloquy-container .soliloquy-direction-nav { | |
| display: none; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment