business identity: disable hero section
-
Is there a possibility to disable the hero section in business identity theme?
In other words, I want to display an auto scaled image (without any text on it) on the front page just as here for example:
https://kalscheuer.com/alumni/
It seems that BI’s hero section scales the image depending on the text volume you put in.
Thank you for your help in advance!
The blog I need help with is: (visible only to logged in users)
-
-
Hi @hanshege,
It seems that BI’s hero section scales the image depending on the text volume you put in.
This is a bit challenging to get it to look exactly the same, but give this a try. The image within is a bit different, but see what you think with this. The call to action button is below the image, which I can move up into the image area, but I’m not sure if you want that visible on your main page or if you want to hide it. If you wish to keep it, let me know where you want it and I’ll give you the code to move it where you want it.
.home .hero-wrapper { max-height: 370px !important; visibility: hidden; } .home #hero { max-height: 570px } -
Thank you very much. This is definetly an improvement! (I do not see any call to action button (?), but that is fine with me.
But: Still I would like to display the photo in its native dimension. Plus, the hero section (= photo’s frame) is not exactly the same size as the other title pictures’ dimensions.
Am I understandable? (being not native English;)
-
Just checked it on mobile device. There it is even a more weird scaling. Here my deepest wish would be a native photo display, as well.
-
How about replacing what Richard gave you with this adjusted version:
.home .hero-wrapper { max-height:370px !important; visibility:hidden; } .home #hero { background-size: contain; } #hero { background-color: #fff; } @media screen and ( min-width: 640px ) { .home #hero { height: 620px; } }As he mentioned, it’s tricky to get it exactly the same on all screens, but this might come a bit closer.
-
Thank you very much, this comes quite really close.
On mobile device there is now a quite big (white) space between the photo and the text under and above it.
Just compare
kalscheuer.com with kalscheuer.com/ueber
on mobile device.
Is there any additional solution possible?
@Richard: You mentioned the possibility to remove the call to action button. I would appreaciate the additional code.
-
Maybe in other words: I want the top of the front page to look the exact same as any other following page.
But I want to keep all the other features for the front page provided by BI. (That is why – in the first place – I was thinking/ suggesting to simply remove or disable the “hero” part…)
-
(That is why – in the first place – I was thinking/ suggesting to simply remove or disable the “hero” part…)
Sure – would you like to do that instead of trying to modify the image?
This would hide the hero area on the homepage, including the call-to-action button:
.home #hero { display: none; } .home .features-title { margin-top: 40px; }You mentioned the possibility to remove the call to action button. I would appreaciate the additional code.
If you want to keep the hero area, you can remove just the CTA button with this:
.call-to-action { display: none; }On mobile device there is now a quite big (white) space between the photo and the text under and above it.
Do you prefer to hide the entire area (as with the code above) or would you like me to look at adjusting this?
-
Thank you very much. Hiding the hero area is quite fine. But now the front page does not display the “normal” picture on top.
I just thought it might be the better workaround: Hiding hero seems to disable the possibility of publishing the picture on top?
-
And keeping the hero area with this:
.home .hero-wrapper {
max-height:370px !important;
visibility:hidden;
}
.home #hero {
background-size: contain;
}
#hero {
background-color: #fff;
}
@media screen and ( min-width: 640px ) {
.home #hero {
height: 620px;
}
}adding this to remove the CTA button:
.call-to-action {
display: none;
}does not work, maybe the combination of both?
-
Give this a try to hide the CTA button:
.home #page .features .call-to-action { display: none; }On mobile device there is now a quite big (white) space between the photo and the text under and above it.
That’s due to the
background-size: contain;line on the hero element – I don’t see a way around it. Here are a few options:- leave the default image display as is and remove the custom CSS
- hide the hero area on the homepage (which includes the image) – perhaps only on smaller screens
- live with the gap on smaller screens
-
Thank you very much for your help so far!
I have another suggestion for solving the problem:
– disable the hero area (as provided by you)
– activate the header image, display picture content from kalscheuer.com/ueber
– tell CSS to only display the header image on front page?
– tell CSS to switch the position of header image and primary menue?
Voilà, my solution?
-
– tell CSS to only display the header image on front page?
This would be simple to do:
/* Hide the custom header everywhere except the homepage */ body:not(.home) #header-image { display: none; }– tell CSS to switch the position of header image and primary menue?
This would be quite a bit more complex to do, but it might be possible.
If you’d like to go ahead, please first activate a custom header, add the custom CSS above, and hide the hero area with the CSS I gave you earlier.
Once you’ve done all that, we can then work on trying to switch the positions of all the elements (you can’t just swap the menu and header – all positions needs to be set) using an advanced CSS technique called flexbox.
-
-
Hi @hanshege, as @kathrynwp mentions, this is a bit complex, but I’m working on it for you right now. Just wanted to let you know. :)
-
-
Ok, sorry this took so long. My preferred way of doing this sort of thing was not working, so I had to go back to an older way of doing it. Add this to your custom CSS and then make sure and check it in mobile and tablet if you can. In my testing, it is working everywhere, but it’s good to check. on your devices.
.home #page { position: relative; } .home #header-image { margin-top: 90px; } .home #masthead { position: absolute; top: -90px; } -
Wow, awesome! Thank you!
Two little things I need to mentioned:
– Now the overall framing (small grey line, small shadow) on top and on the changed area left/right (top) is gone. Maybe one can completly delete it? On all pages? (looks much better without it) (regarding desktop/ tablet) “Home” page “jumps” a little when clicking to another sub page… (maybe because of the missing framing?)
– on mobile device (iphone 6) there is quite a bigger “jump”, plus (or because) a light grey area on top of the picture on “Home” page, only when vertically alligned.
-
We can add the box shadow back in on the menu area by replacing the last two rules I gave you with this.
.home #header-image { margin-top:100px; } .home #masthead { position:absolute; top:-85px; -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,.2); box-shadow: 0 0 3px 1px rgba(0,0,0,.2); }If you wish to get rid of the box shadow on the edges everywhere, then replace the code I originally gave you with this.
.home #page { position:relative; } .home #header-image { margin-top:100px; } .home #masthead { position:absolute; top:-85px; } #page { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }This might also take care of the grey above the image on mobiles.
As far as the jumpiness, I don’t know that there is a way for us to fix that with CSS. I’m not seeing anything that could account for this. Sometimes when we move elements using this method, things like that can happen.
- The topic ‘business identity: disable hero section’ is closed to new replies.
WordPress.com Forums 