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
Make the responsive grid follow an historical order
by Smart Kid from Mýkonos Mon Oct 16, 2017 1:43 pm
3 Replies
137 Views
by Smart Kid from Mýkonos
Tue Oct 17, 2017 8:12 am
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
1027 Views
by Luke from Meansville
Wed Jan 25, 2017 10:58 pm
How do I make an existing slider mobile responsive?
by Katherine from Hertford Wed Jan 25, 2017 2:27 pm
2 Replies
584 Views
by Katherine from Hertford
Wed Feb 01, 2017 1:57 pm
Why can't/how can I get text to wrap left/right around my adsense responsive ad code?
by John from Midway Park Sat Aug 05, 2017 1:48 pm
2 Replies
329 Views
by John from Midway Park
Sun Aug 06, 2017 2:21 pm
Need coding to remove navbar and side bar from Cityscape template
by Stonehouse from Marshfield Sun Feb 26, 2017 7:49 pm
3 Replies
875 Views
by Juri from plainlight.com
Sun Feb 26, 2017 9:30 pm

Users browsing this forum: No registered users and 1 guest