How to fix badge position in menu header React with ant design

Question

im trying to put an element Badge to the right of header menu in my page, but I don't know how do that, currently de Menu element of ant design push to another position the badge (bell icon):

The code:

const HeaderComp = (props) => {
let navigation = useNavigate()
const root= AppConfig.BucciaratiRoot.length>0 ? "/"+AppConfig.BucciaratiRoot:"/"

return (
  <Layout>
    <Header className="header" style={{position:'fixed', zIndex: 1, width:   '100%'}}>            
        <div style={{float:'left', marginRight:'5%'}}>
            <img style={{width: 120, height:31}} src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"/>
        </div>
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']} >
            <Menu.Item key="1" onClick={()=>navigation(root)}>Home</Menu.Item>
            <Menu.Item key="3">About</Menu.Item>
        </Menu> 
        <div style={{float:'right', marginLeft:'5%'}}>
            <Badge dot>
                <BellOutlined />
            </Badge>
        </div>    
    </Header>
  </Layout>  
 )
}

How cain I put the badge to the right of the header menu ?

Mohammad Rimawi · Answer 1 · 2022-07-02T21:38:11.683

You can use flex instead of float, and then but every element you want to be at the right in a div and every element to the left in another div, and using some justify-content:"space-between" property in flex you can make the space left in the navbar to be in between those to divs. See more on FlexBox

your code should look like:

return (
<Layout>
    <Header
        className='header'
        style={{
            position: "fixed",
            zIndex: 1,
            width: "100%",

            display: "flex", // make the header flex
            justifyContent: "space-between", // put all the space between the left and right sections of the menu
        }}
    >
        <div className='header-left'>
            {/* The left side of the menu */}

            <div style={{ /* remove float */ marginRight: "5%" }}>
                <img
                    style={{ width: 120, height: 31 }}
                    src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png'
                />
            </div>
            <Menu
                theme='dark'
                mode='horizontal'
                defaultSelectedKeys={["1"]}
            >
                <Menu.Item key='1' onClick={() => navigation(root)}>
                    Home
                </Menu.Item>
                <Menu.Item key='3'>About</Menu.Item>
            </Menu>
        </div>

        <div className='header-right'>
            {/* The right side of the menu */}
            <div style={{ /* remove float */ marginLeft: "5%" }}>
                <Badge dot>
                    <BellOutlined />
                </Badge>
            </div>
        </div>
    </Header>
</Layout>
);

Doesnt works, the menu looks vertical – Dr oscar Jul 02 '22 at 21:51 — Dr oscar, Jul 02 '22 at 21:51
Try adding height attribute to the header – Mohammad Rimawi Jul 02 '22 at 22:01 — Mohammad Rimawi, Jul 02 '22 at 22:01

score 0 · Answer 2 · answered Jul 04 '22 at 21:33

<Layout>
    <Header
        className="header"
        style={{
            position: 'fixed',
            zIndex: 1,
            width: '100%',
            display: 'flex',
            justifyContent: 'space-between',
        }}
    >
        <div>
            <div style={{ marginRight: '5%' }}>
                <img
                    style={{ width: 120, height: 31 }}
                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Suzuki_Motor_Corporation_logo.svg/2560px-Suzuki_Motor_Corporation_logo.svg.png"
                />
            </div>
            <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                <Menu.Item key="1" onClick={() => navigation(root)}>
                    Home
                </Menu.Item>
                <Menu.Item key="3">About</Menu.Item>
            </Menu>
        </div>

        <div style={{ marginLeft: '5%' }}>
            <Badge dot>
                <BellOutlined />
            </Badge>
        </div>
    </Header>
</Layout>;

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jul 05 '22 at 11:25

How to fix badge position in menu header React with ant design

2 Answers2