Solved Templates

How to make adjustments to the footer size, sticky header, and message field on the contact us page

Asked by Paul 3 years ago Last activity 3 years ago

I have three questions to address using the Luxyort template.

Footer size
I would like to decrease the size of the footer section. I know how use on SP Page Builder to make the adjustments to the margins (via STYLE) but how to you make the adjustments to the footer? I would like to narrow the top and bottom sizes.

Contact Us
When I choose the name and email section, a line would drop down so a user can input their information without overwriting the fields. When I go to the message section, it doesn't drop down, thus the message file is stationary. How can I fix that?

Sticky Header
How can I make the sticky header shows dark blue as shown on the demo?

Thanks,
Paul

Accepted answer

Marked as the solution
Ofi Khan Staff
3 years ago

Please use this CSS to Template Options -> Custom Code -> Custom CSS

#sp-header.header-sticky {
    background-color: #000 !important;
}
#sp-header.header-sticky .sp-megamenu-parent>li>a{
    color: #fff !important;
}

6 more replies

Oldest first Newest first Most helpful
Ofi Khan Staff
3 years ago

Hello Paul

Footer Size

Please use this CSS to Template Options -> Custom Code -> Custom CSS

#sp-bottom{
    padding: 0px !important;
}

This will remove the padding. Please adjust it according to your need.

Contact Us

Please use this CSS to Template Options -> Custom Code -> Custom JavaScript

jQuery(function($) {
    $(".sppb-form-group textarea, .form-group textarea").on("focus", function() {
        if ($(this).prev()[0].localName === "label") {
            $(this).prev().addClass("focused");
        }
        if ($(this).prev()[0].localName === "span") {
            $(this).parent().parent().prev().addClass("focused");
        }
    });
    $(".sppb-form-group textarea, .form-group textarea").on("blur", function(e) {
        if ($(this).val().length === 0) {
            if ($(this).prev()[0].localName === "label") {
                $(this).prev().removeClass("focused");
            }
            if ($(this).prev()[0].localName === "span") {
                $(this).parent().parent().prev().removeClass("focused");
            }
        }
    });
});

Sticky Header

Please use this CSS to Template Options -> Custom Code -> Custom CSS

.home-minimal #sp-header.header-sticky {
    background-color: #001830 !important;
    box-shadow: none !important;
}

Best regards

Paul Asked this
3 years ago

Thank you for your quick responses. The footer size and contact us sections worked. The sticky header doesn't. I would like the sticky header to be black when scrolling through the pages with the text being white. Does the CSS code overwrite the settings?

Ofi Khan Staff
3 years ago

Please share your site URL. I will help you with sticky header.

Yes, custom CSS overrides the default CSS.

Paul Asked this
3 years ago

Listed are the login information.

Paul Asked this
3 years ago

Perfect!! Thanks

Ofi Khan Staff
3 years ago

You are welcome 😊

I have a humble request. It would be very kind of you if you can manage some moment to give us feedback on 

  1. Joomla Extension Directory
  2. TrustPilot

This will inspire us to improve.

Log in to reply.