Responsive Ribbon Navigation

Question

Ich arbeite an einer reaktionsschnellen Ribbon-Navigationsleiste, die ich mit ionicons (http://ionicons.com) erstellt habe.

Alles sieht gut aus! Das einzige Problem ist, wenn ich den Browser auf eine kleinere Größe verkleinere, verursacht der rechte Teil des Bandes Scrollbars erscheinen. Sie können sehen, woran ich hier arbeite: https://jsfiddle.net/gyrndofr/

Ich habe versucht, overflow-x:hidden zu verwenden, aber dann verschwindet alles außer der Navigationsleiste. Um die overflow-x:hidden zu sehen, kommentieren Sie einfach line 7 in der Geige css.

Ich versuche, die Funktionalität zu halten, aber nur den Überlauf verstecken, weshalb ich overflow-x:hidden versucht habe, aber vielleicht füge ich gerade das zum falschen Element hinzu.

Jede Hilfe wird geschätzt.

Danke,
Josh

Answer 1

ich einen genaueren Blick nahm und einige Anpassungen vorgenommen, hoffentlich hilft das jemand anderes :-)

https://jsfiddle.net/66fwcz71/

Grundsätzlich angewendet ich eine max-width sowohl der #nav Behälter und der #nav ul, der Trick ist ... anstelle von #nav:before - #nav:after und #nav ul:before - #nav ul:after sowohl der Schatten und das Band müssen p sein Kunst der ul, so verließ ich die Band als #nav:before-#nav:after, erstellt dann ein .left und .right div mit meinem Schatten ... auf diese Weise das Band das #nav Element und die .left-.right ist der Schatten.

Danke,
Josh