[Will CParticipant]

Is there a way to put a “-” or “•” in between the textual links in the footer? I would think there is a way via CSS, but just not sure what class that might be, if possible.

For example: ABOUT US – PRODUCTS – BLOG – CONTACT US or ABOUT US • PRODUCTS • BLOG • CONTACT US

Thanks!

[ChristianModerator]

Hey Will,

Please add the code below in your Appearance > Customize > Custom > CSS.

.x-colophon.bottom .x-nav li a:after {
    content: "-";
    position: relative;
    left: 5px;
}

Hope that helps. 🙂

[Will CParticipant]

That’s great! One last thing – at the end of the row of links, whatever is last also has one, for example…

BLOG – CONTACT US – <——— right there

is there a snippet of code that will omit the last one?

Thank you so much!

[ZeshanMember]

Hi Will,

Yes, you can use this code instead:

.x-colophon.bottom .x-nav li a:after {
    content: "-";
    position: relative;
    left: 5px;
}

.x-colophon.bottom .x-nav li:last-child a:after {
    content: "";
    left: 0;
}

Hope this helps. 🙂

Thank you.

[Will CParticipant]

Even better! Thank you!

[ChristianModerator]

You’re welcome Will.

[MaceInyerFaceParticipant]

I followed these same steps and it works great except that now the delimiter becomes part of link.

Is there another bit of CSS that can be added to prevent this?

I’m using Integrity.

[John EzraMember]

Hi there,

Thanks for writing in! To assist you with this issue, would you mind providing us with your URL? This is so we can test and make sure our advise will work on your site. Thanks!

[MaceInyerFaceParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for the URL!

Please try using this CSS code instead of the one provided above:

.x-colophon.bottom .x-nav li a {
	display: inline-block;
	vertical-align: middle;
}

.x-colophon.bottom .x-nav li:after {
    content: " | ";
    position: relative;
    left: 5px;
    display: inline-block;
}

.x-colophon.bottom .x-nav li:last-child:after {
    content: "";
    left: 0;
}

Thank you!

[Author]

Posts