Header content - can I display from top? Re-framing & getting cut off

Hi, new user here. Hopefully this is an okay place to ask this, or maybe it has been covered elsewhere. Getting back into web stuff. Maybe/hopefully this is an easy fix or tweak.

I’m working with the Shapely theme for our Wordpress site, and logo content in the header (with the parallax background) is seemingly framing contents from the middle of the field rather than the top, and starts cutting top content off in vertically shorter browser windows. Maybe that’s as intended?
As seen here in a shorter browser window, starting at the top of the page:
https://drive.google.com/file/d/0B0Iqvd65E7FdYThadThwa1FuQ1U/view?usp=sharing
And a bit taller browser window on the same page, showing more
https://drive.google.com/file/d/0B0Iqvd65E7FdLTdwX3BLbTE4aW8/view?usp=sharing
Is there an easy way to make it so it shows all of the header content from the top, and doesn’t cut off?

Thanks super much for help in advance!
Cheers,
Leif

Hello there,

I hope you are doing well today.

What was the screen size that you were using? As it stands, I tested the mobile versions of the site and they worked correctly but you may be using a more specific size for the window.

Best Regards,
Support

Hello there,

I hope you are doing well today.

What was the screen size that you were using? As it stands, I tested the mobile versions of the site and they worked correctly but you may be using a more specific size for the window.

Best Regards,
Support

Thank you very much for the response! These screencaps are on PC, in chrome running on a monitor in 1680x1050. I scaled the windows smaller in those shots so you can see the dynamic of how it scales in smaller and smaller windows. Seemingly scaling from the middle of the header, and cuts more and more off the top… rather than simply displaying all content in the header -from- the top. Does that make sense?
Is there an easy tag to place somewhere to fix that?
Maybe the Parallax dynamic is affecting things?

BrightStarBrewing.com is the site we’re working on. You can see the dynamics in real time on PC - looking at the top of the page while scaling the browser window shorter vertically.

Please let me know if anyone has any tips and/or further questions.

Hi,

Please go to Dashboard -> Appearance -> Customize -> Additional CSS, and add this Custom CSS.

.top-parallax-section .mb32 > img {
    margin-top: 70px;
}

Let us know,

Thanks,
laranz.

Hi Iaranz… thank you very much for the code. I tried it out in there. No noticeable effect, that I could tell.
What is it intended to do precisely?
It still seems to center on the middle of the header content based on the window size… and cut off the top of the content more and more as one scales the window smaller. This seems pretty standard in other default implementations of the theme I’ve seen as well. I’m just hoping there’s a way to tweak it to make it just display the header content from the top, rather than the middle. While still having the parallax. Screenshots attached. Using the code on the live site currently, one can see the effect.
Thanks again… I’m hoping this theme will work for our purposes. Any suggestions greatly appreciated.

Hi,

Sorry for a late response, can you tell us exactly where this happens? Can you shoot a screen video about the problem using http://monosnap.com/ or any of your fav tool… For me this is how it looks in mobile responsive mode http://take.ms/8WfA5

Let us know,

Thanks,
laranz.

Hi, no worries. Thank you very much for the help! And thanks for the screenshot. I’m glad it looks like that for you on mobile.

In this case the main problem seems to be the centering effect with the header section on desktop. My friend who has a smaller resolution on her laptop said the top of the logo was cutting off right off the bat.

Here’s an attached screen capture movie of the effect on Chrome. Scaling the window smaller. And as one can see, this is still at the very top of the page. The content begins to move up out of view.
(& Thanks for the tip on using monosnap too… handy little tool : ) )

I’m hoping there’s some code I can add in, or other way I can keep it from happening here. To keep the content displaying from the top of the header, rather than re-centering like this.

Please let me know.
Cheers,
Leif

Hi,

It is not the right way to test the responsiveness, please test it like this: https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

Let us know,

Thanks,
laranz.

Thanks laranz, I tried that the best I could. In responsive mode. Here’s another video from chrome using those developer tools. As one can see, since it’s re-centering and not displaying the content from the top, the content in the header area begins to get cut off as the window is sized smaller. Obviously, most people don’t usually use windows or resolutions that small, but we ran into at least one person who does, and it’d be nice to have it simply display the whole logo for people like them.
Let me know if there’s anything else I can provide.

Cheers,
Leif

Hi,

Please check the responsiveness like this: Don’t shrink the site vertically, to check responsiveness you should shring horizontally like this video http://take.ms/d667Oo these are the breakpoints you need to check. From my checking, you site loads just fine in all the responsive devices.

Let us know,

Thanks,
laranz.