Bootstrap Navheader Safari Weird Layout on First Load - html

Question

I'm seeing an odd layout in Safari using a bootstrap nav header. This only shows up on first page load sometimes. Refreshing the page gives the correct layout (Opening a fresh window and pasting in the url triggers the incorrect layout fairly consistently.)
Here is a picture of the current layout:
And here's the layout when I reopen the page sometimes:
I want to have the links section on the same line as the brand, positioned to the right.
Here's the relevant html (I've tried to cut it down as much 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 link
</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 the 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 this odd behavior?

Answer 1

This seems like a Safari bug.
I solved it with following:
Absolute position the real logo.
Add a 120px (width of the logo) left margin to the #path
This was complicated by the navbar collapse section, which would shift over the #path into the logo when collapsed. The easiest solution was to wrap the #path in another .navbar-brand class, #path-nav here. Finally, Firefox needs path-nav to use float: none.
Here's the 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 link
</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;
}
/* for firefox */
#path-nav {
float: none;
}

Answer 2

Thanks for this question and providing your solution. I added "float: left" to my second tag and it did the trick.
Thanks again.