Flipping two things around

Author Posts

Martin_1

Hi,

Is there a way on this page (work in progress) https://www.albruna-testplatform.com/nard/kunstwerken/ to put the title “een selectie” below the filter? So flip these around?

Greetings from,

Martin


Sebastian

Hey Martin,

This isn’t straight forward because the title would need to be added to the same container element as the filter in order to adjust the ordering using CSS grid or flexbox properties. If you want some JavaScript code that does that, which you can paste into MT here it is:

function docReady(fn) {
	// see if DOM is already available
	if (document.readyState === "complete" || document.readyState === "interactive") {
		// call on next available tick
		setTimeout(fn, 1);
	} else {
		document.addEventListener("DOMContentLoaded", fn);
	}
}
function detachElement(node) {
	return node.parentElement.removeChild(node);
}

docReady(function() {
	if (document.getElementById('post-3416')){
		let title = document.getElementsByClassName('fusion-title-3');
		if (title){
			let detachedTitle = detachElement(title[0]),
				container = document.getElementsByClassName('fusion-grid-archive');
			if (container){
				container[0].prepend(detachedTitle);
			}
		}
	}

});

Once you’ve added that, target the .fusion-grid-archive element with Microthemer and use the CSS grid controls to move the 2nd filter element to the top.

I hope that helps!

Cheers,
Sebastian


Martin_1

Okay, it’s more complicated than I had hoped for I see :-D.

I was more thinking in line of floating the title below the filter and if needed just moving the filter up a bit (to create some spacing).


Sebastian

There are CSS adjustments you could make, like float, position or negative margins. But in my experience, it often leads to responsive styling issues on mobile that become complex and time consuming to resolve. So moving the HTML is my preferred approach. And in this case, one option is to use JavaScript to move the element once the page loads, seeing as you can’t edit the HTML directly.

Cheers,
Sebastian


Martin_1

Hi Sebastian,

I will use your code. But I am not entirely sure how to add it to MT. I had a look at the help file but I think this section is a bit out of date https://themeover.com/how-to-add-custom-javascript-via-microthemer/

Could you help me out here?


Sebastian

Yep, that one is a bit out of date. This one is more recent:

https://themeover.com/copy-codepen-html-css-js-to-wordpress/

Let me know if you need further assistance.

Thanks,
Sebastian

You must login or register to reply to this topic.