Menu in Header has wrong height

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Use <Menu /> in <Layout.Header /> component to create basic header navbar

What is expected?

Ant components that are commonly used together should be working together nicely out of the box

What is actually happening?

When you use <Menu /> in <Layout.Header />, it does’t work out of the box. Menu has lower height that Header thus its not vertically aligned

Environment	Info
antd	3.13.1
React	16.7
System	MacOS
Browser	Chrome

---

Easiest solution would be to write custom menu styles in the layout styles. However from what I have seen, you dont mix styles between components like this.

[Duder-onomy]

This should be fixed. It is a terrible ‘first experience’ for this framework. One of the first things I do when building a website is put together the header and nav. Putting a <Menu in the <Layout.Header is one of the very first things most people will do (IMO).

When it does not work correctly, the first time, people will think the whole framework is busted and nothing works well together. It will sour their opinion of how this framework was built. God forbid they actually find this github issue and think that adding a style={{ lineHeight into their code is a good idea at all. In fact, I believe people using AntD are trying NOT to customize and put hard coded styling into their application at all. This will decouple the ‘header’ from the theme, which removes any ability to easily change the header height later. Changing this @layout-header-height will no longer properly change the header height.

Look at this issue here: https://github.com/ant-design/ant-design/issues/15744 ^ The person abandoned the framework after realizing they could not even put a NavBar together without customizing styles directly on the component level.

I think AntD should:

• Fix this issue how @Kamahl19 suggests. Ensure the menu assumes the line-height from the @layout-header-height variable when rendered within a Layout.Header. OR
• Add a legitimate NavBar component to the library so people can get around this issue.

[ztplz]

I see. Since you don’t want to set the style in the Header, you can set the style in menu.item.