Twenty Twelve nav bar

curiousemily · Member · Dec 22, 2014 at 10:13 pm
Copy link

Add topic to favorites
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!
timethief · Member · Dec 22, 2014 at 10:16 pm
Copy link
I don’t witness and “e massive white space between nav bar and content” using FF34, Chrome or IE11.
hallluke · Member · Dec 22, 2014 at 10:17 pm
Copy link
Can you post the URL of the blog in question? The site linked by your forum username is using a different theme.
curiousemily · Member · Dec 22, 2014 at 10:35 pm
Copy link
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.
thesacredpath · Member · Dec 23, 2014 at 3:38 am
Copy link
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;
}
```
curiousemily · Member · Dec 23, 2014 at 10:25 am
Copy link
Aah! That works but the gap at the top is now huge!
curiousemily · Member · Dec 23, 2014 at 2:20 pm
Copy link
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.
thesacredpath · Member · Dec 23, 2014 at 6:40 pm
Copy link
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;
curiousemily · Member · Dec 24, 2014 at 9:16 am
Copy link
Aaah, thank you, much cleaner!
thesacredpath · Member · Dec 26, 2014 at 6:02 pm
Copy link
You are welcome.

No items found.