Webdesign-Forum

Normale Version: Responsive Nav
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Guten Tag Ihr Experten,

ich bin noch ein ziemlicher Anfänger was das programmieren von Webseiten angeht, dennoch habe ich für mein empfinden eine recht gute Seite hinbekommen.
Nun bin ich an dem Punkt der mobilen Anpassung angelangt. Hierbei habe ich enorme Probleme die Nav anzupassen.
Vielleicht habt Ihr Ideen oder Vorschläge wie ich meine Navigationsleiste so hinbekomme das sie sich automatisch anpasst.

Ich bedanke mich vielmals.


HTML Header/Nav Code

Code:
        <div class="container">
            <div class="main-header-container">
                <header class="main-header clearfix">
                
                    <!-- Logo oben Links -->
                    <a class="logo" href="index.html">
                        <img src="images/logo.png" height="113" width="142px" alt="Logo"> <!-- alt = alternativer Text -->
                    </a>
                    
                    <!-- Navigationsleiste -->
                    <nav id="navigation">
                        <ul class="parent clearfix">
                            <li><a href="index.html">Startseite</a></li>
                            <li><a href="offer1.html">Angebote</a>
                                <ul class="child">
                                    <li><a href="offer1.html">DSL</a></li><br>
                                    <li><a href="offer2.html">Handytarife</a></li><br>
                                    <li><a href="offer3.html">DSL</a></li><br>
                                    <li><a href="offer4.html">Handytarife</a></li>
                                </ul>
                            </li>
                            <li><a class="active" href="contact.html">Kontakt</a></li>
                            <li><a href="about.html">Über uns</a></li>
                            <li><a href="impressum.html">Impressum</a></li>
                        </ul>
                    </nav>
                </header>
            </div>
        </div>


CSS Header/Nav Code  (main.css)
Code:
.main-header,
.intro-container,
.intro-content,
.cycle-slideshow,
.container,
    #wrapper {
    width: 920px;
    padding: 20px; /* Abstaend von den Links zu oben */
    margin: 0 auto; /* Mittig ausrichtigen-- 0: oben u. unten, auto: links, rechts */
}

.main-header-container {
    background-color: #FFF;
}

.main-header {
    border-bottom: 1px solid #696969;
}

.main-header .logo {
    float: left;
    height: 113px;
    width: 142px;
}

.main-header nav {
    float: right;
    padding-top: 27px; /* Höhen einstellung der Links */
}

.main-header ul {
    list-style: none; /* keine besonderen Auszeichnungen, wie punkte einer Liste */
    margin: 0;
    padding: 0;
}

.main-header li {  /* Punkte in der Liste anordnung.. designing */
    float: left;
}

.main-header nav ul.child {
    width: 100%!important;
    display: none;
    text-align: center;
    float: left;
    padding: 10px;
}
    
.main-header nav ul.child li {
    text-transform: uppercase;
    font-size: 18;
    color: #222;
    padding: 5px 10px;
    text-align: center;
    float: left;
}
    
.main-header nav ul.child li:hover {
    color: #6495ed;
    text-transform: uppercase;
    font-size: 18;
    color: #222;
    padding: 5px 10px;
    text-align: center;
    border-top: 0px;
    float:left;
}
    
.main-header nav ul.child li a {
    text-decoration: none;
    border-top: 1px;
    text-transform: uppercase;
    font-size: 16px;
    padding: 4px 0px;
    text-align: center;
    float: left;
    font-weight: 300;
}
    
.main-header nav a { /* Nur die Links im Header sind betroffen */
    display: block; /* Die Links sind nun im Block */
    padding: 10px 20px; /* abstand oben, unten und rechts links */
    text-transform: uppercase; /* Großbuchstaben */
    font-size: 20;
    color: #222;
    border-top: 1px solid transparent;
}

.main-header nav a:hover {
    border-color: #6495ed;
    color: #6495ed;
}

.main-header nav a.active {
    color: #6495ed;
    border-color: #6495ed;
}
    
    /* Clearfix (GOOGLE) */

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table; /* Inhaltsbereich soll als tabelle wiedergegeben werden */
    }

.clearfix:after {
    clear: both;
}