I created a bootstrap navbar for my Wordpress site and am having an issue. The navbar works, but when the user closes the expanded navbar, the li items linger and lag for awhile before disappearing. I would like them to disappear with the rest of the navbar background but can't figure out what is causing the delay and how to edit it. Is this a built in bootstrap feature? This issue only happens when the user is at the top of the page (when the user scrolls, the background changes to a white background color, which makes the lag less noticeable (although still present).
Here is the draft site: http://xbm.naa.mybluehost.me/
Thank you!!
The answer was:
.collapsing{
transition: none;
}
The transition effect wasn't being applied to the navbar links, just the background color.
Related
I have one website onto the live server, but I am facing a problem into the navigation bar. The nav Items just blink for a second or two and they disappers. Why this is happening?
I have made the UI using bootstrap.
you may visit the website as under www.mathrubhumigroup.com. Please inspect the site and tell me why this is behaving oddly (specially the navigation bar items).
The navigation has disappeared because the collapse class has been applied to the navigation container, and it has the style visibility: collapse, that's why it has disappeared.
If you remove the CSS or override it with new CSS, the issue is resolved.
CSS:
.navbar-expand-lg .navbar-collapse {visibility: visible !important;}
I have a site that I'm doing some tweaks on and everything is done except for some logo/header issues.
I have a sticky header with animation which causes it to create a smaller size sticky header with a new logo, but the sticky header animation is a bit jerky and if you scroll back up quickly the logo jumps out of the bottom of the header for a second. It looks really strange for the user.
The site is at www.Dev.smithermancpa.com and you can scroll the page and see it in action.
I changed the animationDuration in the avada-header.js file which helped a bit (going from 300 ms to 100 ms) but is there a more distinct fix for this issue? I've seen a lot of smooth sticky header animations before so I'm sure there is a known good way to do this that I'm unaware of.
I am struggling with the same problem. Avada 5.2.1 at the moment.
What I've seen in all browsers is a two step animation. Big logo to small logo and no animation steps in between.
I think I found a way to immediately get a smoother animation. I set a background for the logo but make the background transparent. There is a theme setting for logo background. Make it black and drag opacity to the bottom.
I just made some scrolling sticky menu on my school project website, and i found this little problem. It's about transition hover effect of my menu links. You can see default menu is absolute positioned and at this stage transition is working perfectly, but when you scroll page down it header becomes fixed and transition effects stops working
here's my page: http://79.170.44.87/tatras.eu/
//edit: it's just problem of google chrome
//edit2: + its somehow cause of video background but i dont know why
I'm working on a site here: http://teamcherry.com.au/
The site uses a responsive nav plugin, so when viewport is narrow enough the nav is hidden behind a Menu button. When the menu button is pressed, the nav appears. In Firefox and Chrome, the nav appears over the top of content, which is the desired effect in this case. In Safari and mobile Safari however, opening the nav up pushes content down, which isn't what I want.
I've been trying to fix the issue by applying position: absolute to various elements but the layout keeps breaking. I'm sure I'm missing something really obvious here! Anyone able to help me out?
Remove float: right from your nav style.
I am doing a website using a free slider from here. I want to use the slider with a nav bar at the top of the page. My problem is, whenever I add the navbar in to the page the slider begins to scroll up and down. If I remove my nav bar everything works fine. When the slider scrolls, only the arrow buttons and the page tabs at the bottom scroll but not the image. My website is MQMGaming.com. Is there anyway to keep the slider from scrolling so it is the same as without the nav bar?
Thanks in advance.
It's not the navigation itself causing the issue, it's the two br tags you have after the nav ends. If you remove them it works fine.