I lost almost 2 weeks aligning it vertically and Horizontally

Live Link → Click Here.

Issue #1 → when you will browse the above link in the browser you will find a div by the name of header-menu class. If we delete this div then the logo migrates towards the center, which is not a good sign of a good HTML. we are not using float due to many possible consequences.

Issue #2 → That Hamburger menu almost 99% comes in vertically in the middle if we put this →

  margin: 0;
  padding: 0;

That means giving 0 padding and margin to the entire HTML.

but that little bit distorts the whole padding/margin of the entire HTML.

Is there any solution to align that hamburger menu in the vertical center? we have to align it in such a way that irrespective of the logo height and width the hamburger should always come in the vertical middle just like the logon and the header menu.

with the hamburger menu you could try to align it vertically in the following way, but it needs to have absolute position:

#nav-icon1 {
position : absolute;
top : 50%;
margin-top : -22.5px; /*half of the height of the element*/
/* You also have to set relative position to your header for the above to work. If you don't the element would be absolutely positioned relative to the next element up the tree that has a position declared, probably will just be the entire page*/
#site-header {
position : relative;
1 Like

In what scenario would you delete your nav menu? Regardless I notice you are using table display types in your header, and table-cell in header items. This may account for the repositioning of your logo when you remove the nav menu. Table displays align contents in rows, so it would make sense that it would attempt to readjust the children when one is removed. What you want to do is set them as either inline-blocks, or blocks with fixed widths. Float should not be necessary unless you’re using it in an article with images.

I’m seeing the typical mis-use of both display properties and floats in just the header.

The right tool for your situation seems to be flexbox. I’d recommend looking up flexbox.

1 Like

Putting margin-top = -22.5px; is again rigidly fixing things. Imagine what happens if the logo is large, very large infact? In that I guess that their vertical alignment of middle will get distorted.

This topic is an extended discussion of the earlier topic that I posted yesterday Here.

As I advised on the thread link that I gave above. I am successfully able to apply the Flexbox on the Footer.

At the footer I was successfully able to apply the Flexbox as you can in the live version of my HTML.

I am struggling with the header section.

.site-header → I have set display: flex;

	flex-direction: row;

I have used flex-direction property on the inner elements, but that is not aligning the items in one row. where I am doing the mistake?

Live Link

I also tried this property →
align-items: flex-start;

still nothing worked.

This thread should really be merged with the other thread as they are the same topic. You don’t even have a link to the layout in this thread so everyone has to look at the other thread anyway.

Flex direction applies to the main flex container and not the children and its default is row anyway. However you don’t have a flex container anyway as this rule is in effect.

.site-header {
	overflow: hidden;
	display: table;

If you change the site header rule to display:flex and add justify-content:space-between you will have a better starting point.

Then remove the default margins and padding from the ul inside nav , and then remove the 195px padding right from the header menu, and then remove the absolute positioning from the search item and things will start to line up nicely.

Your header will then start to look like this:

I believe I already gave you a display:table version that did something similar but you seem to have corrupted it.

I would not have a separate menu for your hamburger and you don’t want the hamburger visible while the main menu is showing unless of a course it is an extra menu. Usually you collapse the existing menu into the hamburger width media queries and css. Duplicating things is essentially bad unless you have no choice.

1 Like

Threads merged.

3 posts were merged into an existing topic: I lost almost 2 weeks aligning it vertically and Horizontally

Yes I remember you gave me and then only i was able to implement the vertical-align property. I think If I corrupted then i would have corrupted it Unintentionally.

Note in my last post if you don’t want the logo to move towards the middle as the screen gets larger then remove the justify-content:space-between and instead add margin-left auto to header-menu which will push the menu block to the right and leave the logo on the left.

Yes, You are right sir everything seems to be working now, only search box is creating issues it is going down. Looks like some properties are messing up.

What did I say about removing the absolute positioning and the 195px padding right?

Find those elements and rectify.

Yes I did found them sir and eliminated, but the problem after removing absolute is that the search box when expands no more overlaps the menu, but throws it away.

That would be a good thing then?

Why would you not want it to move the menu out of the way. Makes perfect sense to me. It would look ugly if it overlapped.

That’s the beauty of flex things adjust as necessary.

1 Like

Ok sir.

Please find the attachment →

The menu and search box are in the vertical middle, but the logo and hamburger menu are not. what mistake am I committing?

To align items vertically in flexbox you use align-items:center.

Apply align-items:center to .site-header.

Any discrepancy in alignment will be due to things like margins/padding and the fact that your hamburger item is not the height you say it is.

1 Like

Everything Fixed sir.

1 Like

I have one more issue to discuss. I am struggling with the positioning of the drop down hamburger menu.
when i first build the HTML then I had around 10+ drop down menu item, but now when I am trying to convert the same into wordpress I am facing ahrn issue. Actually when the menu items are fewer than the position is causing an issue. I mean it looks quiet dislocated from the hamburger cross/three horizontal lines.

Live Wordpress Link

what is its fix so that irrespective of how many menu items are there in the hamburger dropdown menu the drop down location remain fixed.