Need HTML? Want to use CSS (cascading style sheets)? Need a touch of help with Javascript, Java, or other coding language? Whether through SBI!'s BlockBuilder 2 or your own HTML Editor, post here. Push the envelope. Learn basics (ex., how to format your text, add tables) or go as "out there" as you like. Problems? Questions? Help and be helped.

Moderators: Laura from Chautauqua, Will from Los Ojos

#1369246 by Nicola from New York
Tue Apr 18, 2017 6:36 pm
Hi all,
I have just updated my website to a new responsive template and am hoping someone can help me out with the HTML/CSS code needed to make the header display only on the home page. I have received several emails from disgruntled customers today about needing to scroll down on every page to get to the content.

Any help would be greatly appreciated.

Nicola
#1369256 by Juri from plainlight.com
Tue Apr 18, 2017 9:59 pm
Hi Nicola,

You'll need to make changes in two places.

The first has to be made in Site Designer to override your default template settings on all pages. The following will have to be placed in the Custom CSS section (click on Add Custom CSS button to edit it):

Code: Select all/* removes header image */
#PageWrapper #Header .Liner, html.mobile #PageWrapper #Header .Liner {
min-height: 0;
}
#Header .Liner {
padding-top: 58px;
}
#PageWrapper #Header .Tagline, html.mobile #PageWrapper #Header .Tagline {
display: none;
}

Don't forget to Save Style! Check how your pages look now. If anything doesn't work as intended, return to Site Designer, remove your custom changes, and Save Style again. Skip the next step -- this will leave you with the previous setup.

If the header disappeared, to restore it on your Homepage, load your index.html in BlockBuilder, click on Head button and add the following to This Page Only section:

Code: Select all<style type="text/css">
/* restores header image */
#PageWrapper #Header .Liner, html.mobile #PageWrapper #Header .Liner {
min-height: 488px;
}
#Header .Liner {
padding-top: 100px;
}
#PageWrapper #Header .Tagline, html.mobile #PageWrapper #Header .Tagline {
display: initial;
}
</style>

This can be tested in Preview without building the page. If it looks OK, Build It! If not, don't build the page, and possibly remove the changes from Site Designer as well.

Good luck!

Kind regards,
J.

PS In order not to load the header image on all pages, another change should be done in Site Designer and in index.html. However, this will make changing the image quite cumbersome. If you would like to do it, please reply in this thread.
Similar Topics Statistics Last post
How can I make this code responsive?
by Jacki from Macleod Tue Aug 02, 2016 10:41 pm
7 Replies
364 Views
by Jacki from Macleod
Wed Aug 03, 2016 5:41 pm
Mobile header image not displaying
by Shirley from Norwood Sun Oct 23, 2016 11:11 am
3 Replies
377 Views
by Debs from barkinista.com
Thu Oct 27, 2016 1:36 pm
How do I make an existing slider mobile responsive?
by Katherine from Hertford Wed Jan 25, 2017 2:27 pm
2 Replies
387 Views
by Katherine from Hertford
Wed Feb 01, 2017 1:57 pm
Help making page hearder, footer, etc., disappear at print time using this code
by Luke from Meansville Mon Jan 23, 2017 6:58 pm
3 Replies
678 Views
by Luke from Meansville
Wed Jan 25, 2017 10:58 pm
Help With Code For HTML Header
by Kim from New Farm Sat Aug 20, 2016 12:34 am
9 Replies
506 Views
by David from Gowanda
Fri Sep 02, 2016 9:15 am

Users browsing this forum: No registered users and 2 guests