Hi
I want to have a fairly long Horizontal Footer Menu and a couple of social icons on the footer.
I’ve used Custom CSS to set up the inline menu but it only uses half the width of the footer and there doesnt seem to be a way of configuring this.
I’ve seen in another post that this was going to be a feature in V2.
Can you help please, either by telling me where the width config is or by telling me if it can be done with Custom CSS.
Thanks
Really great product as far as I’ve used it.
You’ll see that I’ve not gone too far yet but I’ve only been going up the learning curve for a few hours.
Custom CSS is:
/* Vantage Horizontal Footer Menu */
#footer-widgets .widget.widget_nav_menu ul {
text-align: left;
}
#footer-widgets .widget.widget_nav_menu li {
display: inline-block;
float: none;
margin-right: 16px;
}
#footer-widgets .widget.widget_nav_menu li:before {
content: "007C";
font-family: FontAwesome;
margin-right: 16px;
}
#footer-widgets .widget.widget_nav_menu li:first-of-type:before {
content: none;
margin-right: 0;
}
#footer-widgets .widget.widget_nav_menu li:last-of-type {
margin-right: 0;
}
[/code/]
Hi Trainshed
Thanks for reaching out.
Looks like you’ve made progress in setting your widget widths. If anything else comes up, let us know.
All the best :)
Hi Andrew
Thanks for your response. As you say I’ve found a solution after struggling with CSS over the weekend (I’m going to do a Codecademy course for improve my competency in the area).
hat I’ve actually done is:
/* Footer */ #nav_menu-2 { width: 85% !important; } #vantage-social-media-2 { width: 15% !important; }I cribbed this from another forum post.
This doesn’t work quite as well as I’d like on small screens (where I’d like the social media buttons to drop onto the next line as a group when there’s no room in the 15%. I’ll maybe find a better solution when I’ve more fully understood CSS.
Also it would be nice to right align the social media buttons.
Nice. The Codeacedemy course won’t be a waste of time. In terms of WordPress and using themes, being able to supplement a theme with a little of your own Custom CSS is super handy. Using the inspector is the most important part of that. Greg goes over that here if you’re interested: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/.
Try this. Remove your first two rules the ones where you’re setting width. Try the following:
#page-wrapper #footer-widgets .widget:nth-of-type(1) { width: 85%;}#page-wrapper #footer-widgets .widget:nth-of-type(2) { text-align: right; width: 15%;}#page-wrapper #footer-widgets .social-media-icon { display: inline-block; float: none;}#colophon .widget_nav_menu .menu-item a { display: inline; border-bottom: 0}@media (max-width: 925px) { .layout-boxed #page-wrapper #footer-widgets .widget { margin-bottom: 25px; text-align: center; width: 100%; }}Let me know what you need from there.
To understand nth-of-type check:
http://learn.shayhowe.com/advanced-html-css/complex-selectors/
Section: :nth-of-type(n) & :nth-last-of-type(n)