Display responsive header in single line using Bootstrap (Reactstrap)

Question

I am making a react app with Reactstrap css framework and the js file looks,

Example.Js

import React, { Component } from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Container,
  Button,
  Badge
} from "reactstrap";

const links = [
  { href: "#home", text: "Home" },
  { href: "#card", text: "Product" },
  { href: "#about", text: "About" },
  { href: "#cata", text: "Categories" },
  { href: "#test", text: "Blogs" },
  { href: "#test2", text: "News" },
  { href: "#busns", text: "Adds", className: "btnadd" },
  { href: "/login", text: "LOGIN" }
];

const createNavItem = ({ href, text, className }) => (
  <NavItem>
    <NavLink href={href} className={className}>
      {text}
    </NavLink>
  </NavItem>
);

export default class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

  render() {
    return (
      <div>
        <Container>
          <Navbar light expand="md" className="navbar-style">
            <NavbarToggler onClick={this.toggle} />
            <NavbarBrand href="/">
              <img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" />
            </NavbarBrand>
            <NavbarBrand href="/">The Big brand title will be displayed here !</NavbarBrand>
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                {links.map(createNavItem)}
              </Nav>
            </Collapse>
            <Nav className="ml-auto" navbar>
              <NavItem className="cart-wrapper">
                <Button className="cart-style" color="primary" size="sm">
                  Cart
                </Button>
                <Badge className="badge-style"> 10 </Badge>
              </NavItem>
            </Nav>
          </Navbar>
        </Container>
      </div>
    );
  }
}

Here for normal view it is fine but while we view it in responsive view, the toggler in first row, the navbar logo was moved to next row then navbar title (little bigger in characters) in another row and finally cart button with badge in another row.

So the above one needs to be changed into a single line in responsive (Mobile view).

It should look like,

---------------------------------------------------------

toggle-button  brand-icon brand-title  cart-button-badge 

---------------------------------------------------------

The brand title can be displayed by break line like,

------------------------------------------------------------------------

toggle-button  brand-icon   The Big brand title        cart-button-badge 
                            will be displayed here !

------------------------------------------------------------------------

Kindly help me to achieve the above mentioned result of making the header to display in a single line when viewed in responsive.

Working Example: https://stackblitz.com/edit/reactstrap-navbartoggler-example-mhvfmc

Even for normal bootstrap itself I am facing this issue,

Pure Bootstrap Ref: https://codepen.io/Maniraj_Murugan/pen/NWPaQGB

The below given image is the reference that I already have in my old application which uses MUI css but now I need to replace the same with bootstrap and need to have exactly the same output as like given below screenshot:

Answer 1

Following is the solution as per requirement of you question

You can change the media query screen size as per req, Below query cover tab and phone, Just pase the below code in your global styles

CSS

    @media only screen and (max-width: 768px){
            .navbar-style > .navbar-brand {
        width: 55%;
        font-size: 13px;
        white-space: pre-line;
        text-align: center;
        padding-right: 26px;
    }
            .logo.navbar-brand {
                width: 50px;
                overflow: hidden;
                margin-left: 10px;
                margin-right: 10px;
            }
            .logo img {
                width: 245px;
            }
            button.cart-style.btn.btn-primary.btn-sm {
                border-radius: 50%;
                padding: 8px;
                height: 42px;
                width: 42px;
            }
            li.cart-wrapper.nav-item {
                position: relative;
            }
            span.badge-style.badge.badge-secondary {
                position: absolute;
                border-radius: 50%;
                font-size: 10px;
                height: 20px;
                width: 20px;
                text-align: center;
                padding: 0;
                line-height: 19px;
                right: -4px;
                top:-4px;
                background: red;

            }
ul.ml-auto.cart.navbar-nav {
    position: absolute;
    right: 5px;
    top: 15px;
}
}

Your Render HTML(Replace)

Changes: (Just added the className logo)

        <Container>
          <Navbar light expand="md" className="navbar-style">
            <NavbarToggler onClick={this.toggle} />
            <NavbarBrand className="logo" href="/">
              <img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" />
            </NavbarBrand>
            <NavbarBrand  href="/">The Big brand title will be displayed here !</NavbarBrand>
            <Collapse isOpen={this.state.isOpen} navbar>
              <Nav className="ml-auto" navbar>
                {links.map(createNavItem)}
              </Nav>
            </Collapse>
            <Nav className="ml-auto cart" navbar>
              <NavItem className="cart-wrapper">
                <Button className="cart-style" color="primary" size="sm">
                  Cart
                </Button>
                <Badge className="badge-style"> 10 </Badge>
              </NavItem>
            </Nav>
          </Navbar>
        </Container>