[Support request] generate_after_slideout_navigation problem! (Help)

[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

View post on imgur.com

View post on imgur.com

[Fernando]

Hi Johnaps,

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

[johnaps]

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

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

[Fernando]

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.

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

[Fernando]

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.

[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…

[Fernando]

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?

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

[David]

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

[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;

[David]

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

[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

[David]

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 ?

[Author]

Posts