Style a React Navbar -beyond the basic colors.

Experimenting with React Bootstrap

So, you're a in a coding bootcamp, or you're a self-learner or have been "voluntold" by your boss and are learning Javascript. You've made it past the first wave of information and have leveled up to React. It's time for another project and you're eager to add more sophisticated styling and responsiveness to your application this time.

Navigation Bar (navbar)

You've heard about React Bootstrap and want to add a navigation bar(navbar) [(https://react-bootstrap.github.io/components/navbar/)].

I believe that you are up to the task and render the navbar to your screen successfully, which is the assumption I'm making going forward.

Following the React Bootstrap guide, you see in one of their styling options that there are three examples of colors used:

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';

function ColorSchemesExample() {
  return (
    <>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <br />
      <Navbar bg="primary" variant="dark">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>

      <br />
      <Navbar bg="light" variant="light">
        <Container>
          <Navbar.Brand href="#home">Navbar</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
}

export default ColorSchemesExample;

As you read the documentation, you see the following:

You notice it states that there is a bg prop that determines the background color of the navbar while the variant dark or light provides a complimentary font color to the listed Navbar.Brand and Nav.Link routes.

Unlike the code block in this article, the React Bootstrap's code block example is a sandbox that will allow you to experiment with the bg and variant color schemes. It appears obvious that "dark" produces the color black and "light" produces a smoky white or very light gray color.

Why is the blue navbar named as "primary", though? In the sandbox you tinker around and substitute plain ol' "blue" instead and it breaks. Trying other colors such as "green" or "red", etc. all fail.

It turns out that the bg color class takes a different naming convention for colors. They are called contextual/theme colors.

[https://www.w3schools.com/bootstrap5/bootstrap_colors.php]

Armed with this new knowledge, you try "danger" and voila! You're now playing with coding fire 🔥!

Now, change the variant to "light" and try the theme color "warning" to get yellow with a dark font color.

Big Bird would be proud!

Beyond the primary colors

Okay, you've got that feather in your cap. But you want festive! Remember, the documentation allows for some custom css styling here. So, what else can we do?

Taking an example from another project, let's change the bg color class variable by giving it a name of "myColor". Feel free to name your variable whatever you want.

import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import '../App.css';

function NavBar() {
  return (
    <>
        <Navbar bg="myColor" variant="dark" sticky="top">
        <Container>
          <Navbar.Brand href="#">U*niQ Pet Adoption Agency</Navbar.Brand>
          <Nav className="ms-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#pets">Pets</Nav.Link>
            <Nav.Link href="#owners">Owners</Nav.Link>
            <Nav.Link href="#application">Application</Nav.Link>
            <Nav.Link href="#contact">Contact</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
    </>
  );
}

export default NavBar;

I'll use App.css to hold my styles for this example. Don't forget that you need to import your css file into the component where your navbar is and with the appropriate path!

I add this styling inside my App.css file:

.bg-myColor {
  background-image: linear-gradient(to right,#823604,#f96400 )
  }

It, in turn, produces the following:

I am using a two-color gradient here that will go from one color choice to the other gradually. The direction of the color change will go from left to right. I'm going from a darker to a lighter orange in this case.

Here's the basic syntax structure:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

As noted in the basic syntax above, an ellipsis ... follows color-stop2 which means you can add multiple colors. You can literally create a rainbow if you wanted to.

Your gradient can also go from right to left, top to bottom or vice-versa, diagonally etc. See all the documentation here for the kaleidoscope of choices you have!

[https://www.w3schools.com/css/css3_gradients.asp]

Okay, one more, I promise. Let's go crazy!

.bg-myColor {
  background-image: linear-gradient(to bottom 
  right,#7708ae,#6c0850,#b14861 )
}

This one uses three colors and works diagonally from top left

to bottom right.

This was one down-n-dirty way to accomplish some styling for the navbar. Here's another helpful site to inspire you.

[https://codingyaar.com/responsive-bootstrap-navbar-change-background-color/]

Of course, incorporating Sass would open up even more options for color schemes, I suppose. I hope some of you found this useful.

Happy coding and Happy New Year!