React-Bootstrap - How to keep Navbar.Toggle button visible at all times?

Question

I'm using React-Bootstrap to make a navigation menu. The toggle button once expanded contains my nav items to go to different parts of my app. So far I know it is supposed to be responsive to small-screened devices as the nav items disappear inside the toggle button as soon as the display width is smaller than 768px and appear inside the navbar if the screen is any wider.

What I want is to keep the toggle button, its behavior and its nav items (from the Navbar.Collapse) inside at all times. I've searched the documentation and other questions but haven't found any way to do this.

Here is my code :

    import React from 'react';
    import { bindActionCreators } from 'redux';
    import { connect } from 'react-redux';
    import { Glyphicon, Nav, Navbar, NavItem } from 'react-bootstrap';
    import { actionCreators } from '../store/ExpeditionStore';
    import './NavMenu.css';
    const translations = require('../Translations');

    class NavMenu extends React.Component {

    render() {
        return (
            <Navbar inverse fixedTop fluid collapseOnSelect>

                <Navbar.Header>
                    <Navbar.Toggle />
                    <Navbar.Brand>
                        {this.props.title}
                    </Navbar.Brand>
                </Navbar.Header>

                <Navbar.Collapse>
                    <Nav>
                        <NavItem>
                            <Glyphicon glyph='plane' />{translations.getCaption('shipment')}
                        </NavItem>
                    </Nav>
                    <Nav>
                        <NavItem onClick={() => this.props.switchLanguage(translations)}>
                            EN/FR
                        </NavItem>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }
}

export default connect(
    state => state.expeditionStore,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(NavMenu);

How to keep my toggle button and the Navbar.Collapse nav items inside it even if the device is wider than 768px?

Sahan Nimesh Sahan Nimesh · Accepted Answer · 2019-11-26T17:07:04

1

votes

Add expand attribute with value of "xl" or "xxl" to main Navbar tag. eg: expand="xxl"

React-Bootstrap - How to keep Navbar.Toggle button visible at all times?

2 Answers