Header menu centered and logo float to left?

I am trying to design a header menu and I want the menu centered in the middle of the header, and the logo

Assuming that I only need this to work at viewports > 991ishpx (at which point there is a completely separate header and the “desktop” one is hidden), what’s the best way to do this?

Should I just float:left the container that houses the logo?

It all depends on what type of centring you mean? :slight_smile:

Centred in relation to the viewport irrespective of content on either side of the menu? Or centred in the space between the logo and the end of the line (which would not be central in the viewport).

If you want an item perfectly centred in the viewport (or the middle of your page wrapper) then you cannot have items floated to the left or right of the menu as that would offset the natural centring. The items to the side of the menu would need to be removed from the flow or you would need to allocate an even amount of space to either side of the menu to account for the logo width.

CSS can only centre in the space available.

These days you would usually use flexbox rather than floats but the same conditions mentioned above will apply.

Here’s an old example using flexbox to allocate equal space left and right of a centred menu.

I’m not a fan of duplicate content unless absolutely necessary and it is best to try and utilise what you have rather than creating separate items. Sometimes its not possible if the design is too complicated but a lot of the time you can use the same elements to achieve the smaller screen design especially if you wrap them in the hamburger menu approach.

I want it centered in the viewport, regardless of the content in the content in the other column(s).

As for duplicate content, there is no feasible way for me to avoid this. This is a Wordpress theme that handles mobile/desktop headers as such.

For modern browsers you can use a grid approach like this (assuming the content at the edges is not wider than the menu).

I think its self explanatory but if you need help then just ask :slight_smile: