CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Bhavin
Bhavin

Reputation: 2168

Menu Goes left side (approx 20px in chrome) when click on menu in bootstrap

I have a problem in menu flickering in bootstrap when i click on any of the menu it goes left side 10-20px in chrome and then page loads so what is the issue in it. It's working perfectly in FIrefox and safari but in chrome it's not working. I didn't change any css or js of bootstrap so i share cdn link of bootstrap js and css. My live website's url is explained below.

Url : http://cmexpertiseinfotech.com/experttheme/index.html

CSS : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Js : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

HTML Code of menu: 

<nav id="navbar-main" class="navbar navbar-default navbar-fixed-top navbar-mi">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand padd_btm" href="index.html"><img src="images/logo.png"/></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="theme.html">Themes</a></li>
        <li><a href="service.html">Service</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="support.html">Support</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="#" class="cyan" data-toggle="modal" data-target="#myModal"><i class="fa fa-fw" title="Copy to use lock" aria-hidden="true"></i>Login</a></li>
      </ul>
    </div>
  </div>
</nav>

EDIT :

Css changes as of transition (I also Tried with change in all the transition but i have updated question only with -webkit-transition)

.navbar-nav li a:hover, .navbar-nav li.active a 
 {
           color: #fff !important;
           background-color: #158fa1 !important;border-radius: 5px;
           -webkit-transition: color 0.4s ease, background 0.4s ease;
           -o-transition: all .4s ease-in-out;
           transition: all .4s ease-in-out
 }

Upvotes: 0

Views: 206

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39342

Well, This flickering effect is because of Google and other fonts if there are any in your web page.

When your page loads, browser uses default web-safe fonts to show your content. Meanwhile it starts downloading fonts from Google and other servers. Each font has its own characteristics i.e width and height of each character is different in different fonts.

Default web-safe font in your case is taking more space so when fonts are completely downloaded and changed on your webpage, you see flickering effect.

To fix this issue, you can use a pre-loader that will be visible untill all your files are downloaded completely and your web page is fully ready to the users.

Upvotes: 1

Related Questions