twenty eleven: add nav bar to footer

Hey,

You need to add the following you your child theme’s style.css file:

#colophon .menu ul li {
display: inline-block;
padding: 0.8125em;
}

display: inline-block is the code that will make the links in your footer nav line up into one single line.

You can change the value for padding as you wish, this control how much spacing there is between the links in your footer nav.

Hi siobhyb,

Thanks for your suggestion.

I put the code in my child theme’s style.css file just as it appeared above and nothing appeared on my page.

I really appreciate your help!
Annie

right now, your site does not seem to have any menu in the footer;

once the ‘vertical’ menu is visible in the footer, somebody might be able to help with the CSS

Hey, yes, my answer assumed you had followed the instructions that you previously linked to.

Hi siobhyb and alchymyth,

Thanks so much for your help! Sorry for the delay in replying. I was away.

So yes, siobhyb, that was my mistake – I had removed that code that I’d linked to in my first post since it didn’t work. I’ve put it back in and also entered your code.

The nav bar still appears as bullets. I would really like it to appear just like the nav bar at the top of my page. Is this at all possible?

Here’s my website:
https://www.anniehearts.com

Thanks again for your help!
Annie

your footer menu is not in the #colophon section, therefore the suggested styles do not apply.

try to simplify the styles by removing the #colophon part:

.menu ul li {
display: inline-block;
padding: 0.8125em;
}

Fantastic – that’s much better! ??

One more thing: is there any way to centre it?

Thanks alchymyth!

Hi again,
I’ve tried to add text-align:centre

to the code you gave me above:

.menu ul li {
display: inline-block;
text-align:center;
padding: 0.8125em;
}

It’s still showing aligned left.

Any help is much appreciated!
Thanks,
Annie

.menu { text-align: center; }

Worked like a charm.

I’m so happy! Thanks again for all your help!