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;
}
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.
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 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.
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.
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.
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.
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.
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.
