How to add location links in topbar

Support
#1

Hi !
I am trying to add a google map address to my top bar in the far left corner and than 3 links on the right side. I would like it to look like this below:

How do I do this?
My website is westsidelakeshore.com

#2

Hi there,

To add extra stuff to the top bar you will need to use the X > Launch > Options > Header >Topbar section to add your code.

Thank you.

#3

Thank you! what would the code be for an address and have it aligned on the right side? and have 2 links align on the right side?

#4

Please see https://www.w3schools.com/tags/tag_address.asp for the address HTML tag. Aligning would require custom CSS. For that, you’ll need to consult with a web developer.

The best option for this is to use Pro though as it has a header builder and the layout you want is achievable without custom coding.

Thanks.

#5

Great thank you what if I just want to put an icon with a phone number? How would i do that?

#6

Hi there,

To do so I suggest that you add the icon using the information mentioned in the page below:

http://demo.theme.co/integrity-1/shortcodes/icons/

And the Phone number will be a plain text.

Thank you.

#7

Hmmm the icon short-code did not work. But I can do without it.
However, How or where do I change the color of the telephone and the hover color for the telephone number? I want the telephone number to match the color of the “contact us” which is color: #011125.

I put this code in:

Contact Us: <a href=“tel: 8632992158”> 863-299-2158

Thanks again for all the help

#8

Hi again,

Please add the following code in your Customizer:

.x-topbar .p-info a {
    color: inherit !important;
}

Let us know how this goes!

#9

it works but on hover it doesn’t change colors. How do i add a hover color?

#10

Hey there,

Please add the following code in your Customizer as well:

.x-topbar .p-info a:hover {
    color: black !important;
}

Change the color as per your need. Hope this helps!

#11

Thank you! it worked. However, when I go to click on the phone number its not clickable and just takes me to an Oopa page. How do i have a clickable phone number that on click allows the user to call.

Im using this code:

#12

Hi again,

You’ve pretty quotes in your code. Please use this code instead:

<a href="tel:8632992158" style="outline: none;">863-299-2158</a>

Cheers!

#13

GREAT THANK YOU SO MUCH!!

I have one more question regarding alignment!. I really like the feature box set X theme has and on mobile i would liek it to stack so i out in this code below which worked but how do i get everything to align to the left now?

#14

Hi again,

You can replace your code with the following code:

@media screen and (max-width: 767px) {
  .x-feature-box-graphic-outer, .x-feature-box-graphic-inner {
    width: 100% !important;
  }
  .x-feature-box > * {
    width: 100%;
    float: left;
  }
  .x-feature-box img {
    width: 100%;
  }
}

Also remove the invalid comment you have in your Customizer (see screenshot)

Let us know how this goes!