-
Posts
-
Hi,
I use header layout: logo left, menu below. Header size slim.I wonder if is possible to move slider (eg. layerslider) to header between logo and main menu. So starting from top it should look like: logo -> slider -> menu.
TIA
Regards,
DawidHi!
That’s possible but you’d need to disable the sticky header first, at least on the homepage:
.home #header { position: static !important; } .home #main { padding-top: 0 !important; }Once you done that add this to child theme functions.php:
function add_custom_script(){ if(is_home()){ ?> <script> (function($){ $(window).load(function() { $('#header_main').after($('#full_slider_1')); }); })(jQuery); </script> <?php } } add_action('wp_footer', 'add_custom_script');Cheers!
JosueHi,
thank you very much – it works form me after removing “if” statement. Also dropdown menu stopped working (no dropdowns) but it is no issue for me because I planned to remove dropdowns.
But I need more complex solution.
Let’s say I’ve got LayerSlider with shortcode
[layerslider id="7"]and I want to “inject” this slider in every page between logo and menu.
Is it possible?Regards,
DawidHey!
Try adding this at the very end of your theme / child theme functions.php file:
function custom_func() { echo do_shortcode('[layerslider id="7"]'); } add_action('ava_after_main_menu', 'custom_func');Cheers!
JosueHi,
this solution doesn’t work for me.
This function print shortcode (not the slider!) after main menu – I need to put slider between logo and main menu.Regards,
DawidTry with this code instead:
function custom_func() { echo do_shortcode('[av_layerslider id="7"]'); } add_action('ava_after_main_menu', 'custom_func');Cheers!
JosueThis code put empty space – as you can see on test site. Also the empty space is still after the menu – not betwee logo and menu.
Regards,
DawidIn that case you’d need to purchase LayerSlider as a standalone plugin so it allows you to use its shortcodes anywhere, either that or use an Enfold built-in slider (Easy Slider, Fullwidth Slider, etc).
The procedure would be the same:
function custom_func() { echo do_shortcode('[PUT SLIDER SHORTCODE HERE]'); } add_action('ava_after_main_menu', 'custom_func');Best regards,
JosueHello,
I have implemented your code — function custom_func( ) {… — in the child functions document and it does insert the slider in the header, but it does not place the menu below the slider. In all browsers the menu is currently overlapping the top of the slider as seen here.When I add a margin or adjust the top placement it loses the header’s responsive functions and floats at random in the layout. Is there a way to rectify this?
Also, I was wondering if there was a way to swap the slider with other sliders for different pages using condition (else if) statements with the shortcodes?
Thanks
CordellI have found a solution for the followup question about else if statements. Still having the menu problem though. Thanks.
Cordell
Hey Cordell!
Try adding this code to the Quick CSS:
nav.main_menu { background: white; }Cheers!
JosueThat just filled the background of the menu white, it didn’t place the menu below the slider. Any other suggestions?
Thanks.
CordellHi Cordell,
Try adding this at the very end of your theme / child theme functions.php file:
function add_custom_script(){ ?> <script> (function($){ $(window).load(function() { $('#header_main .rev_slider_wrapper').after($('#header_main .main_menu')); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');Regards,
Josue
- The topic ‘Move slider to header’ is closed to new replies.