[Support request] generate_after_slideout_navigation problem! (Help)

Home Forums Support [Support request] generate_after_slideout_navigation problem! (Help)

Home Forums Support generate_after_slideout_navigation problem! (Help)

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #2367930
    johnaps

    Hello!

    There are 2 hooks one named generate_inside_slideout_navigation and one named generate_after_slideout_navigation.

    Both of them are adding my content inside the nav#generate-slideout-menu element… the first one adds it inside at the top and the second one inside it at the bottom…
    What i need is AFTER the div.inside-navigation….

    See here both screenshots shown from both hooks used but both are inside
    https://imgur.com/a/sU9lIFP
    https://imgur.com/a/9Rdj1yo

    #2368219
    Fernando
    Customer Support

    Hi Johnaps,

    Try generate_after_slideout_navigation but give it a higher priority. For instance, 9999.

    #2368221
    johnaps

    I have already tried that Fernado, and it didnt work…

    #2368223
    johnaps

    I would be ok with any way to do this cause i am in a hurry about this, any kind of way to make it go AFTER, it would be ok for me!

    #2368332
    Fernando
    Customer Support

    Sorry, just double checked, and there’s no Hook for that exact location.

    Any reason why you want to put it exactly there? Maybe we can assist if it’s design-wise.

    #2368578
    johnaps

    As you can see in the below video i have this (aside#custom_html-65) element as a bottom fixed element in my generate-slideout-menu.

    https://drive.google.com/file/d/16lq8bAqoHmRiM1X0CLt6ZSNPC_KzUaJY/view

    The problem is that if the filters arent expanded and occupy less that 100% height space, my bottom fixed element doesnt stay at the bottom of the screen as i want it too!
    As you see in the video when i move it out of div.inside-navigation.grid-container.grid-parent it behaves perfectly!

    https://sofianos-orthopedika.gr/%CE%BF%CE%BE%CF%85%CE%B3%CE%BF%CE%BD%CE%BF%CE%B8%CE%B5%CF%81%CE%B1%CF%80%CE%B5%CE%AF%CE%B1/
    generate-offside trigger element: span#mfh (visible under 1013px width)

    #2369324
    Fernando
    Customer Support

    We can probably fix that through CSS. I don’t see the button right now. Did you remove it? Can you add it again, and I’ll check what is needed to be done.

    #2369667
    johnaps

    as i said the button to trigger the menu

    is visible under 1013px viewport width

    remember to have the filters inside the generate-offside both closed and expanded…
    I need the aside#custom_html-65 element to be at the bottom of the viewport in both cases.

    I dont think it is possible with only css and browser compatible everywhere (especially on iphones), i have already tried it, not much success…

    #2370487
    Fernando
    Customer Support

    I see. Can you try creating two Hook Elements – One with code:

    <div class="inner-offside-div">

    hooked to generate_inside_slideout_navigation

    Then another with code:

    </div>

    hooked to generate_after_slideout_navigation

    Then set your Button to generate_after_slideout_navigation as well with a priority of 11

    Doing this should group the other elements, leaving the button outside the div. Would this work?

    #2370893
    johnaps

    that also wont work!

    If i do that, again aside#custom_html-65 will be after all other “inside” elements (which will become more nested), but aside#custom_html-65 will still be inside nav#generate-slideout-menu div.inside-navigation.grid-container.grid-parent so the same problems are still there!

    Just in case you wonder i tried it just in case to be sure and thats the outcome…

    add_action('generate_after_slideout_navigation', 'end_custom_inside_navigation_html_element');
    add_action('generate_after_slideout_navigation', 'after_end_custom_inside_navigation_html_element', 11);
    function start_custom_inside_navigation_html_element() {
    	echo '<div class="inner-offside-div">';
    }
    function end_custom_inside_navigation_html_element() {
    	echo '</div>';
    }
    function after_end_custom_inside_navigation_html_element () {
    	if (is_product_category() || is_product_tag() || is_product_brand() || is_search()) {
    		$closebutton = do_shortcode('[facetwp facet="result_count"]');
    		echo '<aside id="custom_html-65" class="widget_text slideout-widget widget_custom_html"><div class="textwidget custom-html-widget"><div class="slider-exit"><a href="#">' . $closebutton . '</a></div></div></aside>';
    	}
    }
    #2370975
    David
    Staff
    Customer Support

    Hi there,

    instead of using position: fixed; in your CSS try using position: sticky;
    So change this CSS:

    
    #custom_html-65 {
        padding: 15px;
        background: #f1f6f6;
        position: fixed;
        bottom: 0;
        width: calc(100% - 30px)
    }

    to:

    
    #custom_html-65 {
        padding: 15px;
        background: #f1f6f6;
        position: sticky;
        bottom: 0;
        width: calc(100% - 30px)
    }
    #2370991
    johnaps

    I have tried it of course…
    If the elements inside nav#generate-slideout-menu div.inside-navigation.grid-container.grid-parent are shorter than 100vh then the #custom_html-65 element is higher than bottom: 0px;

    #2371025
    David
    Staff
    Customer Support

    Theres no way in the Theme to move that widget outside the container. You would have to custom develop your own template to do that.

    If i apply the CSS position: sticky in the developers tools then the issue gets resolved ? Can you change that CSS so i can see whats going on

    #2371054
    johnaps

    Look the behavior here:
    https://drive.google.com/file/d/1VOqiIqJiCcvR4BtEcC5N1h4tNmPGEg3P/view

    You can also test with your browser by putting all the elements with drag n drop inside #hooxie element and then applying sticky to #custom_html-65

    #2371218
    David
    Staff
    Customer Support

    There is no hook to use that would allow you to move that widget outside its container.
    It would need custom development.

    Can we explore the position sticky CSS i provided ?

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.