how can i create a navbar on the same line?

i created my navbar here with bootsrap and as you see there is a card , search , dropdown … but then when i added a 2 button for men and women i found them at the same line with search but not with the card and navdropdown ; should i change the button of women and men and search ? please help

import React from 'react'
import {Route} from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { LinkContainer  } from 'react-router-bootstrap'
import { Navbar, Nav, Container, NavDropdown  , Button } from 'react-bootstrap'
import { logout } from '../actions/userActions'

import SearchBox from './SearchBox'

const Header = ({setFilter}) => {
  const dispatch = useDispatch()

  const userLogin = useSelector((state) => state.userLogin)
  const { userInfo } = userLogin

  const logoutHandler = () => {

  return (
    <header style={{color:'white'}}>
      <Navbar style={{backgroundColor:'gray'}} variant='dark' expand='lg' collapseOnSelect>
        <Container  >
          <LinkContainer to='/'>
            <Navbar.Brand>LUCKYOU STYLE </Navbar.Brand>

          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
          <Route    render={({ history }) => <SearchBox  history={history} />} />
           <Nav className='ml-auto'>
           <LinkContainer style={{backgroundColor:'inherit'}} to='/products/men'>
            <Button name="men" onClick={(e)=>setFilter(}>Men</Button>              
            <LinkContainer style={{backgroundColor:'inherit'}} to='/products/women'>
            <Button name="women" onClick={(e)=>setFilter(}>Women </Button>
             <LinkContainer to='/cart'>
                  <i  className='fas fa-shopping-cart'></i> Cart
              {userInfo ? (
                <NavDropdown style={{color:'white'}} title={} id='username'>
                  <LinkContainer to='/profile'>
                  <NavDropdown.Item onClick={logoutHandler}>
              ) : (
                <LinkContainer style={{color:'white'}} to='/login'>
                    <i  className='fas fa-user'></i> Sign In 
              {userInfo && userInfo.user.isAdmin && (
                  <NavDropdown  title='Admin' id='adminmenu'>
                  <LinkContainer  to='/admin/userlist'>
                    <NavDropdown.Item >Users</NavDropdown.Item>
                  <LinkContainer  to='/admin/productlist'>
                  <NavDropdown.Item >  Products </NavDropdown.Item>
                  <LinkContainer  to='/admin/orderlist'>
                  <NavDropdown.Item >  Orders </NavDropdown.Item>


export default Header

Source: React – Stack Overflow

November 21, 2021
Category : News
Tags: frontend | html | navbar | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.