How do I add a white space between header and menu?

[rick4himParticipant Post count: 69]

I’d like to create a small gap in between the black header background and the menu area on this site. Any thoughts on how to do this?

 

Thanks!

[SoZoModerator Post count: 1573]

You could add a bottom margin to the #heade rule, e.g.

#header {
min-height: 87px;
overflow: hidden;
margin-bottom: 10px;
}

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[rick4himParticipant Post count: 69]

Thanks so much! (By the way, I sent you an email.)

 

Also someone mentioned I should ”

“give the navigation div a top margin

margin:10px 0 0 0;”

Is this just a different way to do the same thing? Is one solution better than another?

 

Thanks!

[SoZoModerator Post count: 1573]

Ya, you’d end up with the same effect. Doesn’t matter which way you go.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[rick4himParticipant Post count: 69]

Cool, thanks!

 

2 follow up questions: after I do that, how can I get a little more black box around my logo / serach box so the logo has a little room to breath…if that makes sense…

and how can I correct my search box from getting cut off?

[SoZoModerator Post count: 1573]

You’d need to edit the image that you are uploading and make your actual logo smaller on the canvas. Or increase the height of #header in the style sheet as well as the dimensions of the custom header function in functions.php and use increase the canvas of your image accordingly.

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
	'flex-height'	=> true,
	'height'		=> 87,
	'width'			=> 1080
) );

For the search field you could add a right margin to #header .search-form, e.g.

#header .search-form {
float: right;
margin-top: 16px;
margin-top: 1rem;
width: 100%;
margin-right: 16px;
margin-right: 1rem;
}

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[rick4himParticipant Post count: 69]

Thanks! What about just adding some padding around the header?

[SoZoModerator Post count: 1573]

You could add padding to #header but you’d need to decrease the width accordingly otherwise it throws the header out past the margin of the page elements and I can’t see where they are setting the width. I’ll have to play with this theme more. It’s coded a lot differently than their past themes have been coded. And before you spend too much time messing with this theme we should come up with a design and I just sent you an email that should get us rolling.

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[Author]

Posts