For the past few weeks, I have been working on creating a new website. The progress is looking good overall, but there is one issue that I have encountered.
When viewing my website in a browser window smaller than the actual webpage size, the top menubar of the page gets cut off. While I can scroll up and down the page, the top part remains unreachable.
I suspect this problem is related to the 'center' code I used for vertical alignment. Is there a solution that allows me to keep my webpage centered while still being able to access the entire page when using a small window?
I managed to resolve the issue in Chrome mobile by utilizing a 'viewport' meta tag. However, desktop browsers like IE, Safari, and Chrome continue to have trouble displaying the top bar of my webpage in small windows.
If you'd like to see the issue firsthand, you can visit my website at: test.themissingsticks.com
When testing it out, try viewing the site in full-screen mode (with a resolution above 800px height) and then again with a window less than 600px in height. You will notice that the grey menubar at the top of my website does not show, even when attempting to scroll upwards.
The website is currently centered using the following CSS:
top: 50%;
margin-top: -340px;
left: 50%;
margin-left: -513px;
The page has a width of 1026px and a height of 680px.
Your assistance would be greatly appreciated. Thank you in advance!