Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Slideout Menu Widget area and Close X

Home Forums Support Slideout Menu Widget area and Close X

  • This topic has 5 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #390298
    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!!!

    #390368
    Tom
    Lead Developer
    Lead Developer

    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 🙂

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

    #390603
    Tom
    Lead Developer
    Lead Developer

    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
    }
    #415717
    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?

    #415841
    Tom
    Lead Developer
    Lead Developer

    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>'
        ) );
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.