Different top bar content for mobile screens

Support
#1

Hi,

My website is www.auctionstoppers.com. I have a top bar that contains our phone number and email as clickable links, but I’m having trouble with formatting it to look good on the mobile screens.

I’d like to just get rid of the text and have larger clickable icons only for the mobile screens. Is that possible? I’m assuming it is since I was able to have a different logo on the mobile screens, but I have searched the forum and can’t find a similar topic. I really like how the mobile version of this page looks: www.woodlandmanufacturing.com.

Also, is there a better (more attractive) way to have clickable phone number and email icons at the top of the page. Maybe above the logo in the vertical header? I’m not a fan of how the top bar looks, but I haven’t been able to find a better solution.

Thanks!

#2

Hi There,

Have you considered upgrading your theme from X to PRO. If you purchase X before the release of PRO you are entitled to a free upgrade, otherwise you can pay just the difference between the products on your Apex License Page.

https://theme.co/apex/licenses

It is 100% worth if you are looking to achieve that, Pro allows you build complex headers and have different elements/ headers for different devices. Take for example this header I built a couple of weeks ago for a bit of fun, re-size your browser and see how it changes from Desktop, Tablet and Mobile :

www.sorrymomdesign.com/star-wars/

You can find more information about the theme here: https://theme.co/pro/

Let us know your thoughts.

Cheers

#3

Hi, thank you for the reply. Just to clarify, is there not a solution for just clickable icons in the mobile view in X?

If not, are you saying that I can upgrade to pro at no cost? Will upgrading to pro change anything I have already done? I am supposed to be done with the site today, but the mobile top header is driving me crazy so I am trying to find a solution. I don’t want to have to start over or redo a bunch of stuff just to get the header I want though.

#4

Hi There,

1 - If you purchased X before the release of PRO you are entitled to a free upgrade and there will be no negative effect whatover on your website, I believe building your header with PRO header builder would give a nice touch to your website.

But if you need to finish today maybe it is not the best imediate solution, Pro Header Builder is amazing but like any tool it requires a small learning curve.

2- In case you want to replace your topbar content with just an icon on mobile you can do the following.

Replace your topbar content with :

<div class="desktop-top"><a href="tel:18006056023" style="outline: none;"><i class="x-icon x-icon-phone" data-x-icon=""></i> Toll Free (800) 605-6023</a>&nbsp;&nbsp; &nbsp; <a href="mailto:Info@AuctionStoppers.com?subject=Auction%20Stoppers%20Contact" style="outline: none;"><i class="x-icon x-icon-envelope" data-x-icon=""></i> info@auctionstoppers.com</a></div><div class="mobile-top"><a href="tel:18006056023" style="outline: none;"><i class="x-icon x-icon-phone" data-x-icon=""></i> </a>&nbsp;&nbsp; &nbsp; <a href="mailto:Info@AuctionStoppers.com?subject=Auction%20Stoppers%20Contact" style="outline: none;"><i class="x-icon x-icon-envelope" data-x-icon=""></i> </a></div>

Add the following code to Theme Options > CSS

@media(max-width: 969px) {
.x-topbar p.p-info div.desktop-top{
display: none;
}}

@media(min-width: 969px) {
.x-topbar p.p-info div.mobile-top{
 display: none;
}}

Let us know how it goes!

#5

Thanks for clarifying. I SOOOO wish I had known about pro before I started the website. Oh well, since I am just about done, I think I better just go with a solution in X.

Unfortunately, the solution above didn’t work. I added the new code for the top bar in the header section of the customizer which added a row of both the icons with the text, as well as a row with just the icons. Then, I added the CSS in the X>Options>CSS section, but that didn’t change anything. Was that the wrong place for the CSS? I tried it in the customizer and it didn’t do anything either. I did add the missing bracket, but still nothing changed on the my laptop, tablet, or phone.

#6

Hi again,

In addition to my above response which I need help with, I was hoping you could also help with an unrelated problem I just discovered. I’m checking all the pages in all formats (laptop, tablet (small), and phone), and it seems that the layout of the tablet version is messed up.

For example, on the home page, the buttons in the Avoiding Foreclosure section are missing, and in Properties We Buy the text is wrapping under the icon. Similar issues on the other pages as well. Everything is the way it should be on the phone and laptop. The pages don’t look messed up in the tablet view in Cornerstone or customizer. What is going on?

#7

Hi There,

I did check your topbar, and I don’t see the parent divs (<div class="desktop-top">, <div class="mobile-top">) on Joao’s provided code above, neither I see the given CSS code.

Please confirm that you added the provided code. Can you do a test, please change a (any) settings on Theme Options and see if that saves.

Please provide us login credentials in a secure note if in did the Theme Options did not save.

And please clear and deactivate your caching plugins, while we are troubleshooting the issues.

Regarding your other issue, please create a new thread for that to avoid confusion.

Thanks,

#8

Sorry, I deleted the html and CSS last night because it looked so bad and the site had already gone live. I just added it back (in Theme options) so it can be reviewed. Still having the same issue today. Also, the code is overwriting the styling I had (white, bold, larger size, right alignment). Does that now have to be added in the Theme options CSS?

I’ll create a new thread for the other issue. thanks

#9

Hi There,

I have added a few more CSS lines to make your topbar look better.

.x-navbar .desktop .x-nav > li > a {
    padding-left: 0px;
    padding-right: 0px;
}

@media(max-width: 969px) {
  .desktop-top {
    display: none !important;
  }}

@media(min-width: 969px) {
 .mobile-top {
    display: none !important;
}}

.mobile-top {
  float: right;
  font-size: 20px
}
  .desktop-top {
 margin-top: 5px;
  max-height: 10px;
    
  }
.x-topbar a {
  color: white;
}

Hope it helps

#10

You are wonderful! Thank you so much!

#11

You are welcome :slight_smile: and thanks for the kind words!

#12

Hi, Sorry to reopen this, but I am stuck again. I am trying to add social icons to the right of the phone and email icons on the same line in the top bar. I have entered the Facebook URL in Theme Options>Social, but the Facebook logo it is stacking under the other icons on both the desktop and mobile versions.

So, I attempted to just add the html code with the existing top bar code which works, but I can’t figure out how to change the x-icon code correctly to get the Facebook square logo. I either get a phone still (because I copied the html for the phone number) or the icon disappears. I saw something that indicated it should be x-social instead of x-icon for the social icons, but that’s not working either. I’ve tried deleting, adding, changing things in every possible combination, but nothing switches the icon. This is what I have which obviously is not right (I had to delete the beginning < and ending > below to make the code show up). How do I change the phone to the facebook-square icon?

a href=“https://www.facebook.com/auctionstoppers/” target="_blank" style=“outline: none;”> i class="x-social-facebook-square"data-x-icon=“”></i</a

I’ve searched for solutions to both problems, but can’t find exactly what I need. I think the best solution is to just make the existing social icons be on the same line, and to the right, of the top bar content. That way I can easily add new ones in the future, and they will show up on the desktop and mobile versions. What am I missing to make that work?

If possible, can you provide both solutions so I can decide what works best? Thank you in advance!

#13

Well, I’ve been searching and testing this whole time and finally found a solution to the Facebook code in the top bar text field. For anyone else looking, this is what worked.

<a href="https://www.facebook.com/auctionstoppers/" target="_blank"><i class="x-social-facebook-square" data-x-icon=""></i></a>

I have removed the Facebook URL from the Social section, but it would still be nice to know how to make the social icons in line with the top bar text/icons if possible. thanks

#14

Hi There,

The Topbar content is floated to the left and the social icons are floated to the right. If you need them side by side, we need them to not float.

.x-topbar .p-info,
.x-topbar .x-social-global {
	float: none;
	display: inline-block;
}

But that will align both to the left, you can use the custom CSS below to align both to the right.

.x-topbar-inner {text-align: right;}

Cheers!

#15

I appreciate the help. Thank you!

#16

You are welcome!

#17

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