Assistance adding a div at top and centering a menu

Hi there everyone!

I’m trying to modify a CSS template for a friend and I’m having an issue figuring out what’s causing my issue.

You can see what I have as as starting point here: http://bhmbackflow.com

I would like to add a body colored div above the black stripe and I would like to center the menu both vertically and horizontally in the black stripe itself. Here’s a shop of my intentions:


I’ve tried adding a div above but it’s just messing up the menu and not pushing the black stripe down at all. Could someone help me with what I need to do to get it working as hoped?

Thanks for your time!

Hi,

You set the navigation to inline and inline elements won;t take dimensions or margins. Change it to inline-block and the margin will take effect. Then add text-align:center to the parent (.shell) to center the inline menu.

e.g.

.shell{text-align:center}
#navigation {
float:none;
display:inline-block;
vertical-align:middle;
margin:27px 0 0;
}

Another method would be to just set the navigation to display:table and use margin auto to center it…

e.g.

#header .shell{
    height: 86px;
    padding: 1px 0;
}

#navigation {
float:none;
display:table;
margin:27px auto 0;
}

The padding on the shell is to stop margin-collapse.

Do you want content in this section? If not just add a margin-top to the header.

I think I’ve implemented your suggestion incorrectly as no changes showed on a forced refresh. My .shell and #navigation now look like:

.shell {
	width:980px;
	margin:0 auto;
	text-align:center;
}
#navigation {
	float:none;
	display:inline-block;
	vertical-align:middle;
	margin-top:27px 0 0;
}

but no visual change occurred to the page.

Do you want content in this section? If not just add a margin-top to the header.

I would like to add content in the div above.

That’s not the same as what Paul posted. No display table.

Then add a div above #header and add content to it.

That’s not true as the menu is now centred horizontally.

You are losing the top margin because this is not valid and not what I posted::slight_smile:

margin-top:27px 0 0;

It should be:

margin:27px 0 0;

Thank you both for your help. I think I’ve managed to correct the mistakes I’ve made during implementation and have finally followed your instructions :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.