Changing reactstrap navbar color and properties

Question

When I reduce my browser's size I get this

As you can see that 3 line symbol (I don't know what is called) is not visible. How can I turn its color to white?

I also want the login button to be below the menu items. Here is my code

import React, { Component } from 'react';
import {
  Navbar,
  NavbarBrand,
  Nav,
  NavbarToggler,
  Collapse,
  NavItem,
  Jumbotron,
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Input,
  Label,
} from 'reactstrap';
import { NavLink } from 'react-router-dom';

class Header extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isNavOpen: false,
      isModalOpen: false,
    };

    this.toggleModal = this.toggleModal.bind(this);
    this.toggleNav = this.toggleNav.bind(this);
    this.handleLogin = this.handleLogin.bind(this);
  }

  toggleNav() {
    this.setState({
      isNavOpen: !this.state.isNavOpen,
    });
  }

  toggleModal() {
    this.setState({
      isModalOpen: !this.state.isModalOpen,
    });
  }

  handleLogin(event) {
    this.toggleModal();
    alert(
      'Username: ' +
        this.username.value +
        ' Password: ' +
        this.password.value +
        ' Remember: ' +
        this.remember.checked
    );
    event.preventDefault();
  }

  render() {
    return (
      <div>
        <Navbar style={{ backgroundColor: '#378248' }} expand='md'>
          <Modal isOpen={this.state.isModalOpen} toggle={this.toggleModal}>
            <ModalHeader toggle={this.toggleModal}>Login</ModalHeader>
            <ModalBody>
              <Form onSubmit={this.handleLogin}>
                <FormGroup>
                  <Label htmlFor='username'>Username</Label>
                  <Input
                    type='text'
                    id='username'
                    name='username'
                    innerRef={(input) => (this.username = input)}
                  />
                </FormGroup>
                <FormGroup>
                  <Label htmlFor='password'>Password</Label>
                  <Input
                    type='password'
                    id='password'
                    name='password'
                    innerRef={(input) => (this.password = input)}
                  />
                </FormGroup>
                <FormGroup check>
                  <Label check>
                    <Input
                      type='checkbox'
                      name='remember'
                      innerRef={(input) => (this.remember = input)}
                    />
                    Remember me
                  </Label>
                </FormGroup>
                <Button type='submit' value='submit' color='primary'>
                  Login
                </Button>
              </Form>
            </ModalBody>
          </Modal>
          <div className='container'>
            <NavbarToggler onClick={this.toggleNav} />
            <Collapse isOpen={this.state.isNavOpen} navbar>
              <Nav navbar>
                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/home'
                  >
                    <span className='fa fa-home fa-lg'></span> Home
                  </NavLink>
                </NavItem>

                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/gallery'
                  >
                    <span className='fa fa-list fa-lg'></span> Gallery
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    style={{ color: '#fff' }}
                    className='nav-link'
                    to='/contactus'
                  >
                    <span className='fa fa-address-card fa-lg'></span> Contact
                    Us
                  </NavLink>
                </NavItem>
              </Nav>
            </Collapse>
            <Nav className='ml-auto' navbar>
              <NavItem>
                <Button
                  outline
                  style={{ backgroundColor: '#fff' }}
                  onClick={this.toggleModal}
                >
                  <span className='fa fa-sign-in fa-lg'></span> Login
                </Button>
              </NavItem>
            </Nav>
          </div>
        </Navbar>
        <Jumbotron style={{ backgroundColor: '#5b9153' }}>
          <div className='container'>
            <div className='row row-header'>
              <div className='col-12 col-sm-6'>
                <h1>I Love Aristi</h1>
                <p>A place built for God!</p>
              </div>
            </div>
          </div>
        </Jumbotron>
      </div>
    );
  }
}

export default Header;

Any ideas?

Thanks, Theo.

Answer 1

You need to customize your .navbar-toggler & .navbar-toggler-icon on your CSS file since you are not using a Bootstrap theme for your navbar (e.g., navbar-light) which is why the hamburger button is not appearing properly - because its CSS definition primarily depends on which Bootstrap theme your navbar is using.

So for that you can use something like:

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255);
}

As for the Login Button, put it inside the Collapse component so it is in the group of the collapsible/expandable navbar

<Collapse isOpen={this.state.isNavOpen} navbar>
  <Nav navbar className="w-100">
    ...
    <NavItem className="d-md-block ml-md-auto">
      <Button
        outline
        style={{ backgroundColor: "#fff" }}
        onClick={this.toggleModal}
      >
        <span className="fa fa-sign-in fa-lg"></span> Login
      </Button>
    </NavItem>
  </Nav>
</Collapse>

Take a look at the className of Nav and NavItem on my snippet. The w-100 is so that the Nav will take up the entire space. The d-md-block & ml-md-auto is there so that your Login button will be pushed to the right on medium devices and up, but will be aligned to the left on small devices.