nav-toggle not showing its invisible reactjs

user_10063458 0
Viewed 978

i am new to react. for making page responsive i have added nav-toggle for header. but its not showing anything. while inspecting its there but invisible.and while clicking it the page is refreshing.code is given below.

code:-

    <section id="home" role="banner">
    <header id="header">
        <div className="header-content clearfix">
            <a href=""><img src={logo} alt="" className="logo" /></a>
            <nav className="navigation">
                <ul className="primary-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#card">Product</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#cata">Categories</a></li>
                    <li><a href="#test">Blogs</a></li>
                    <li><a href="#test2">News</a></li>
                    <li><a href="#busns" className="btn btnadd">Adds</a></li>
                    <li><a href="/login">LOGIN</a></li>
                </ul>
            </nav>
            <a href="" className="nav-toggle" data-target="#navigation">Menu<span></span></a>
        </div>
    </header>
</section>

thanks in advance

reactstrap bootstrap-4 reactjs
1 Answers

Be sure you have all the required dependencies installed and setup correctly. (See reacstrap documentation).

See reactstrap-navbartoggler-example for a complete working example.

This is an example component to implement the navbar:

import React, { Component } from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
} from 'reactstrap';

const links = [
  { href: '#home', text: 'Home' },
  { href: '#card', text: 'Product' },
  { href: '#about', text: 'About' },
  { href: '#cata', text: 'Categories' },
  { href: '#test', text: 'Blogs' },
  { href: '#test2', text: 'News' },
  { href: '#busns', text: 'Adds', className: 'btnadd' },
  { href: '/login', text: 'LOGIN' },
];

const createNavItem = ({ href, text, className }) => (
  <NavItem>
    <NavLink href={href} className={className}>{text}</NavLink>
  </NavItem>
);

export default class Example extends Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              {links.map(createNavItem)}
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

A word of caution: in the Reacstrap docs, there is a link to a demo under Installation/CDN. That demo is VERY old (reacstrap v2 and react v15). The dependencies from the demo will not work with some of the examples in the components section of the Reacstrap docs (including the icon for the collapse button).

user_31053710
Related