Alignment in the Topbar

Support
#1

I can’t figure out how to split text on the same line in the top bar and keep this content.

I want some text on the left, a space between, and the following email icon and text aligned to the right:

<a href="mailto:[email protected]">
<i class="x-icon x-icon-envelope" data-x-icon="" ></i> Contact Us</a>

What is the trick to align this part of the topbar to the right while keeping some text on the left (on the same line)

Basically i wan to mimic a right align tab.

Thanks!!

#2

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thanks.

#3

http://mariejosedanzon.reach.net

I managed to make the top bar appear more or less the way I want, but maybe someone could still make an improvement so the content on the right stays on the right, and content on the left stays on the left in the same row.

Thanks!!!

#4

Hi there,

Please update this code you have in the topbar to:

<p style="text-align:right;font-family:palatino;font-size:90%;"><a href="mailto:[email protected]" style="color:lightgray">
<i class="x-icon x-icon-envelope" data-x-icon="" style="color:lightgray"></i> Contact Us</a></p>

to

The textile art of Marie-José Danzon / L'art textile de Marie-José Danzon.</p>

<p class="topbar-contact"><a href="mailto:[email protected]" style="color:lightgray">
<i class="x-icon x-icon-envelope" data-x-icon="" style="color:lightgray"></i> Contact Us</a></p>

Then add this code in the custom CSS:

.x-topbar .p-info {
    text-align: left;
    float: left;
}

.topbar-contact {
    text-align: right;
    font-family: palatino;
    font-size: 90%;
    float: right;
}

Hope this helps.

#5

Thanks for the assist Jade.

Abe.

#6

You’re welcome!
We’re glad we were able to help you out.

#7

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