Unique/Custom Header/Footer for Page

Rebidea

Greetings

I have a single page that needs a different header and footer than my global settings for other pages/posts

Custom header/footer requirements for this page = minimal header / no sticky and no footer

* I've tried creating a custom layout but it doesn't offer a way to remove footer

* Also, the minimalist with no padding option doesn't remove any padding

https://conference.btbautoparts.com/locations-layout-test/

How can I create a custom header and remove footer for this page?

Thanks
Ward

Pablo

Hi,

Please tell me, you want to remove the footer only on this page or you want to remove it on other pages too?

The header is big because it's inheriting the basic height of logo which is set in Theme Options > Global > Logo and it's normal behavior.

Also, if you want to change it only on this page, tell me, I'll make the CSS for you.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Rebidea

Hey Pablo

Thanks for getting back to me.

Here's the page I'm working on

https://conference.btbautoparts.com/locations-layout-test/

Footer - I just want to remove footer for this page. At least the footer widget areas. I'm ok with keeping the lower footer area (copyright) if necessary.

Header - I created a different Layout for this page with a smaller logo and no sticky. Other pages use a much larger logo with sticky header (these are my global settings). I can use the same menu as global settings, but I need a much smaller logo with no sticky header (global setting includes sticky). Basically I need a smaller header area. 

Example - I created an example in Thrive Architect that shows how I'd like to get the header with minimal padding. I prefer not to use Thrive for this and use native Be Theme.

https://conference.btbautoparts.com/locations/?preview=true

Cheers

Ward

Pablo

Hi,

Please paste this CSS into the Theme Options > Custom CSS & JS > CSS

body.page-id-1788 #Content{
	margin:0 !important;
}

body.page-id-1788 #logo, body.page-id-1788 #Top_bar li a{
	height:unset !important;
	line-height:0px !important;
	padding:5px !important;
}

body.page-id-1788 .responsive-menu-toggle{
	margin-top:-70px !important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Rebidea

Awesome Pablo. I did a few small tweaks to this code and it looks like we're good to go. Thanks a million for the assist man.

Cheers

Ward