Creating a fullscreen "Hero" DIV for your site header

I'm assuming that you wouldn't put it as a DIV in the Head HTML, so what exactly would I put? Below is what Michael suggested as a div if you were to put it in the body.

<div id="hero">...</div>

#hero {
    height: 100vh;
}

Just this part in a <style> tag:

<style>

#hero {
    height: 100vh !important;
}
</style>

!important in there to override any other declarations. To be safe!

Edit* The ID (#hero) corresponds to an element in your project with the same ID in the inspector.

D

DBear,

You're a life-saver! It worked! The only problem is, the content below does not push to stay at the very bottom border of the Hero element, check the URL again: 2.ideahubdesign.com

Any ideas on how I can fix this?

-Jon

Since this element is above others in the layer order, other content will naturally flow under it. It doesn't seem to obscure content for me -- it just requires additional scrolling to see the page content.

Or maybe I'm not understanding the issue -- can you send a screenshot of the problem?

@jonlangberg4896 did you have a look at my previous post¿

Yes I did see your reply, see my response that I left right after that and the rest of the thread. New issue now.

To anyone who has not read the entire thread, a fix for the original problem was provided by Dbear, but now the content below the header does not push below the header, it stays where it is so that the bottom content overlaps with the header if you stretch the browser to a certain size.

Click on the screenshot below and be sure to read the blue text within that screenshot to understand the new problem I am facing.

Hi Daniel,

A simple fix for the original thread was provided: Assigning a Div so its Position is Relative to a Different Div (static footer) http://forums.tumult.com/t/assigning-a-div-so-its-position-is-relative-to-a-different-div/4452

I created another new one because I felt the problem was different, but now there are two other threads that are similar. Do you mind keeping the one above visible but taking down the other two? Here are links to the other ones:

  1. Creating a fullscreen "Hero" DIV for your site header http://forums.tumult.com/t/creating-a-fullscreen-hero-div-for-your-site-header/4406/10

  2. Stretching Header to fit Browser Height http://forums.tumult.com/t/stretching-header-to-fit-browser-height/4388

Thank you!

Thanks for letting me know. I like the solution here so I’m going to keep it around :slight_smile:

Me too! It works like a charm: http://2.ideahubdesign.com/ http://2.ideahubdesign.com/

since it’s a overflowing div have look for overflow-touch css property and assign it -> for mobile devices

I can’t get overflow-touch working…
tried to put somthing like this in the head:

<style>
$('.HYPE_scene').not(".HYPE_element").css{
  		overflow-y: scroll;
  		-webkit-overflow-scrolling: touch;
	}
</style>{

does not work. Can someone help me?

call it on sceneload, include jquery

Just to clarify a bit more. The code is Javascript code and not CSS

so no <style></style> tags. should be<script></script> tags

D

thank you Hans-Gerd for your quick reply - but i can’t manage to get it work :disappointed_relieved:
I use your example with the the included jquery-file.

Call a new JavaScript function on sceneload with exactly this:

$('.HYPE_scene').not(".HYPE_element").css{
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

Does not work…

try:

$('.HYPE_scene').not(".HYPE_element").css('overflow-y', 'scroll');
$('.HYPE_scene').not(".HYPE_element").css('-webkit-overflow-scrolling', 'touch');

You could write it like this:

$('.HYPE_scene').not(".HYPE_element").css({
"overflow-y" : "scroll",
"-webkit-overflow-scrolling" : "touch"
});

Again this is javascript code. Look up jQuery .css if you are unsure.

Also, please look at the example Hans is giving in detail. Try not to guess as to where the code must go and how it must look. :smile:

D

Umm, me thinks something is wrong here :slight_smile: :slight_smile:

D

1 Like

Many, many thanks - now it works!
Im really sorry - i’m a absolute beginner in coding :sweat_smile:

no worries. glad you got it sorted :wink:

D