This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Altering position of widgets on footer

Open 4 replies premiumthemetheme-vantage
trainshed
10 years ago · Last reply by Andrew Misplon 10 years ago

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/]

URL: http://www.train-shed.co.uk/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

4
  1. Andrew Misplon Staff 10 years, 3 months ago

    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 :)

  2. trainshed 10 years, 3 months ago

    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.

  3. Andrew Misplon Staff 10 years, 3 months ago

    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.

  4. Andrew Misplon Staff 10 years, 3 months ago

    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)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread