Блог

Когда я уменьшаю размер своего браузера, я получаю это

Как вы можете видеть, этот 3-строчный символ (я не знаю, как он называется) не виден. Как я могу изменить его цвет на белый?

Я также хочу, чтобы кнопка входа в систему находилась под пунктами меню. Вот мой код

 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;
  

Есть идеи?

Спасибо, Тео.

Вам необходимо настроить .navbar-toggler amp; .navbar-toggler-icon в вашем CSS-файле, поскольку вы не используете тему начальной загрузки для своего navbar (например, navbar-light ), поэтому кнопка hamburger не отображается должным образом — потому что ее определение CSS в первую очередь зависит от того, какую тему начальной загрузки использует ваша панель навигации.

Итак, для этого вы можете использовать что-то вроде:

 .navbar-toggler-icon {
  background-image: url("data:image/svg xml;charset=utf-8,");
}

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

Что касается логина Button , поместите его внутрь Collapse компонента, чтобы он находился в группе сворачиваемой / расширяемой панели навигации

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

Взгляните на className Nav и NavItem на мой фрагмент. Это w-100 так, что Nav будет занимать все пространство. d-md-block amp; ml-md-auto находится там, чтобы ваша кнопка входа была сдвинута вправо на средних устройствах и вверх, но будет выровнена по левому краю на небольших устройствах.