navbar-collapse Konflikt mit Positionselementen

Ich habe ein Problem mit meiner Website, es ist eine Store-Locator-Seite. Aber wenn Sie die Größe Ihres Fensters ändern, wenn Sie sich im PC befinden, als ob Sie in mobiler Auflösung sind, wenn Sie den Navbar-Kollaps umschalten, wird die Navigationsleiste unter der Seitenleiste sein, die sehr hässlich aussieht. Stimmt etwas mit meinem CSS nicht?navbar-collapse Konflikt mit Positionselementen

DEMO

Screenshot

body { 
     color:#404040; 
     font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif; 
     margin:0; 
     padding:0; 
     -webkit-font-smoothing:antialiased; 
    } 

    * { 
     -webkit-box-sizing:border-box; 
     -moz-box-sizing:border-box; 
     box-sizing:border-box; 
    } 
    .sidebar { 
     position:absolute; 
     width:33.3333%; 
     height:100%; 
     top:90px;left:0; 
     overflow:hidden; 
     border-right:1px solid rgba(0,0,0,0.25); 
    } 

    .map { 
     position:absolute; 
     left:33.3333%; 
     width:66.6666%; 
     top:90px;bottom:0; 
    }

Update (2017.08.10):Das Problem wird durch die ff gelöst wurde:

Okay, wickeln die Sidebar und Map in einem neuen div mit Position: relative und Höhe: 100vh; - thehuijb

Quelle

2017-08-09 Veno Hyde

hinzufügen

.dark-header .menu-header, .header-dark .menu-header { 
    position:relative; 
}

Quelle

2017-08-09 09:59:02 thehuijb

Danke Sir! Du bist ein Lebensretter! Es überlappt jedoch den Bildschirm, der überhaupt nicht schlecht ist. Aber es wäre besser, wenn der Kollaps den Bildschirm nicht überschneidet, sondern die Seitenleiste und die Karte nach unten drückt. –

Okay, wickeln Sie die Siebar und Karte in einem neuen Div mit Position: Relativ und Höhe: 100vh; – thehuijb

und setzen oben: 0; auf der Seitenleiste und Karte – thehuijb

navbar-collapse Konflikt mit Positionselementen

Antwort

Verwandte Themen