Change link in footer to lowercase?

Hi,

You’ll have to excuse me if I’m being stupid here but I barely know what I’m doing!

The following is my site url: www.loveguitar.net

I wanted an email link in my footer. Following searches thru the support forum it I added it as a custom link, put this in a menu and put that menu in the footer. However it automatically has the text in uppercase, is there a way to change it to lower case?
Additionally, this email link sits at the top of the footer, with the social media icons lower down. Is there a way to put the menu and social media links alongside each other, allowing for a narrower tidier footer?

Many thanks

Hi there,

No worries. :slight_smile: Please add this code in the Global CSS:

.x-colophon.bottom .x-nav li a {
    text-transform: none;
}

.x-colophon.bottom .x-nav {
    display: inline;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

Hi

Thanks for the help.

However I added this into the CSS and nothing has changed?

thanks

Hi @Robshawguitar,

I confirmed that you have added the code above in your setup however it is not executed.

I believe that it is not executed because there are CSS above the CSS given that are no closed properly(I will a show sample). I could not able to locate it because in the front end it is very confusing. You could try share us your admin credential to help you find it.

Don’t forget to set it in a secure note.

Sample not closed CSS:

.class{
    text-transform: none;
    display: inline;

.x-colophon.bottom .x-nav li a {
    text-transform: none;
}

.x-colophon.bottom .x-nav {
    display: inline;
}

Below the display: inline; will not be executed.

Hope it helps.

Thanks.

Hi

Thank you. I will send log in in a secure note.

Hi There,

There was missing a curly bracket(}) in your custom CSS. I’ve just corrected it:

.x-colophon-content {
	width: 50%;
}
.x-colophon.bottom .x-social-global {
	width: 50%;
    float: right;
    margin: 0;
}
.x-colophon.bottom .x-nav li a {
    text-transform: none;
}

.x-colophon.bottom .x-nav {
    display: inline;
}

Cheers!

Great,

Thanks!

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.