Archived topic
Slideout Menu Widget area and Close X
5 replies · Started by Spencer on September 22, 2017
Hi Guys,
I've having a bit of trouble with the slideout bar/menu
https://www.media-evolution.com.au/
I have done the following 2 things -
- moved it to the right hand side (which is cool)
- added a widget area to it
(both as per answer contained in the support area)
I have 4 questions -
1. After I added the widget area there is a • in the top left corner, I think from the li, not sure how to get rid of it?
I used this code -
/* Registering Widget to Slideout menu */
add_action( 'widgets_init', 'theme_slug_widgets_init' );
function theme_slug_widgets_init() {
register_sidebar( array(
'name' => __( 'Slide-out Navigation' ),
'id' => 'my-slide-out-nav',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>'
) );
}
/* Adding Widget to Slideout menu */
add_action( 'generate_inside_slideout_navigation','tu_add_slideout_widget_area' );
function tu_add_slideout_widget_area() {
dynamic_sidebar( 'my-slide-out-nav' );
}
2. How do I move the widget area below the menu item?
3. Is it possible to add a scroll bar to the slide out area if the content extends past the bottom of the screen?
4. How do I add the closing X into the top of the menu? at the moment it is covered when the menu slides out.
Many thanks!!!
Hi there,
1. Use this CSS:
.slideout-navigation .widget {
padding: 0;
list-style-type: none;
}
2. Replace:
generate_inside_slideout_navigation
With:
generate_after_slideout_navigation
3. That should actually happen by default.
4. You can add this inside the generate_inside_slideout_navigation hook:
<li class="slider-exit"><a href="#">Close icon in here</a></li>
Then you can style it as needed.
Hope this helps :)
Thanks Tom!
Much appreciated.
One question - where do I add this one -> <li class="slider-exit">Close icon in here
Inside this action?
add_action( 'generate_after_slideout_navigation','tu_add_slideout_widget_area' );
function tu_add_slideout_widget_area() {
dynamic_sidebar( 'my-slide-out-nav' );
}
You could add another widget area above the slide-out menu, or simply do this:
add_action( 'generate_inside_slideout_navigation', 'tu_add_slideout_close' );
function tu_add_slideout_close() {
?>
<li class="slider-exit"><a href="#">Close icon in here</a></li>
<?php
}Hi Tom,
I was trying to create a second widget area above the slide-out menu but it shows an error:
Cannot redeclare theme_slug_widgets_init() (previously declared (433) : eval()'d code:3)
Any idea about it?? It means that I must give another name to the function?
Yes, that means you have that function already added somewhere.
Try naming it something else:
add_action( 'widgets_init', 'tu_slideout_widgets_init' );
function tu_slideout_widgets_init() {
register_sidebar( array(
'name' => __( 'Slide-out Navigation' ),
'id' => 'my-slide-out-nav',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>'
) );
}