title: How do I fix my React Bootstrap Navbar? (Navbar Brand Collapse) Updated
body: <p>I have created a navbar in my React.js website using bootstrap for react. The navbar currently collapses at a certain point however my menu button does not appear. Please could someone check through the code below and let me know what I'm missing/need to do?</p>
  
  <p>I have tried to add in the toggle using an example on a bootstrap tutorial site however it doesn't seem to work, I'm assuming that something is missing? Or i'm doing something wrong?</p>
  
  <p>EDIT: I have fixed the original issue however all the alignment has been thrown off, I have changed the code below to the new code. </p>
  
  <ol>
  <li><p>I need everything on the navbar desktop view to be aligned right except the logo which should remain where it is. </p></li>
  <li><p>In tablet view, the navbar is automatically toggled on so always viewable? I don't want this.</p></li>
  <li><p>In the mobile view, I need the logo to remain where it is and the button to be aligned vertically central and to the right.</p></li>
  </ol>
  
  <p>Thanks in advance! </p>
  
  <p>Navbar.js:</p>
  
  <pre><code>import Navbar from 'react-bootstrap/Navbar';
  import Nav from 'react-bootstrap/Nav';
  import Button from 'react-bootstrap/Button';
  import {
    Link
  } from 'react-router-dom';
  
  class NavBar extends React.Component {
    render() {
      return (
        &lt;Navbar collapseOnSelect expand="lg" className="custom-nav-bg fixed-top"&gt;
          &lt;Navbar.Brand href="#home"&gt;
          &lt;Link to="/home"&gt;&lt;img className="custom-nav-logo"
              src="logohero.png"
              alt="StatHero Logo"
              width="105px"
              height="50px"
            /&gt;&lt;/Link&gt;
          &lt;/Navbar.Brand&gt;
          &lt;Navbar.Toggle aria-controls="responsive-navbar-nav" className="navbar-toggler-css" /&gt;
          &lt;Navbar.Collapse id="responsive-navbar-nav"&gt;
            &lt;Nav className="align-nav"&gt;
              &lt;Nav.Link className="custom-nav-text" href="#about"&gt;
              &lt;Link to="/about"&gt;ABOUT&lt;/Link&gt;
              &lt;/Nav.Link&gt;
  
              &lt;Nav.Link className="custom-nav-text" href="#stats"&gt;
              &lt;Link to="/stats"&gt;STATS&lt;/Link&gt;
              &lt;/Nav.Link&gt;
  
              &lt;Nav.Link className="custom-nav-text" href="#faqs"&gt;
              &lt;Link to="/faq"&gt;FAQS&lt;/Link&gt;
              &lt;/Nav.Link&gt;
  
              &lt;Nav.Link className="custom-nav-text" href="#contact"&gt;
              &lt;Link to="/contact"&gt;CONTACT&lt;/Link&gt;
              &lt;/Nav.Link&gt;
  
              &lt;Nav.Link className="custom-nav-text" href="#signup"&gt;
                &lt;Link to="/signup"&gt;&lt;Button className="custom-nav-button"&gt;SIGN UP&lt;/Button&gt;&lt;/Link&gt;
              &lt;/Nav.Link&gt;
  
              &lt;Nav.Link className="custom-nav-text" href="#login"&gt;
              &lt;Link to="/login"&gt;LOGIN&lt;/Link&gt;
              &lt;/Nav.Link&gt;
  
            &lt;/Nav&gt;
          &lt;/Navbar.Collapse&gt;
      &lt;/Navbar&gt;
      )
    }
  }
  export default NavBar;
  
  </code></pre>
  
  <p>Navbar CSS (For some context):</p>
  
  <pre><code>  background-color: red ! important;
    display: flex;
    align-items: flex-end;
  }
  
  .align-nav {
    display: flex;
    align-content: flex-end;
  }
  
  .custom-nav-bg {
    max-width: 100%;
    padding-right: 50px;
    padding-left: 60px;
  
    border-radius: 0px;
    background-color: #132A42;
  }
  
  .custom-nav-logo {
    height: 100%;
  }
  
  a.custom-nav-text:hover {
    color: #00DF8D ! important;
  
    font-family: 'Assistant', sans-serif ! important;
  }
  
  a.custom-nav-button:hover {
    color: #00DF8D ! important;
  
    font-family: 'Assistant', sans-serif ! important;
  }
  
  .custom-nav-text {
    max-width: 100%;
    padding-top:10px ! important;
    padding-right:20px ! important;
    padding-bottom:10px ! important;
    padding-left:20px ! important;
  
    color: white ! important;
  
    font-family: 'Assistant', sans-serif;
    font-size: 20px;
    font-weight: 600;
  }
  
  .custom-nav-button {
    padding-right: 15px;
    padding-left: 15px;
  
    border-color: #00DF8D;
    border-radius: 10px;
    background-color: #00DF8D;
  
    font-size: 20px;
    font-weight: 600;
    }
  
    @media only screen and (max-width: 768px) {
      .custom-nav-text {
        max-width: 100%;
        padding-top:10px ! important;
        padding-right:10px ! important;
        padding-bottom:10px ! important;
        padding-left:10px ! important;
  
        font-size: 15px;
      }
      .custom-nav-logo {
        align-items: flex-start;
        justify-content: flex-start;
      }
      .custom-nav-bg {
        padding-left: 0px;
        padding-right: 0px;
        display: block;
      }
    }
  
    @media only screen and (max-width: 768px) {
      .custom-nav-button {
        padding-right: 10px;
        padding-left: 10px;
  
        border-color: #00DF8D;
        border-radius: 5px;
        background-color: #00DF8D;
  
        font-size: 15px;
        }
      }
  
  </code></pre>