Topbar formatting

[kstidham]

I am working on a site with info in the topbar. When it goes to mobile view it does not have enough height to display the text. I also would like to be able to separate the Phone number and name, then the links, then the social icons in responsive view. I also can see a light white border around the text when in mobile view.

Please advise. Thank you.

https://www.jcedc.growjocomo.com/

[friech]

Hi There,

Thank you for writing in, but it seems there is someone working on your site because it suddenly fix the topbar issue when I was checking it.

Here’s the CSS code to remove the border around the text.

@media (max-width: 767px) {
	.x-topbar .p-info {
		border-width: 0;
	}
}

Add this to Theme Options > CSS

Hope it helps,
Cheers!

[kstidham]

Your solution worked great. Thank you.
Now there seems to be an issue with the text links. They are not working when in mobile view.
Please advise. Thanks.

[jade]

Hi there,

Please update this code:

@media (max-width: 767px) {
    .x-topbar {
        margin-top: 62px;
    }
    .x-topbar .p-info {
          border-width: 0; 
          float: none !important;
          padding:20px 0px;
    }
}

Hope this helps.

[kstidham]

Wonderful. Thanks.

[nabeel]

You’re most welcome!