Aligning nav with logo using relative positioning

Question

My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.

What it currently looks like: http://5.9.78.201/abellant/

It will likely look odd if you're on a different screen size.

I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.

Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.

Thank you.

Answer 1

If you want to position your logo and navbar at the center of the page:: Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation

#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}

And if you want to set your logo and navigation side by side::

#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}

#logo {
float: left;
width: 50%;
}

#navigation {
float: right;
margin: 40px;
}

If you want to move your header section with page scroll. Set #header to "position:fixed".

Answer 2

So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:

#header {
    margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
    width: 960px; /* You need a width that will accomodate the logo and nav */
}

To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:

https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en

Answer 3

I solve your problem.

 .container {
     min-width: 500px;
     position: relative;
     text-align: center;
 }

#logo {
    display: inline-block;
    vertical-align: middle;
}

#navigation {
    display: inline-block;
}

If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)