Modal in Header

[Josh3roush]

Hey,

I am sure you have heard this a ton but well done with the theme.

I had a quick question in terms of placement of the Modals.

I was wondering if it was possible to place the modal in the header.

I saw in an earlier message, from the comment board for the theme that a couple people were able to add it in there.

Our goal is have a modal in the header, top right, where someone can click on it and get a free estimate.

I am attaching an example of site that was able to accomplish what we wanted. (its the blue button)

Thanks!

[Mohammad – SUPPORT]

Hi,
Please go to Admin -> Theme Options -> Header options -> Right side text config -> Here you can put modal shortcode .

Thanks 🙂
With Best Regards
Swift Ideas

[Josh3roush]

Sounds good! I was able to add the button into the header and my goal is to just align the button to the right…not on the text on the left. What CSS do I need? Or Shortcode? (Please see attached screenshot)

Thanks!

[Josh3roush]

Also, is there a way to decrease the size of the button and also decrease the padding under the button?

[Mohammad – SUPPORT]

Hi,
Please always provide me website URL so i can inspect it .
Thanks 🙂
With Best Regards
Swift Ideas

[Josh3roush]

This reply has been marked as private.

[Josh3roush]

Also to see the “button” we are referring to, you need to go to the “about us”, “services”, etc. pages because our home page does not have it!

[Mohammad – SUPPORT]

Hi,
I have resolved the issue by using the custom css code

div.tb-right div.tb-text{text-align:right;}
div.tb-right div.tb-text a.sf-button{padding:6px 16px}

Thanks 🙂
With Best Regards
Swift Ideas

[Josh3roush]

Perfect, thanks for solving that!

My only last question is how do I center it in the promo bar vertically. The contact info & button is hugging the top of the bar and I want it to be in the middle.

Thanks!

See screen shot for what I mean!

[Mohammad – SUPPORT]

Hi,
I have resolved it so please check it now with hard refresh .
Thanks 🙂
With Best Regards
Swift Ideas

[Josh3roush]

Hey,

It still seems uneven…also is there a way to add padding in the black promo bar section.

Do you have css to increase that so we can play around with it?

Thanks!

See attached image!

[Mohammad – SUPPORT]

Hi,
Finally , I have resolved the issue so please check and let me know . I have added given below css .
`div.tb-right div.tb-text{text-align:right;}
div.tb-right div.tb-text a.sf-button{padding:6px 16px}
#top-bar{height:45px}`
Thanks 🙂
With Best Regards
Swift Ideas

[Josh3roush]

Lastly, how do you make the button that is in the top bar, not open in a new window, it is currently set that way.

I am referring to “Request a quote” button on the top right part of the website. (see early comments for what I mean)

[Mohammad – SUPPORT]

Hi,
I am afraid that i am not getting you exactly.Please elaborate your question .
Thanks

[Josh3roush]

The code you gave me for my “request a quote” button in the top right hand side of the website, when the user presses the button it opens in a new tab on my browser and I don’t want that.

See screenshot for what I mean.