Top bar content behaviour

[logoglo]

Hi, see: http://cloud204.temp.domains/~xv7ac71x/

I have this html in the content:

 <p style="font-size: 17px; text-align: right; color: #fff; margin-top:2px;"><i  class="x-icon x-icon-phone-square" data-x-icon-s="&#xf098;" aria-hidden="true"></i><strong> &nbsp;800-745-4736 </strong>  <a style="color: #fff; padding-left: 10px;" href="#" target="_blank" rel="noopener noreferrer"><i  class="x-icon x-icon-facebook" data-x-icon-b="&#xf09a;" aria-hidden="true"></i></a>   <a style="color: #fff; padding-left: 10px;font-size: 21px;" href="#" target="_blank" rel="noopener noreferrer"><i  class="x-icon x-icon-linkedin" data-x-icon-b="&#xf08c;" aria-hidden="true"></i></a>  <a style="color: #fff; padding-left: 10px;font-size: 21px;" href="#" target="_blank" rel="noopener noreferrer"> <i  class="x-icon x-icon-youtube" data-x-icon-b="&#xf167;" aria-hidden="true"></i></a

And this Css:

.x-topbar .p-info {
  float: right;
}
.x-topbar {
  background-color: #1b75bb;
  height: 0px;
}

It looks ok on a desktop (but its adding space between the top abr and nav bar, how do I get rid?), but something weird happens on mobile views…a small white square appears:

How do I get rid of this?

Also, how do I center that content on a mobile device?

Thanks.

[logoglo]

I have fixed the gap issue, but on a mobile, there is a big grey box behind everything

I would also like it to center on a mobile. Thanks.

[jade]

Hello @logoglo,

There is a default CSS for the stack that is adding the background color to the topbar info area:

You may override that by adding this CSS in X > Theme Options > CSS:

@media (max-width: 767px) {
    .x-topbar .p-info {
        background-color: transparent;
    }

    .x-topbar {
        height: auto;
    }    
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[logoglo]

thnaks! that has fixed it…how would I center info that on a mobile?

[friech]

Hi @logoglo,

Please update the given CSS code above to this:

@media (max-width: 767px) {
    .x-topbar .p-info {
        background-color: transparent;
        float: none;
        padding-bottom: 0;
    }

    .x-topbar {
        height: auto;
    }    
}

Please do mind that further customization from here would fall outside of the scope of support that we can offer.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Thanks,

[logoglo]

Perfect! thanks!

[friech]

You’re most welcome,

Cheers!