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) {
}
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;
}
}
Try using:
.yourMenuButtonClass {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
-webkit-animation: none;
-o-animation: none;
animation: none;
}
.yourSubmenuThatAppearsAfterClickClass {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
-webkit-animation: none;
-o-animation: none;
animation: none;
}
Replace the Classes above in CSS accordingly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With