Footer Menu & slider

You need to look at 2 Snippets:

Snippet1 Footer

Snippet2 Fader

Thanks rdell, I shall check that out!

However, when adding into the footer widget a grey area appears. Is it possible to add the menu below that? Where my social media icons are? https://www.albafitness.com

The footer is definitely possible as on the https://www.themesandco.com/ website, they have · About/Contact · Privacy next to Designed by Themes & Co.

That’s what I want to do. How can I do this?

Also, I couldn’t get the slider to do anything – it didn’t work when i added the code. I meant fade like on this site?

https://www.foodforfitness.co.uk/

Footer: Try this Snippet

Slider: Can’t see evidence that you’ve applied all the code in the Snippet? Suggest you check. Where did you put the code?

I added it to the custom CSS?

Shall check out that snippet, thank you!

Here’s what I can see in your CSS:

.carousel-inner > .next.left, .carousel-inner > .prev.right {
    left: 0;
    opacity: 1;
    z-index: 1;
}
.carousel-inner > .active.left {
    left: 0;
    opacity: 0;
    z-index: 2;
}
.carousel-inner > .active.right {
    left: 0;
    opacity: 0;
    z-index: 2;
}
.home .carousel-control {
    display: none;
}

This is missing:

/* Make Carousel fade - adapt 2s to required delay */
.carousel-inner > .item {
-webkit-transition: opacity 2s ease-in-out ;
transition:         opacity 2s ease-in-out ;
}

That’s really strange because:

/* Make Carousel fade - adapt 2s to required delay */
.carousel-inner > .item {
-webkit-transition: opacity 7s ease-in-out ;
transition:         opacity 7s ease-in-out ;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity:        1;
z-index:        1;
left:           0;
}
.carousel-inner > .active.left {
opacity:        0;
z-index:        2;
left:           0;
}
.carousel-inner > .active.right {
opacity:        0;
z-index:        2;
left:           0;
}

/* remove previous/next arrows from home page only */
.home .carousel-control {
display:        none ;
}

Is definitely in my custom CSS…?

This is what is showing in your page source for Custom CSS:

.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background:none
}
.navbar .nav {
  display: block;
  float: right;
  left: 0;
  margin: 0 10px 0 0;
  position: relative;
}
/*make the menu sub-menu items drop down on mouse hover */
ul.nav li.dropdown:hover > ul.dropdown-menu{
    display: block;
    margin: 0;
}

.page .entry-title {
	display: none;
}
/* Adjust colors as needed */
.footer-widgets {
background:     none repeat scroll 0 0 #83C0E5;
color:          #5A5A5A !important;
padding-top:    0px ;
}
ustomCSS or style.cssCSS

1

2
3
4
5
6
}

/* Make Carousel fade - adapt 2s to required delay */
.carousel-inner > .item {
-webkit-transition: opacity 7s ease-in-out ;
transition:         opacity 7s ease-in-out ;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity:        1;
z-index:        1;
left:           0;
}
.carousel-inner > .active.left {
opacity:        0;
z-index:        2;
left:           0;
}
.carousel-inner > .active.right {
opacity:        0;
z-index:        2;
left:           0;
}

/* remove previous/next arrows from home page only */
.home .carousel-control {
display:        none ;
}

This:

ustomCSS or style.cssCSS

1

2
3
4
5
6
}

at a guess, looks like either a cut and paste error or some sort of plugin conflict.

Aah well spotted @ef. That happens when you try to cut & paste out of a Snippet. The ‘proper’ way is to:

Click Icon1 (4 bars) – that removes the numbers
Click Icon4 (2 pages) – that selects the code and allows you to Ctl/C (Copy) the code.

Ahh, legends! Thank you. I’m not very good at all of this, but I’m getting there. ??