How to fix a css navigation flashing issue

Question

I have a react app using reactstrap(bootstrap4). I created a simple layout using react-router for the navigation. I cannot figure out why the navbar items flash when you click on one. I am using a built-in NavLink from react-router-dom that keeps the selected NavItem highlighted.

Here is link to the website Website

Header Component

import {
  Collapse,
  Navbar,
  NavbarToggler,
  Nav,
  NavItem,
  NavbarBrand,
  NavLink } from 'reactstrap'
import { NavLink as RRNavLink } from 'react-router-dom'

const Item = ({link, label}) => (
  <NavItem>
    <NavLink exact activeClassName='active-tab' to={link} tag={RRNavLink}>{label}</NavLink>
  </NavItem>
)

const ROUTES = []

export default class extends React.Component {
  render () {
    return (
      <div className='header-bkg'>
        <Navbar color='faded' light expand='md'>
          <NavbarBrand className='text-white'>Star Designs</NavbarBrand>
          <NavbarToggler onClick={this._onToggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className='ml-auto' navbar>
              {ROUTES.map((x, i) => (
                <Item key={i} {...x} />
              ))}
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    )
  }
}

CSS

   .header-bkg {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 1px rgba(0, 0, 0, 0.6), 0 0 5px rgba(0, 0, 0, 0.6);
    border-top: 0 solid rgba(47, 46, 46, 1);
    border-bottom: 0 solid rgba(47, 46, 46, 1);
    background-color: #d7a29e;
}

.nav-link:hover,
.nav-link:active {
    background-color: #ede9e2;
}

.nav-link {
    text-transform: uppercase;
}

.active-tab {
    background-color: #ede9e2;
}

:focus {
    outline: -webkit-focus-ring-color auto 0;
}

@media (max-width: 575px) {
}

@media (max-width: 767px) {
}

@media (max-width: 991px) {

}

@media (max-width: 1199px) {
}

@Jack. just put a bounty of 100 points so hopefully we get solution — texas697
@texas697 Whenever a nav item is clicked, the div surrounding the nav items (class="collapse show navbar-collapse") turn to "collapsing navbar-collapse". So the obvious guess is that the onclick somehow triggers the collapse method. A hack could be to overrule the "collapsing" class, but I hope it doesn't come to that. I'll look into it a little bit more and let you know. In the meantime, can you check if you could be triggering the collapse somehow? — saglamcem
I guess you are calling the _onToggle() method on nav item selection and that toggles the state {this.state.isOpen} and causes the re-render. And probably due to transition effects, you see the lag. So just use the _onToggle method on NavToggle onclick and on item selection, check the current state and update only if it's open (which should only be possible for mobile view and wont cause a re-render for desktop). — Swati Anand

Nandita Sharma Nandita Sharma · Accepted Answer · 2018-07-23T05:23:46

On click of menu item, some js code is adding height : 0px on the collapse navbar-collapse element (for the closing dropdown animation effect in mobile view) and then removing it after a few miliseconds. Add the following style, it will not allow the height 0 to get applied in desktop views because of higher specificity and important attribute. Hence, the flickering will not occur.

@media (min-width: 768px) {
    .navbar-expand-md .navbar-collapse {
        height: auto !important;
    }
}

How to fix a css navigation flashing issue

2 Answers