generate_after_slideout_navigation problem! (Help)

Hi Johnaps,

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

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

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!

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.

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)

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.

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

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?

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

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

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;

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

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

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 ?