Suchleiste in Navigation

[Svenmann]

Hallo zusammen,
ich habe im Internet ein Snippet gefunden, dass ich gerne für meine Homepage anpassen möchte.

Hier mein HTML Code

<nav class="navbar navbar-default navbar-fixed-top navbar-costom" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->

        <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 -->
</nav>

(Hauptsächlich geht es hier um den "<form>" Bereich)

Hier mein CSS dazu

.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%;
}
}

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

 

[SpiceLab]

Ich möchte, dass die Suchleiste über die gesamte breite geht.

Ist doch schon für das erste Media Query (@media (min-width: 768px) {...}) mit width:100% gegeben.

Ergo muß dies lediglich für weitere Media Queries fortgeführt/definiert werden.

• https://wiki.selfhtml.org/wiki/CSS/Media_Queries