Docs

[joe]

Hello!

I’m looking to get rid of the hamburger icons next to my widget menu’s in my footer, and just include the page links.

What type of CSS or code can I use to change the footer to look more like a regular one – like that of theoutbound.com?

Thanks!

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

[joe]

This reply has been marked as private.

[Rad]

Hi there,

Your site is behind a coming soon page. Please provide your login credentials as well.

Thanks!

[joe]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.widget_nav_menu .h-widget:before, 
.widget_layered_nav .h-widget:before {
    display: none;
}
.widget ul, 
.widget ol,
.widget_nav_menu ul li a, 
.widget_meta ul li a, 
.widget_pages ul li a {
    border: none;
    padding-left: 0;
}

Hope it helps 🙂

[joe]

perfect! Is there anyway to get rid of the arrows to the left too? 🙂

[Thai]

Hi There,

Please update the previous CSS to this:

.widget_nav_menu ul li a:before, 
.widget_meta ul li a:before, 
.widget_pages ul li a:before,
.widget_nav_menu .h-widget:before, 
.widget_layered_nav .h-widget:before {
    display: none;
}
.widget ul, 
.widget ol,
.widget_nav_menu ul li a, 
.widget_meta ul li a, 
.widget_pages ul li a {
    border: none;
    padding-left: 0;
}

Hope it helps 🙂

[joe]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this code :

.x-colophon.top {
    padding: 5% 0 5.25%;
    background-image: url(https://campist.co/wp-content/uploads/2017/03/Footerbackgroundsmall.jpg);
    background-position: top center;
    background-size: cover;
}

Hope it helps.

[joe]

Back again! 😉

Is there a way so that my widgets don’t go immediately to a vertical alignment? It seems that every device besides a full desktop just puts the footer into a complete vertical list of items. I’m hoping to make it so all devices have 1 row in the footer, and only mobile has a vertical footer menu.

Is there an app that would be suitable to changing the layout of the footer?

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (min-width: 481px) and (max-width: 979px) {
		footer.x-colophon.top .x-column.x-1-3 {
		width: 30.66666%;
		float: left;
    	margin-right: 4%;
	}
	footer.x-colophon.top .x-column.last,
	footer.x-colophon.top .x-column:last-of-type {
    margin-right: 0;
	}
	footer.x-colophon.top .x-column .widget_nav_menu {
		margin-top: 0 !important;
	}
}

That should make your footer widgets (menus) not to stack on all screen, except extra small screens (480px and below).

Hope it helps, Cheers!

[Author]

Posts