Phone icon in top bar is backwards

Support
#1
  1. Is there any way to flip the phone icon that is in my header to face right (as opposed to the left)?
  2. How do I get my e-mail address in my footer to not be all caps?

My website is www.shantifulspaces.com.

#2

Hi @satyampatel,

  1. Please add the CSS code below to X > Theme Options > CSS:
@media (max-width: 6767px) {
	.x-brand {
		float: right;
	}
	#x-btn-navbar {
		float:  left;
	}
}
  1. Please add the CSS code below to X > Theme Options > CSS:
.x-colophon.bottom .x-colophon-content a {
    text-transform: uppercase;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

#3

Thank you! When I put in the first code, it moved my logo from left aligned to right aligned and nothing changed with the phone icon. That’s not what I wanted.

What is the correct code to change my phone icon to face right? Could it be that I’m adding it in the wrong place in my CSS code, or does that even matter?

The other code worked perfectly as soon as I changed the text from “uppercase” to “lowercase” as I was looking for the e-mail address in the footer to display in lowercase letters.

Thanks for your help!

#4

Hi there,

Please try this code:

.p-info .x-icon-phone {
    transform: rotate(90deg);
}

Hope this helps.

#5

Perfect!!! Thank you! :smiley:

#6

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#7

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