Display responsive header in single line using Bootstrap (Reactstrap)

234
January 03, 2020, at 02:20 AM

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,

enter image description here

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>
Answer 2

NavBar component have inbuild css flex-wrap: wrap

  change wrap to nowrap: (overwrite css)
      <Navbar light expand="md" className="navbar-style" style={{ flexWrap:'nowrap' }}>
Rent Charter Buses Company
READ ALSO
Possible z-index issue

Possible z-index issue

It seems that my dropdown menu its z-index is doing something strange:

197
Not able to identify element display values

Not able to identify element display values

I have photo gallery type of web pageIt is comprised of grid of photo thumbnails, with assigned tags beneath them

169
focus() and focusout() in jQuery

focus() and focusout() in jQuery

I have a problem with focus() method in jQueryHere is my code

163
How to make event available for dynamically added html jquery?

How to make event available for dynamically added html jquery?

I am doing some process that is running fine for first time loaded content using -

171