Log in Get SwiftGrid →
Resolved

Horizontal menu in footer menu widget?

Puro Theme started by shreddie May 30, 2017 5 replies
shreddie May 30, 2017 · 6:07 pm #6834

Hello,

I’m using Puro Premium, and I’ve created a menu, and got it to display in my footer. It is displaying as a vertical list of the menu items. I would like it to be horizontal, but cannot find a way to do this. Can you help?

Also, what is the expected behavior on smaller screens with a horizontal menu? Mine has 3 menu items.

Thanks!
shreddie

Andrew Misplon Puro May 30, 2017 · 6:31 pm #6835

Hi shreddie 🙂

You can try something like this:

.site-footer .widget ul li {
    display: inline-block;
    margin-right: 10px;
}

.site-footer .widget ul li:last-of-type {
	margin-right: 0;
}

Take a look, check out how it looks in smaller screen sizes and we can go from there. Adjust the margin as you’d like.

shreddie May 30, 2017 · 7:33 pm #6837

Thanks, that was helpful. I added:

.site-footer {
    padding: 0;
}

To have the menu move up just under the line that separates the footer. I’d like to tighten up the whitespace that separates the menu from the copyright line too. Can you give me the CSS for that?

Andrew Misplon Puro May 31, 2017 · 6:26 am #6838

Sure, try adding:

#colophon .widget {
    margin-bottom: 10px;
}

.site-footer .site-info {
	margin-top: 0;
}
shreddie May 31, 2017 · 12:09 pm #6839

Perfect – thanks Andrew!

Andrew Misplon Puro May 31, 2017 · 2:31 pm #6840

Super 🙂 Glad to hear it’s all sorted. Cheers.

6 posts