Stefanie, your site has a very tall header bar. On my desktop, when the site loads, nearly half the vertical height of the screen is occupied by the header bar containing your logo and site navigator. You'll notice that there's quite a bit of truncation of the top part of your banner images as a result of the height of the header bar.
In this particular case, fixing your header bar to the top of the page would be inadvisable because you'd be requiring that visitors view your page content through a relatively narrow viewing envelope (only about 50-60% the height of the viewing screen). For websites, screen real estate is extremely valuable and you want to ensure that your page content occupies as much of the screen as possible.
Slim header bar examples
Most professionally-built websites have relatively compact header bars (that typically contain the logo and navigation menu) particularly if they are fixed to the top of the page. The CNN website, for example, has a fixed top header bar containing a compact version their logo and an adjacent navigation menu. While they do load a big header ad above the top bar, that ad scrolls out of view as you move down the page. The header bar itself locks into position at the top of the page and doesn't occupy much screen real estate thereafter. The New York Times website is a bit more elaborate, generating a secondary, slim, fixed top bar menu as you scroll down the page (again, scrolling the big header ad out of view). The key design consideration for a slim header bar is to have a relatively compact logo and, most often, this is left-justified while the navigation menu is right-justified (so that your logo and navigation menu occupy a single row in the header keeping everything trim and slim). This isn't to say that you can't have a big and bold logo as you do but the design concession is that you'll have to allow it to scroll with the page so that the site visitor can view your page content on the entire viewing screen.
How to slim down your header bar (a bit)
You can slim down the height of your header bar with a couple of modifications to your theme's css (the styling code). The two items that could give up some height without materially impacting the design aesthetic are the header bar and the navigation menu. The code modifications noted below won't fix your header bar to the top of the screen (again, I would not recommend a fixed header bar when the logo is stacked above the navigation menu) but they will address the overly padded header bar and free up some much-needed screen real estate. You can modify both of these items via the Code Editor (in the Site Editor, click on the Theme menu item in the navigation then click on "Edit HTML/CSS" in the left-hand sidebar then find your site styling code under the Styles header in the Code Editor - the file is usually main.less).
Reduce the header bar vertical padding (search for the "#header" in the css until you find the code block below and make the code modifications highlighted in red below):
#header {
text-align: center;
padding-top: 15px;
padding-bottom: 0;
}
Now reduce the navigation menu padding (search for "#navigation" in the css until you find the code block below and make the code modification highlighted in red below):
#navigation {
padding-bottom: 10px;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-size: 13px;
overflow: hidden;
white-space: nowrap;
}
How it looks
Here's how your home page looks on my 13.3" laptop screen right now (before the code modifications); notice how your fixed banner image is undesirably truncated because of the very tall header bar:
And here's how things look after the css code modifications noted above are implemented:
Stefanie, to fix your header bar and navigation to the top of the page will require a couple of additional code modifications to the desktop header/navigation elements (the mobile counterpart elements are behaving as we expect and should not be modified).
First, the header. You'll need to modify the code you previously modified:
#header {
text-align: center;
padding-top: 15px;
padding-bottom: 40px;
position: fixed;
width: 100%;
z-index: 2;
}Next, the navigation menu. Locate the "#navigation ul" element and modify it as follows:
#navigation ul {
list-style-type: none;
position: fixed;
top: 85px;
left: 0;
z-index: 2;
width: 100%;
}These changes will fix the header bar (containing your logo) and the navigation menu to the top of the page. Here's how it looks when I scroll down a bit on the home page (header bar, logo, navigation remain fixed to the top of the page). This should not affect the mobile header bar, logo, and navigation.
Thank you so much! It worked! Only thing is the G in my logo is now touching my menu titles. Where do I fix this? Screenshot attached.
Thank you Paul. Now, when I go to the header and try to click the tabs (for each page) after it takes me to one page it stops being responsive. So for example from the home page if you click on with god she rises, once you arrive at that page the clickable links in the header (meet stef, podcast, work with me etc) are no longer clickable... thoughts? I have to refresh the screen for them to work...
