html - Bootstrap Navheader Safari Weird Layout on First Load -

-

i'm seeing odd layout in safari using bootstrap nav header. shows on first page load sometimes. refreshing page gives correct layout (opening fresh window , pasting in url triggers incorrect layout consistently.)

here picture of current layout:

correct

and here's layout when reopen page sometimes:

incorrect

i want have links section on same line brand, positioned right.

here's relevant html (i've tried cut down as possible):

<header>     <nav class="navbar navbar-default navbar-fixed-top">         <div class="container-fluid">             <div class="navbar-header">                 <button class="navbar-toggle" data-target=         "#collapser" data-toggle="collapse"         type="button">                 <span class="sr-only">toggle navigation</span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>             </button>             <a class="navbar-brand" href="/" id="brand">                 <img src=     "http://upload.wikimedia.org/wikipedia/commons/f/f1/android_sample.svg"     style="height: 40px">                 </a>                 <ul class="navbar-nav pull-left" id="path">                     <li>                         <a href="link">a link</a>                     </li>                 </ul>             </div>             <div id="collapser" class="collapse navbar-collapse">                 <a class="navbar-right btn btn-default" id="navbar-login">login</a>             </div>         </div>     </nav> </header>

and styling:

#brand {     line-height: 50px;     padding: 0 1.2rem;     padding-right: 0;     width: 120px; }  #path {     list-style: none;     margin: 0;     padding-top: 16px;     padding-left: 0; }  #path li {     float: left; }  #path  li:before {     content: "/";     padding: 0 0.6rem; }

any thoughts on working around odd behavior?

this seems safari bug.

i solved following:

  • absolute position real logo.
  • add 120px (width of logo) left margin #path

this complicated navbar collapse section, shift on #path logo when collapsed. easiest solution wrap #path in .navbar-brand class, #path-nav here. finally, firefox needs path-nav use float: none.

here's revised working example:

<header>     <nav class="navbar navbar-default navbar-fixed-top">         <div class="container-fluid">             <div class="navbar-header">                 <button class="navbar-toggle" data-target=         "#collapser" data-toggle="collapse"         type="button">                 <span class="sr-only">toggle navigation</span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>                 <span class="icon-bar"></span>             </button>             <a class="navbar-brand" href="/" id="brand">                 <img src=     "http://upload.wikimedia.org/wikipedia/commons/f/f1/android_sample.svg"     style="height: 40px">                 </a>                 <div id="path-nav" class="navbar-brand">                     <u id="path">                         <li>                             <a href="link">a link</a>                         </li>                     </ul>                 </div>             </div>             <div id="collapser" class="collapse navbar-collapse">                 <a class="navbar-right btn btn-default" id="navbar-login">login</a>             </div>         </div>     </nav> </header>

.

#brand {     line-height: 50px;     padding: 0 1.2rem;     padding-right: 0;     width: 120px;     position: absolute; }  #path {     list-style: none;     margin: 0;     margin-left: 120px;     padding-top: 4px;     padding-left: 0; }  #path li {     float: left; }  #path li:before {     content: "/";     padding: 0 0.6rem; }  /* firefox */  #path-nav {     float: none; }

Comments

Post a Comment

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

-
this question has answer here: what's mongoose error cast objectid failed value xxx @ path “_id”? 7 answers even though has been asked many times because entity has no valid objectid field. i came across situation objectid set value can casted objectid still error. the schema: var serviceschema = parammongoose.schema({ servicename:{ type: parammongoose.schema.types.objectid , ref: 'servicenames',required:true } }); pseudo code: servicefromdb=new service({servicename:'some name'}); servicefromdb.servicename='000000000000000000000001'; servicefromdb.save(function(paramerror,paramdata){ if(paramerror){ console.log('but but...',servicefromdb,paramerror) } }); the output of code is: but but... { servicename: 000000000000000000000001, _id: 55079a90286f49280364f78b } { [casterror: cast objectid faile...
Read more

gradle error "Cannot convert the provided notation to a File or URI" -

-
i have defined 2 system properties in gradle.properties: systemprop.builddir=build systemprop.cfgdir=build\\cfg and have following task defined in build.gradle: task clean(group:'clean',description:'clean project') << { ant.sequential { delete(dir: system.properties.builddir) mkdir(dir: system.properties.builddir) delete(dir: system.properties.cfgdir) mkdir(dir: system.properties.cfgdir) } } this generates following error: execution failed task ':clean'. > cannot convert provided notation file or uri: {dir=build}. following types/formats supported: - string or charsequence path, e.g 'src/main/java' or '/usr/include' - string or charsequence uri, e.g 'file:/usr/include' - file instance. - uri or url instance. but equivalent block of code not generate error , works expected: task clean(group:'clean',description:'clean project') << { ...
Read more

python - NameError: name 'subprocess' is not defined -

-
i'm trying make rng website: http://jamesdotcom.com/?p=417 . when run following code: captureimage = subprocess.popen( [ "fswebcam", "-r", "356x292", "-d", "/dev/video0", "static.jpg", "--skip", "10" ], stdout=devnull, stderr=devnull) captureimage.communicate() i following error message: nameerror: name 'subprocess' not defined what should do? thanks have imported first? import subprocess captureimage = subprocess.popen(["fswebcam", ...) subprocess included in python standard library since python 2.4. should not necessary install it.
Read more