Custom topbar contact info

[yaqubb]

Greetings,

I’d like to add right-aligned phone number and email address links to the topbar similar to this site, but can’t quite figure out how. I’m using X with the Integrity stack.

1. Any chance you could help with the HTML and CSS to make it happen?

2. How could I add a phone and mail icon next to the contact links instead of standard text?

3. How do I change the height of the topbar?

Many Thanks

[nico]

Hi @yaqubb,

Thanks for writing in.

1. I checked your site and I could not see that you have added already a topbar texts. To change the position of your topbar, you will need to use this CSS - .x-topbar

2. Check this link below on how to add an icon in your topbar.

Adding Icons in Topbar content (not social icons)

3. to adjust the spacing of your header, Go to your Theme Options > Header > Links Alignment.

Hope it helps.

Let us know how it goes.

Thanks.

[yaqubb]

Hi Nico,

Thanks for the response, but that doesn’t really answer a few of my questions.

1. I’m asking how to get the look of http://mrboxinc.com/ (not my site) as I’m using the default Integrity stack topbar. Any idea how I can make that happen? Do I just need to cram all of the html into the topbar content area in the theme options?

2. Thanks!

3. I didn’t ask about header spacing. I asked about the topbar height. How can I set height or max height of the topbar area?

Cheers

[friech]

Hi There,

1. Yes, that is right, you need to manually write your HTML markup for it. You can use the following snippet as your starting point.

<i class="x-icon x-icon-phone mrm" data-x-icon-s="" aria-hidden="true"></i><a class="topbar-menu" href='tel:XXXXXXXX'><span>XXX.XXX.XXXX</span></a>
<span class="mhm tbar-menu-separator">|</span>
<i class="x-icon x-icon-envelope mrm" data-x-icon-s="" aria-hidden="true"></i><a class="topbar-menu" href='mailto:xxxxx@xxxxx.com'><span>xxxxx@xxxxx.com</span></a>

Then add this to Theme Options > CSS to position it to the right.

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

3. Topbar height is auto it depends on its content total height. But if you need it to have a max-height, please add this to Theme Options > CSS

header .x-topbar {
	max-height: 100px;
    overflow: hidden;
}

Hope it helps,
Cheers!