Topbar mobile layout and icons

[clionama]

Hi, I am currently designing a website using Xtheme but it is installed on my local grid host. I am using the Renew and Demo theme. I would like to know is there a way to configure the top bar on a mobile. On the site, the content looks good (Picture of desktop topbar .

And on the mobile it looks like this: It’s messy as you can see.

I also tried adding a renew icon to the content as so:

However nothing happens:

Would you mind helping me in where I am going wrong please?

Many Thanks
Cliona

[basanta]

Hi There,

Thanks for writing in!

Instead of writing short code for the the icon please add icon HTML code so that it will work. In the header content area short code doesn’t works.
<i class="x-icon-phone-square" data-x-icon="&#xf105;" aria-hidden="true"></i>
Please add similar code.

Reagrding the text in mobile view, please use this css in your theme option -> custom -> Global css

@media (max-width: 767px) {
.x-topbar .p-info {
 font-size: 12px !important;
}
}

It will reduce the font size.

Hope this helps.

Thanks