Description:
I want to implement a fixed header with logo and menu in antd. I have followed this documentation: https://3x.ant.design/components/layout/#components-layout-demo-fixed (yes, we are still on v3) The demo shows it in dark background and the menu component is on dark theme. I need it to be on white background.
Problem Statement:
The menu component has some extra height when in light mode so as to account for the highlighted / selected menu item and it also has a bottom border. Because the header is fixed to top of screen, it has to span the full width.
The menu is under Layout.Header
which applies some padding on its own.
The way for it to look like a full width header would be to have a border spanning it.
I considered adding a border to the Layout.Header
but it looks broken (menu height is about a pixel more than the Layout.Header
height.
Codesandbox for the issue: https://codesandbox.io/s/amazing-platform-stackoverflow-x8tx6
I might be missing something. Please help. Thanks in advance :)
background: '#fff'
in the Header styles.light