Header: call or text

Support
#1

Hi,

I currently have a phone number on the right side of my header that can be clicked for people to call me directly. I would like to change this to two options: call or text. Is that possible? Also, could I put the “call” and “text” words in some kind of separate colored boxes?

thanks

#2

Hi,

To achieve that, you may change your code in the header to this.

<div class="custom-text right pas">
     <span class="text">Free Consultation | <a class="call-button" href="tel:+(844) 536-3476" style="outline: none;">Call</a> <a class="text-button" href="sms:" style="outline: none;">Text</a><br>
     <span class="text">Experience | Results </span><br>
     <span class="text">No Fee Guarantee: No Fees Unless You Recover </span>
  </span></div>

Then add this in X > Launch > Options > CSS

.call-button {
    background-color:red;
   color:#000;
   margin-right:5px;
}

.call-button {
    background-color:blue;
   color:#000;  
}

You may change the color as you like.

Hope that helps

#3

Thanks. I’m trying to remember the name of the folder where my header code is located. I know this was shown to me in an old post I had placed. Were old posts deleted with the upgrade of the new apex system? I can’t find any of my old posts listed in my account now…

#4

Hi There,

The old posts are not in Apex, you can search them on Google just.

The folder is

framework\legacy\cranium\headers\views\STACK

Hope it helps

#5

Hi,
I’m having trouble finding the folder you describe… I’m using a child theme. Should I be looking under that? If not, what do I put in where you say “stack?” There are many options, including “global,” “header,” the various theme names. Then under each theme name there is “breadcrumbs,” “wp-header,” “landmark-header.” I want to make sure I put this in the right folder. Thanks

#6

Hello @ewk99,

Thanks for writing in and sorry for the confusion. The usage of STACK here refers to the fact that you will need to place the appropriate view in a folder matching the “Stack” you’re using with the theme. For example, I see that you’re using the “Integrity” Stack, so you will want to name that folder integrity.

We have an in-depth article in our Knowledge Base, which covers customization best practices and walks through some examples of how to setup these custom views:

Hopefully that helps to point you in the right direction, cheers!

#7

I couldn’t find that folder so I just changed the code in the “functions.php” file in my child theme. That is where the original header code was placed…

However it still doesn’t look quite right. Can you tell me what the code is to adjust the margins of the colored “call” and “text” boxes? The box is too close to the text inside. The boxes need to be wider.

Also, how do I insert spaces between the boxes and the text to the side of the boxes? Currently they are touching.

Also, how do I adjust the top and bottom margin of the logobar? Currently, the bottom space below my logo is bigger than the top. I want them to be equal.

Thanks!

#8

Hi again,

To adjust the spacing, please add the following code in your Customizer as well:

.call-button, .text-button {
    margin-right: 10px;
    padding: 2px 10px;
}

For the logobar spacing issue, add this code in your Customizer:

@media screen and (min-width: 980px) {
   .custom-text.right.pas {
    padding: 0 !important;
   } 
}

Let us know how this goes!

#9

That worked great, thanks.

#10

Glad to hear it!