[Support request] Slideout Menu Widget area and Close X

[Spencer]

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!!!

[Tom]

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 🙂

[Spencer]

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’ );
}

[Tom]

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
}

[Gabriele]

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?

[Tom]

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>'
    ) );
}

[Author]

Posts