How to make a border-radius-ed connected navbar?-CodePudding

I am making a react app and I have an odd looking navbar to make (shown in picture). Any idea what kind of navbar it is called or how to design this?

CodePudding user response：

It looks like a normal navbar, Try This:

Navbar Componment

const NavBar = () => (
    <header className='navbar'>
        <div className='navbar__item active'>Home</div>
        <div className='navbar__item'>Social</div>
        <div className='navbar__item'>Events</div> 
<div className='navbar__item'>Pet Friendly Places</div> 
<div className='navbar__item'>Services</div> 
<div className='navbar__item'>About Us</div>        
    </header>
);

style

.navbar {
    display: flex;
    align-items: center;
    border-radius:50px;
    background: hsl(230deg 44% 26%);
    color: white;
    font-family: Helvetica;
    font-weight: 300;
}

.navbar__title {
    margin-right: auto;
    font-size: 150%;
    padding: 12px 16px;
}

.navbar__item {
    padding: 16px 16px;
    cursor: pointer;
    vertical-align: middle;
}
.active{
background-color:hsl(210deg 54% 40%);
border-radius:50px 0px 0px 50px;
}

CodePudding user response：

    export const Nav = () => (
    <header className='navmenu'>
        <div >Home</div>
        <div >Social</div>
       <div >About Us</div>        
    </header>
);


//add this code on your css file
.navmenu {
    display: flex;
    align-items: center;
    border-radius:50px;
}