Meine feste navbar funktioniert gut, wenn ich meinen Computerbildschirm unter 980px verkleinere. Sobald mein Bildschirm 979px oder weniger ist, springt der Navbar-Kollaps ein und funktioniert einwandfrei.bootstrap navbar Kollaps arbeiten am Computer nicht auf dem iPhone
Wenn ich aber Code auf Heroku schiebe und die Seite auf mein iPhone 4S lade, kollabiert meine Navbar nicht nur nicht, sondern sieht ein bisschen anders aus - der Float fällt direkt unter das Logo und lässt ihn seltsam aussehen .
Hier ist meine custom.css.scss
Datei:
@import "bootstrap";
@import "bootstrap-responsive";
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 61px;
}
@media (max-width: 979px) and (min-width: 768px) {
body {
padding-top: 0;
}
}
@media (max-width: 768px) {
body {
padding-top: 0;
}
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
.container {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
max-width: 1000px;
}
.span4 {
width: 323px;
margin-left: 20px;
text-align: center;
}
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: -20px;
padding-right: -20px;
}
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* header */
#logo {
float: left;
font-size: 1.7em;
color: #555555;
text-transform: uppercase;
letter-spacing: -1px;
padding-top: 5px;
font-weight: bold;
line-height: 2;
}
#logo:hover {
text-decoration: none;
}
.navbar-inner {
min-height: 60px;
}
.navbar .nav {
margin: 0 -13px 0 0;
}
.navbar-fixed-top .navbar-inner {
box-shadow: none;
border-bottom: 1px solid #d4d4d4;
}
.navbar .btn-navbar {
margin-top: 16px;
}
li {
line-height: 40px;
list-style: none;
}
#smedia {
padding: 10px 9px 10px 0px;
font-size: 16px;
text-shadow: none;
}
.navbar .divider-vertical {
margin: 10px 9px;
border-left: 1px solid rgb(218,218,218);
}
Und hier ist mein Kopf HTML:
<header class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Professional Workroom of Design", root_path, id: "logo" %>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-linkedin icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-google-plus icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-twitter icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li>
<a href="#" id="smedia">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-facebook icon-light" style="font-size: 22px;"></i>
</span>
</a>
</li>
<li class="divider-vertical"></li>
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Portfolio", portfolio_path %></li>
<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact", contact_path %></li>
</ul>
</div>
</div>
</div>
</header>
Das war es, danke für die Info. – wkernan