Add close-link (X) on a header?

[coedam]

Hi support.

I don’t know if this is doable, but i’ve made a header in the bottom of the screen on mobile with a CTA to another page on my website, as you can see here (the blue header in the bottom of the screen with the text “Vil du have en gratis kostplan? Tryk her”):

I would like to add an option to close this header with a (X) of some kind - but is that even possible? Maybe only with some java script? Like on this page (not pro theme, just for the example):

Any ideas on how to accomplish this?

Thanks a lot!

Best,
Christian

[coedam]

Made a button now, that could link to the closing of the header:

[coedam]

Maybe this can inspire for a java solution? https://theme.co/apex/forum/t/close-mobile-menu-after-selecting-menu-item-help/60388/2

[christian]

Hey Christian,

Regretfully, there’s no function in our theme to close the bar. You can try using jQuery’s Hide Method. See https://api.jquery.com/hide/. Add a unique class to the Button element and the Bar and use them in the jQuery code. Here’s a sample code:

(function($) {
	$(".hideBar").click(function(){
		$(".bar2Hide").hide();
	});
})(jQuery)

Here’s a quick demo: https://youtu.be/YNe9QWZVV7M

Please just note that my purpose of showing you that is to showcase the options in our builder in connection to the custom code and not actually the coding part. In case the code does not work on your end and/or if you have further enhancements to add, you need to consult with a third-party developer.

Hope that helps and thank you for understanding.

[coedam]

@christian_y

(function($) {
$(".hideBar").click(function(){
$(".bar2Hide").hide();
});
})(jQuery)

Thanks, works perfectly Have a good day!

[jade]

You’re welcome, Christian. Have a nice day as well.