How To Make Adjustments To The Footer Size, Sticky Header, And Message Field On The Contact Us Page - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!
Back to the questions

How To Make Adjustments To The Footer Size, Sticky Header, And Message Field On The Contact Us Page

Paul

Paul

Template 2 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

0
Website
http://ghpllc.com
7 Answers
Order by
Oldest Newest Votes
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #100123

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;
}
0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #100030

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

0
Paul
Paul
Accepted Answer
2 years ago #100076

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?

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #100120

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

Yes, custom CSS overrides the default CSS.

0
Paul
Paul
Accepted Answer
2 years ago #100122

Listed are the login information.

0
Paul
Paul
Accepted Answer
2 years ago #100126

Perfect!! Thanks

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #100146

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.

0