Big Brother Header

tempestadore · Member · Aug 7, 2014 at 10:27 pm
Copy link

Add topic to favorites
Hi there, I am completely new to CSS so I have no idea what I’m doing. Is it possible to make my header image larger (the theme setting is far too small) AND not have the main menu in the middle of it?

The blog I need help with is: (visible only to logged in users)
eurello · Staff · Aug 7, 2014 at 10:52 pm
Copy link
Hi there,

I see you’ve already added a height parameter to your header, so I assume you’ve got it to the size you want. To move your menu down, give this a try:
```
@media screen and (min-width: 900px) {
.main-navigation.has-header {
	position: absolute;
	top: 500px;
}

.primary {
	margin-top: 50px;
}

.secondary {
	margin-top: 50px;
}
}
```
This fixes your menu at the bottom of your current header image, and it bumps your main and sidebar content areas down a bit so the menu doesn’t overlap the tops of them. If you change your header size, you’ll need to adjust the top: 500px; value as well.

Also, the media query bit specifies that this change should only be made in screen sizes 900px or wider. This is because doing that to the menu makes it look all funky in small screens, so for mobile, I left it as it was.

What do you think?

Also, we’ve got a great series on the Daily Post teaching our users basic CSS. You should check these out! They’re a big help with learning:

http://dailypost.wordpress.com/2013/06/21/css-intro/
https://dailypost.wordpress.com/2013/07/25/css-selectors/

Intro to CSS: Previewing Changes with the Matched Rule Pane
tempestadore · Member · Aug 7, 2014 at 10:56 pm
Copy link
Ah! Yes that’s much better — only now my header is cut off on the right side (actually it was always like that).
tempestadore · Member · Aug 7, 2014 at 10:59 pm
Copy link
I’d actually kind of prefer the whole header to be a bit smaller, but I just can’t figure out how to do that.
eurello · Staff · Aug 7, 2014 at 11:01 pm
Copy link
Ah. Change that #masthead height in your CSS to 479px and then change the top value in the CSS I gave you to from 500 to 479px as well — does that make everything show up properly?
tempestadore · Member · Aug 7, 2014 at 11:06 pm
Copy link
I actually went a little smaller in order for it not to be cut off, BUT now the writing on the bottom is cut off. Should I go edit the photo to another size or something?
eurello · Staff · Aug 7, 2014 at 11:15 pm
Copy link
Yep, it’d be best if you set the masthead area to the size you want, and then resize your image to those exact dimensions and then upload it again.
tempestadore · Member · Aug 7, 2014 at 11:17 pm
Copy link
Okay great. One last thing: is there a way to make it so when I click on the header, it takes me “home” like by default? I noticed that stopped when I started messing around with CSS
tempestadore · Member · Aug 7, 2014 at 11:27 pm
Copy link
I lied. Another thing — now the photo is the perfect size, BUT it’s not centered. It starts all the way to the left and then there’s empty space on the right. Is there a way to change this? I don’t mind empty space, so long as it’s on both sides.
tempestadore · Member · Aug 7, 2014 at 11:29 pm
Copy link
I got the spacing by changing the margin, so nevermind on that!
eurello · Staff · Aug 8, 2014 at 7:08 pm
Copy link
One last thing: is there a way to make it so when I click on the header, it takes me “home” like by default? I noticed that stopped when I started messing around with CSS

Hi there,

The header image didn’t link to the homepage; rather, the site title does. Since your site title is hidden (because you incorporated it into your header image), that link is gone. There isn’t any way to make the banner link to the homepage using CSS.

But you can add a Home button to your Custom Menu. :)
eurello · Staff · Aug 8, 2014 at 7:11 pm
Copy link
One more thing — the margin you added to the masthead area, this bit:
```
#masthead {
	height: 400px;
	width: 1200px;
	margin-left: 75px;
}
```
If you use the mobile tools in the Customizer, you’ll see that that bumps your menu offscreen in smaller screen sizes. You can fix this with a media query, such as:
```
@media screen and (min-width: 1200px) {
#masthead {
	height: 400px;
	width: 1200px;
	margin-left: 75px;
}
}
```
You can read more about testing for mobile and adding media queries here:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
okreativ · Member · Sep 11, 2014 at 11:34 pm
Copy link
I’ve tested all of the suggestions above and my header image is still getting cut off. (blog.chne.org).

The other question I have is how can I remove the breadcrumbs?

Thank you in advance!
okreativ · Member · Sep 12, 2014 at 1:03 am
Copy link
And I also would like to know how to turn the menu bar a solid color vs. the transparent blue…

Please help!
thesacredpath · Member · Sep 12, 2014 at 3:53 pm
Copy link
Hi @okreativ, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help in the volunteer-based WordPress.org Themes and Templates forum. When you post over there, tag your post with wpcom-theme so that we can find it and help you out.

For general questions on self-hosted WordPress.org installations, visit http://wordpress.org/support/.

The differences between WordPress.com and WordPress.org.

I did take a look at your site, and offer the following to get you started. I’m not sure what other changes you may have made to things, but this should get things closer for you.
```
@media screen and (max-width: 899px) {
  .main-navigation {
    top: 70px;
  }
}
.breadcrumbs {
  padding-top: 150px;
}
.header-image {
  min-height: 200px
}
```

No items found.