Creating an adaptable navigation menu using Bootstrap and React: A step-by-step guide

EDIT: I have a question regarding the loading of jquery and bootstrap JS scripts in React. How can this be achieved?

I'm currently working on optimizing my React website for mobile devices, and I've implemented a Navbar that switches to a hamburger menu-style navbar on smaller screens. While following the Bootstrap Navbar Documentation, I successfully got the navbar to display the hamburger icon when resized to a mobile size. However, clicking on the icon does not expand the navigation menu as expected.

One important aspect to note is that I dynamically pass classes to my Navbar component using props every time a page is loaded. This allows me to have different Navbar styles for each page while using only one component. Below is an example call from my About.js (page for the "About Me" section in my portfolio), which is similar to other calls on various pages.

Navbar.JS

// Navigation Bar Component
class NavBar extends Component {
    render() {
        return (
            <nav id={this.props.navId} className={this.props.class}>
                <li id={this.props.logoId} className={this.props.logoClass}><p>{this.props.logoText}</p></li>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"><i className="fas fa-bars"></i></span>
                </button>
                <div className="collapse navbar-collapse">
                    <ul id="links" className="navbar-nav ml-auto">
                        <li className="nav-item active textlink"><Link className="nav-link" to="/home">Home</Link></li>
                        <li className="nav-item active textlink"><Link className="nav-link" to="/about">About Me</Link></li>
                        <li className="nav-item active textlink"><Link className="nav-link" to="/projects">Projects</Link></li>
                        <li className="nav-item active"><a className="nav-link" target="blank" href="https://github.com/QuintonPrice"><i className="fab fa-github"></i></a></li>
                        <li className="nav-item active"><a className="nav-link" target="blank" href="https://www.linkedin.com/in/quinton-price/"><i className="fab fa-linkedin"></i></a></li>
                    </ul>
                </div>
            </nav >
        );
    }
}

export default NavBar;

Example usage of Navbar component in my About page (same usage across all other pages except the home page)

<Navbar navId="navb" logoId="logo" logoText="qprice" logoClass="mr-auto" class="navbar bg-white navbar-expand-lg sticky-top navbar-fixed-top shadow ml-auto"/>

Navbar.css (NOTE: .navHome class is specific to the homepage, while .navb is used on all other pages):

/* Navigation Bar */
nav {
    margin-bottom: 20px;
}

/* qprice Logo */
#logo p {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    color: #52B788;
    font-size: 2.3rem;
    margin-left: 15%;
    margin-right: 15%;
}

/* Homepage Navigation Links */
#navHome a {
    color: white;
    padding: 10px 15px;
    font-size: 1.5em;
    float: left;
    text-align: center;
    text-decoration: none;
    position: relative;
}

#navHome a:hover, #navb a:hover {
    color: #52B788;
}

/* Homepage List Items */
#navHome li {
    display: inline;
    margin-right: .5rem;
}

/* Navigation Links */ 
#navb a {
    color: #343a40;
    padding: 15px;
    font-size: 1.5em;
    float: left;
    text-align: center;
    text-decoration: none;
    position: relative;
}

/* Navigation List Items */
#navb li {
    display: inline;
    margin-right: .5rem;
}

/* Hover Effect on Navbar Links */
.textlink a:hover {
    color: #52B788;
}

.textlink a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #52B788;
    visibility: hidden;
    transform: scaleX(0);
    transition: all .15s ease-in-out .05s;
}

.textlink a:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

.fab {
    margin-right: .7rem;
    font-size: 1.5em;
    text-align: center;
    text-decoration: none;
}

.fab:hover {
    color: #52B788;
    opacity: 0.7;
}

Answer №1

Yesterday, I encountered a similar issue but was able to resolve it by repositioning the script tags towards the end of the HTML file right before the closing body tag. Additionally, I made sure that the JQuery script was executed before the Bootstrap script.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to create a scrolling effect for a datalist dropdown menu

My HTML datalist shows various career paths, but the number of options is too long. I want to add a scrolling effect to it. I have looked for ways to do this, but I read that CSS cannot be applied to datalists. Is it possible to apply styles using jQuery i ...

PHP - Variables can only contain text characters

I am in the process of creating a website and I require a specific function. This function is intended to convert the string into plain text only. For example: $string = "Hello world<div width="100000">aaa</div>"; Rendering this as HTML cou ...

What is the process for removing the highlighted border from a navigation menu in ASP.NET?

I am currently utilizing the navigation menu in the ASP.NET toolbox, but I am struggling to remove an unwanted golden border. Despite my efforts, I have not been able to find any information on how to resolve this issue. The golden border only appears when ...

Change the color of the border to match the background color

I have a parent container with a unique background color. Inside the parent container, there is an unordered list (ul) with multiple list items (li), each having a distinct color and a brighter border color. Now, I am looking to extract the border color of ...

Scroll the table automatically when the currently selected row is the second-to-last row

Having trouble with a scrolling table issue. https://i.sstatic.net/PFyN3.png Upon page load, the first row (ROW 1) is automatically selected and highlighted. Clicking the next button selects and highlights the subsequent rows. However, once ROW >= 8 (e ...

Is it possible to perform a CSS flip animation without delay?

Trying to implement David Walsh's CSS flip effect for an image that should change to another without requiring a mouseover. Is there a way to trigger it automatically, maybe in 3 seconds? I'm new to this so any help would be greatly appreciated! ...

PHP Solution: I'm working on a page that is accessed using the post method. However, I need to defer the execution of certain code until after the page has finished

Apologies for the confusing title, but I'm struggling to succinctly explain my issue: I have a web page that is accessed through a button. When this button is clicked, specific data (a unique identification name) is sent to the page I want to view. Ho ...

Unable to overlay a div on top of an image

Hello, I'm currently attempting to overlay a div on top of an image. Since the image needs to be responsive, it cannot be set as a background image. Here is the CSS I am using: #slider { margin:0 33%; width:67%; position:relative; } #sli ...

What is the process for inserting an SVG object into an HTML document?

Currently, I am experimenting with d3.js examples to create visual graphs. Here is the link for reference. Below is the snippet where I've implemented the LineChart function to construct the graph, with Django as the backend. {% load static %} < ...

Performing mathematical calculations using javascript

In my project, I'm utilizing HTML, CSS, and JavaScript to achieve the following: Dropdown menu for Category (Coffee Appliance) Dropdown menu for Product (Keurig Coffee Maker) Wattage: 1500kWh (auto-filled from Local Storage) Daily Energy Con ...

How can I customize the color of the border/background on my jquery menu?

I have been using the jquery function menu() to generate a menu, and it's working as expected. However, there is one aspect that I would like to customize: the white border around the menu button should be black instead. You can see what I mean by ...

Using jQuery to activate classes on navigation pill elements

I'm currently developing a website and using a nav-pills setup with bootstrap 4. I am trying to implement an active state on click for two links that trigger accordions to display content. Below is the jQuery code I am using: $(function () { $("#filt ...

Error: React Native Component Exception - a potential hiccup in

As a newcomer to React Native, I've encountered an issue while trying to bind data from a local JSON server API. Everything worked fine when I used a class component for my EventList, but after integrating Navigation in App.js and changing it to a fun ...

Steps to create a div with a z-index of 1 that fills the entire height:

Looking at the image, I have a sidebar that opens over other elements (blue color) using z-index = 1. When the sidebar is open, I want to hide all other elements except for the sidebar. However, towards the end of the sidebar, I can still see other element ...

What is the best way to interpret HTML special characters (such as those with accents) in a Facebook share post?

<meta property="og:title" content="<?php echo $title; /> where $title is retrieved from a database. The title should display as blácv with the character a accented, but when sharing the post on Facebook, it appears as bl&aacutecv. T ...

How to apply background images to LI elements using CSS

I've been experimenting with CSS-generated tabs to display an active state of an arrow underneath the tab. I tried using the background position properties to position the image for the hover event, but it would extend beyond the predefined boundaries ...

Getting URL parameters in NextJS when using Custom Document can be achieved by accessing the `ctx`

Currently, I am utilizing NextJS for generating SSR pages that are language-specific. I want to specify the lang property to indicate the language of the text. Here's what I have done so far: import Document, { Html, Head, Main, NextScript } from &qu ...

Clearing HTML Text Input Box When User Presses Enter

Currently, I am working on a lengthy program that is functioning almost flawlessly. However, there is one persistent issue: whenever I hit the Enter key while the text box is clicked, it clears the box and appends the data to the URL as if it were a GET re ...

Basic media query does not affect div resizing or font changes in Chrome or Internet Explorer

I am facing an issue with a simple media query that is not working as expected in Chrome or IE, but strangely it works fine in FF. I have tried various formulations of the media query without success. Any assistance would be greatly appreciated. Below is ...

Accordion's second child element experiencing issues with grid properties

I have set the parent element display:"Grid" and specified the gridColumnStart for my child elements as shown below. It seems to be working correctly for the first child element, but not for the second one. Please find my code attached: return ( ...