Skip to main content

Posts

Showing posts from 2019

Make Bootstrap's Navbar Sticky in React with JavaScript

If you need instructions on how to setup Bootstrap's navbar, follow my previous post.

We'll start by creating the Navigation component.

importReactfrom'react'; import'./Navigation.css'; letnavbar; letsticky; classNavigationextendsReact.Component { render() { return( <navid="main-navigation"className="navbar navbar-expand-lg navbar-light" > ...
We needed to import the Navigation.css file. This is where we'll create our sticky CSS class.

/* The sticky class is added to the navbar with JS when it reaches its scroll position */ .sticky { position: fixed;     top: 0;     width: 100%;     z-index: 100; }
We created our variables, navbar and sticky. They will be initialized after the page renders. Next, we'll need to add the componentDidMount() lifecycle method to the Navigation class. This will initialize the navbar and sticky variables and add the scroll event listener to our navigation.

classNavigationextendsReact.Component {��…

Using pure Bootstrap in React

To start, I understand that React Bootstrap exists. I wanted to find the simplest way to use bootstrap in a React Application without React Bootstrap.Let's start by creating the react app with create-react-app so that we're all on the same page. In public/index.html, we need to add some code. Right before the closing </head> tag, add the following CSS: Right before the closing </body> tag, add the following scripts: Save and close index.html. Open App.js and delete everything inside the return(). We're going to be just adding a navigation there for testing. If you're working on your own application, do not delete everything inside your return().Navigate to the Bootstrap example page: https://getbootstrap.com/docs/4.0/examples/starter-template/Right click on it and View Page Source. The <nav> tag starts right after the <body> tag. Copy everything inside <nav>...</nav>, including the <nav> tags themselves. Paste the content inside …