Hi, I watched your video on the header builder as it’s been awhile since I’ve used it. I’m trying to use the calc (100vh - 100px) to shift the hero image under the nav bar, but I can’t seem to find the right place to plug in this function. Can you point me in the right direction? Cornerstone has gone through several updates since the video was created and I can’t find a Dimensions section for images as shown.
Hello @isdg01,
Thanks for writing in! Normally, the calc(100vh - 100px) is used in the height of your Bar element.
Hope this helps.
OK, I’ve added the calc function to the Bar below the navigation Bar and added a full width image. It doesn’t seem to push the image up until I start scrolling. The image is large enough that I was hoping the bottom of the image would be at the bottom of the screen on first view. A few new items have also appeared… It seems to be adding a space on the left and right of the image, but I have no margins or padding set. If I add Absolute Positioning with the Scrolling Option, the white space goes away but the image still doesn’t really go under the nav bar on first view as expected. Secondly, the nav, which now includes the image, is now covering a majority of the content I have on the Home page. I’m also noticing that the hero image is no longer resizing for mobile. What am I doing wrong?
Hello @isdg01,
You should be setting the maximum height of the Container and NOT the Bar element.
Bar element: height: auto
Container: max-height: calc (100vh - 100px)
Check your header now.
Thanks for plugging that into the correct location, but I’m not seeing a difference in placement of the underlying graphic. I’ll review the video again to see if I can tweak it further.
You’re welcome.
Hi again, I have the headers looking like I want them now. Unfortunately, when I look at my responsive layouts, the main header images are not resizing as they should. I’ve also lost my hamburger navigation on the smallest viewport. Do I need to build a separate header for small sizes or is there a small adjustment I can make to bring it back into view?
Hello @isdg01,
You can do the following:
1.) Add a gutter width calc(100% - 2em) on smaller screen:
2.) Remove the left and right margins of your containers by setting it to 0 in smaller screens:
Kindly let us know how it goes.
Hi Ruenel,
That worked great in getting the nav back on the smaller screens. Unfortunately, my hero image is still not showing at full width on the small screens. It’s just showing a small slice that leaves out a lot of context. It is showing more of the image on each larger size screen, but not the entire image. How do I accommodate for that?
Appreciate all of the help!
Dawn
Hello Dawn,
Do you want to display the whole image on smaller screens regardless of its height? Or do you want to maintain the current height but center the image on display?
Thanks.
I’d like to show as much of the image as possible, but I know that would be on the smaller side. If it clips on the sides some to maintain some height, I could live with that. But definitely centered would be better than it is now.
Hey Dawn,
Could you check the tweak header demo I have added in the secure note below?
- See the secure note below.
On this demo, the maximum width of the Bar element is set to 100vw;
The Flexbox Horizontal alignment is set to Center on smaller screens:
And in the Container settings, it is aligned to the Center as well;
Hope this helps.
Thank you, Ruenel. I’m looking forward to getting all of my headers working properly on small screens. Appreciate the help!
Got it! All headers are exactly what I’m looking for now 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.