Sticky menu bar in footer with icons?

Hey Mauro,

You can add a widget area to your header by referring to this post – https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area and display it only on mobile and fixed at the bottom of the screen using custom CSS.

Let us know if you need help after adding your widget to header.

Cheers!
Yigit

Hi,

Thank you for the update.

Where can we see the site? Please provide the URL in the private field so that we can see what you have done so far.

Best regards,
Ismael

Hi,

Please try adding following code to Quick CSS

#header .widget {
    position: fixed;
    bottom: 0;
    top: auto;
    width: 100%;
}
@media only screen and (min-width: 768px) {
#header .widget {
    display: none; 
}}

Best regards,
Yigit

Hi,

Sorry for the late reply!

I came up with a better solution as currently there is a z-index issue.

Please delete the code you added to display widget area in header and add following one to functions.php file instead

add_action('ava_before_footer', 'av_add_footer_content');
function av_add_footer_content(){
	dynamic_sidebar( 'header' );
}

Then you can inspect elements to find your widget ID – https://imgur.com/a/BaPagcQ and use custom CSS code as following (widget ID in my case is “custom_html-6”)

#custom_html-6 {
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: 100%;
}

If you need our assistance with this, please create temporary admin logins and post them here privately :)

Best regards,
Yigit

Hi,

Thank you for the info.

You can add the following css code to align the menu items horizontally and limit the height of menu container. If you want to add the icons, in the Appearance > Menus panel you can manually insert the image or icon html in the menu items’ Navigation Label field.

#nav_menu-2 {
	position: fixed;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 60px;
}

#nav_menu-2 .menu li {
	float: left;
	clear: none;
	width: 33.33%;
	background: red;
	margin: 0;
}

@media only screen and (min-width: 768px) {
   #header .widget {
       display: none; 
   }
}

Unfortunately, we can’t help you add extra options like the sliding containers for the search field or the category list. It’s beyond the scope of support.

Best regards,
Ismael