Topbar Content split into 3

Support
#1

Hi,

I am trying to replicate something similar to https://www.bootea.com/. I’d like the Topbar Content split into three sections for the exact same things as the website I’ve provided (maybe without the ticking clock). I tried adding left right and centre coding, but this did not work as neatly as I’d like.

  1. How can I split the topbar into three sections with icons like https://www.bootea.com/ ?
  2. This topbar )https://www.bootea.com/) content disappears when you use a mobile. How can I replicate this?
  3. They also have a bottom bar with No artificial colours etc. How can I do this?

Thanks in advance,

Tom

#2

Hi Tom

1

Please add the following code to your Theme Options | Header | Topbar Content

<div style="float: left;"> Left content </div> 
<div style="float: none;"> Center content </div>
<div style="float: right;"> Right content </div>

Please add the following code to to Theme Options CSS

.x-topbar .p-info {
   float: none;
}

2- Please add the following code to Theme Options CSS

@media(max-width: 480px) {
  .x-topbar {
display: none;
}}

3- Unfortunately this is not a featured offer by X it could be possible with Custom development but would be out of the scope of our support, You can emulate the same effect on the first section of your content on each page of your website.

Hope it helps

#3

Thanks for your support on this.
I’ve put the following code in. However the center content is floating to the left (www.stixdrinks.com/home).

WORLDWIDE SHIPPING
SPEND £15+ FOR FREE UK DELIVERY
ORDER BY 3PM FOR SAME DAY DESPATCH

Please could you also guide me on how to make the background on the topbar a different colour and the text white?

Also, how to add in three icons ([x_icon type=“globe”] / [x_icon type=“truck”] / [x_icon type=“clock-o”] )

Thank-you. I appreciate your support.

Tom

#4

Would you please kindly get back to us with the URL/User/Pass of your website using the Secure Note functionality to be able to check your settings and see why it is not working as expected?

The URL you gave to us is not X related one. It is added using the Pro Header Builder. If you want to have such option at hand you will need to check Pro:

Thank you for your understanding.

#5

Thank-you,
I went to Pro and this sorted it.
Great suggestion.

#6

Glad we were able to help :slight_smile: