Move Built in Contact Form

[blario777]

Dear Author,

Currently the built-in contact form (with the envelope icon) is located in the bottom right corner.

I would like to keep it in the top right corner for all my pages. Is there a way to modify this?

Thank you for your time and help.

[Kieran_SQ]

Hi,

You can move the mail icon and it’s container to the top right by using the below CSS in your KLEO Child theme’s style.css by going to Appearance > Editor > Style.css or you can add it to the Quick CSS by going to Theme Options > General Settings > Scroll to: Quick CSS.

.kleo-quick-contact-wrapper {bottom: unset;top: 50px !important;}

You will need to adjust the 50px value for top to suit your needs.

Additionally you’ll want to adjust where the modal window appears, please add the below CSS using the same method stated above to move the modal windows position.

#kleo-quick-contact {bottom: unset;top: 70px !important;}

Again, you will need to adjust the 70px value for top to suit your needs.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[blario777]

Hi Kieran,

Thank you for getting back to me with your support.

I was able to add css lines, and both items where moved to the top.

Now, I just have 2 additional concerns.

1. Upon clicking on the envelope, the contact form appearing has the arrow still pointed towards the bottom. Can this be changed to point on the top of the form towards the envelope icon?

2. The enevelope (build-in contact form) disappears when viewing the site on mobile dimensions. Tablet dimensions it is still visible, but going below a width of 500px the icon and form is not visible. Anyway to prevent this from happening?

Once again, thank you for your time and help.

[Kieran_SQ]

Hi,

Please try the below CSS to show the icon always regardless of device.

.kleo-quick-contact-wrapper {display: unset !important;}

To move the location of the arrow, please try the below CSS

COPY CODE

#kleo-quick-contact .bottom-arrow {
    border-top: solid 1px #e5e5e5 !important;
    border-right: 0 !important;
    border-left: solid 1px #e5e5e5 !important;
    border-bottom: 0 !important;
    top: -7px;
    bottom: unset !important;
}

Please change the color value #e5e5e5 to suit your needs if you are using different colors from the default.

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[blario777]

Hi Kieran,

Thank you again for your help.

The two pieces of code worked great to adjust the contact form arrow, and it is now visible on all screen dimensions.

However, as the screen dimensions get smaller, the position does not change, making it cover parts of the menu. Can the envelope be added into the menu so that it adapts its position same as the menu?

Or can you keep it separate and specify the position it should hold as the screen dimensions change?

I appreciate your time and effort.

[Kieran_SQ]

Hi,

The contact form cannot be added to the menu as it collapses without considerable coding and adjustment of several files. It can however change position on smaller devices, please let me know the position you would like the contact form to appear on devices smaller than 990px (or another value if you desire).

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[blario777]

Hi,

Thank you for your help again.

For fullscreen (1440px), I would like it to be 180px margin from the right side.

For tablet (768px), I would like it to be 100px margin from the right side.

For mobile landscape (480px), I would like it to be 30px margin from the right side.

For mobile portrait (360px), I would like it to be 20px margin from the right side.

Also, can the “envelope” icon be replaced by a different image?

And can I remove the arrow on the top (the one that was originally on the bottom) of the contact form?

I appreciate your time and support.

[Kieran_SQ]

Hi,

Please use the below CSS in either your KLEO Child theme’s style.css by going to WP Admin > Appearance > Editor > KLEO Child > Style.css or in Theme Options > General Settings > Scroll to: ‘Quick CSS’. Make sure to clear all of your caches to see the changes. Your mobile devices may need their browsers entire local data (except form data and passwords) deleted to see the changes.

COPY CODE

/* Various spacing for contact form */
@media screen and (min-width: 1440px) {
.kleo-quick-contact-wrapper {right: 180px;}
}
@media screen and (min-width: 768px) {
.kleo-quick-contact-wrapper {right: 100px;}
}
@media screen and (min-width: 480px) {
.kleo-quick-contact-wrapper {right: 30px;}
}
@media screen and (min-width: 360px) {
.kleo-quick-contact-wrapper {right: 20px;}
}

To hide the arrow below/around the contact form please use the below CSS

#kleo-quick-contact .bottom-arrow {display: none;}

The envelope icon can be change with the following CSS

.kleo-quick-contact-wrapper .icon-mail-alt:before {content:'e87e' !important;}

In the above example e87e changes the icon from mail to cart. You will need to identify which icon you wish to use and update the value in the above CSS. The easiest way to do this is to see a menu to use the icon you wish, right click the icon, click inspect, in the console window that opens select the :before that appears below the i and you will see the correct value appear in the CSS inspector (see screenshot). If you are unable to do this please add an icon to a menu or page and share the page with me, letting me know which icon it is, and I will send you the value.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

Attachments:

You must be logged in to view attached files.

[Author]

Posts