Hallo zusammen,
ich habe im Internet ein Snippet gefunden, dass ich gerne für meine Homepage anpassen möchte.
Hier mein HTML Code
[HTML]
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<img src="img/navigation/svenmann.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="hidden"> <a href="#page-top"></a> </li>
<li><img src="img/background/navigation/trenn.png">
</li>
<li><a href="index.php">Home</a>
</li>
<li><img src="img/background/navigation/trenn.png">
</li>
<li><a href="#blog">Blog</a>
</li>
<li><img src="img/background/navigation/trenn.png">
</li>
<li><a href="#guestbook">Gästebuch</a>
</li>
<li><img src="img/background/navigation/trenn.png">
</li>
<li><a href="#contact">Kontakt</a>
</li>
<li><img src="img/background/navigation/trenn.png">
</li>
<li><a href="me.php">Über Mich</a>
</li>
<li><img src="img/background/navigation/trenn.png">
</li>
<li><a href="projects.php">Projekte</a>
</li>
<li><img src="img/background/navigation/trenn.png">
</li>
<li><a href="login/index.php">Login</a>
</li>
<li><img src="img/background/navigation/trenn.png">
</li>
<li><img src="img/logo/lorbeerkranz_logo_klein.png">
</a>
</li>
</ul>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="reset" class="btn btn-default">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button type="submit" class="btn btn-default">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
(Hauptsächlich geht es hier um den „“ Bereich)
Hier mein CSS dazu
[CODE].navbar-collapse form[role=„search“] {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
padding: 0px;
margin: 0px;
z-index: 0;
}
.navbar-collapse form[role=„search“] button, .navbar-collapse form[role=„search“] input {
height: 50px;
padding: 8px 12px;
border-radius: 0px;
border-width: 1px;
color: rgb(218,165,34);
background-color: rgb(68,0,0);
border-color: rgb(136,0,0);
box-shadow: none;
outline: none;
}
.navbar-collapse form[role=„search“] input {
padding: 16px 12px;
font-size: 14pt;
font-style: italic;
color: rgb(218,165,34);
box-shadow: none;
}
.navbar-collapse form[role=„search“] button[type=„reset“] {
display: none;
}
@media (min-width: 768px) {
.navbar-collapse {
padding-top: 0px !important;
padding-right: 38px !important;
}
.navbar-collapse form[role=„search“] {
width: 38px;
}
.navbar-collapse form[role=„search“] button, .navbar-collapse form[role=„search“] input {
padding: 15px 12px;
}
.navbar-collapse form[role=„search“] input {
font-size: 18pt;
opacity: 0;
display: none;
height: 50px;
}
.navbar-collapse form[role=„search“].active {
width: 100%;
}
.navbar-collapse form[role=„search“].active button, .navbar-collapse form[role=„search“].active input {
display: table-cell;
opacity: 1;
}
.navbar-collapse form[role=„search“].active input {
width: 100%;
}
}[/CODE]
Und jetzt zu meinem Anliegen.
Ich möchte, dass die Suchleiste über die gesamte breite geht.
Ich bedanke mich schon mal im voraus für eure Hilfe.
Gruß
Svenmann