Footer at the bottom

first of all you can avoid that menu problem on setting the z-index to 10.
second do you realy want to show always your footer half height of the screen?
or is it the fact you like to avoid on pages with less content that there is at the bottom a gap which has different color then content background?
i would get that result on giving the #main a min-height of 100vh

the linked page is from 2015 and for a layout with header on top.
you have to think of that your header takes away 300px form 100% width – and on responsive case the header width is 27% so for footer width is 73% etc pp.
So you had to calculate the max-width to 1010px ( on default it is 1310px) and the width as a difference etc. pp. –
you see that will be complicate enough.
By the way – you had to give a padding-bottom to #main to see all content under the footer.

yes – and all your troubles gone-
maybe a bit less than 100vh to have for those pages who will fit the socket in viewport

by the way – if you have custom separator and you like to have the icon in the middle – the distance defines the left and right distance – so with padding etc. you can insert 45% or something like this.

I think I’ve never written such an elegant solution to have the footer below – but it seems there was no interest in a good solution. – What a pity

:lol :roflmao

yes – flexbox model is a very powerful tool, which is rarely used properly.
But only for that case Header Left or Right. And as he had only one container_wrap class

This a no-go, but I haven’t researched how to actually use “flex” yet:

@media (min-width: 768px) {
	#header_main, .av-logo-container {
	    display: flex;
	    height: 100vh;
	    flex-direction: column;
	    position: relative !important;
	    overflow: visible !important;
	}

	.av-logo-container.inner-container {
	    flex: 1 0 auto;
	    width: 100% !important;
	}

	.av-sidebar-social-container{
	  flex:none;
	}
}