Twenty Twelve nav bar
-
Followed the instructions here and they work great, but I can’t work out how to reduce the massive white space between nav bar and content.
Any help would be great!
-
I don’t witness and “e massive white space between nav bar and content” using FF34, Chrome or IE11.
-
Can you post the URL of the blog in question? The site linked by your forum username is using a different theme.
-
URL is http://www.curious-london.co.uk. It just had a mad crash and deleted the last version of CSS so have redone it. It looks how I want it to, but the menu links aren’t clickable! It’s like they’re hidden beneath the header.
-
The link for your header is overlaying the menu. Add a z-index of 10 to .main-navigation like this.
.main-navigation { margin-top: 236px; z-index: 10; } -
-
And the tablet and mobile versions are really screwed up too. :/ How hard can it be just to have a header above a centralised menu!? I think I’ve possibly coded the whole thing in a messy way.
-
There are a number of things in your CSS that are interfering with each other and causing at least some of the issues (one that I think you added after mine above that is causing the majority of the whitespace at the top). Let’s take these one at a time here. remove these three rules in your CSS.
.main-navigation { position: relative; } .main-navigation { margin-top: 236px; z-index: 10; } .main-navigation { border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: absolute; top: 275px; width: 100%; }and replace them with this:
.main-navigation { border-bottom: 1px solid rgba(0, 0, 0, 0.1); position: absolute; width: 100%; margin-top: 22%; z-index: 10; } @media screen and (max-width: 599px) { .main-navigation { margin-top: 29%; } }The last rule above, the media query, adjusts the location of the menu after it changes to the minified menu for tablets and phones so it doesn’t override your site description text.
Second adjustment: add the following to the img.header-image rule you already have in your CSS.
margin-top: 0; -
-
- The topic ‘Twenty Twelve nav bar’ is closed to new replies.