Reponsive Menü mit Bootstrap

  • Hallo, ich versuche ein simples Bootstrap Menü mit einem grossen Logo auf der linken Seite zu erstellen.


    Das Logo hat 600x150px


    Die Menüpunkte sollen rechtsbündig angezeigt werden.


    Mit kleineren Logos/Images gibt es bei Bootstrap selber passende Beispiele, aber sobald das Image höher wie die Navigation ist, komme ich nicht weiter.


    Besten Dank im Vorraus für Hilfen und Tipps.

    Dateien

    • b.jpg

      (42,08 kB, 32 Mal heruntergeladen, zuletzt: )

    Dieser Beitrag wurde bereits 3 Mal editiert, zuletzt von vincence ()


  • Aktuell
    wird die Navigation "Top" angezeigt, diese soll aber am unteren Rand
    der Spalte angezeigt werden. Ich hoffe jetzt ist es etwas
    verständlicher.

  • dein css wär wohl hilfreich.


    sie wird top angezeigt? :?:


    wenn es dass ist was ich glaube, die fragenstellung ist sicher komplizierter als das problem, dann musst du den nav container auf die selbe höhe bringen wie auch dein logo bzw. margin top angeben. alternative mit position absolute und dann eben bottom:0. aber wie gesagt, so ganz klar ist mir das problem nicht.

  • Bei der CSS handelt es sich ansich lediglich um die bootstrap.css. Die andere CSS die ich im Einsatz habe, dient lediglich der Optik. Hab beide aber mal als ZIP angehängt.
    Ich hoffe jetzt wird einiges klarer.





  • Hallo


    Noch ein paar Infos zu deinem Problem:


    Zitat

    Die andere CSS die ich im Einsatz habe, dient lediglich der Optik


    Das ist leider eine komplette Fehleinschätzung.


    In Bootstrap wirken viele CSS-Angaben aufeinander abgestimmt. Bei Eingriffen sollte man schon genau wissen welche Auswirkungen daraus resultieren.


    Anweisungen wie padding, border, margin, font-size, display (teilweise sogar mit negativen Werten) haben mit "lediglich der Optik" überhaupt nichts mehr zu tun. Das sind massive Layout-Eingriffe.


    Bei Frameworks wie Bootstrap sollten die vorhandenen Klassen zudem nur ausnahmsweise überschrieben werden. Deine massenhaften Eingriffe in vorhandene Klassen wie navbar führen regelmäßig zu Problemen. Besser ist in solchen Fällen eigene, deutlich erkennbare, Klassen zu verwenden.


    Wenn Problemlösungen mit vorhandenen Bootstrapmitteln nicht vorgesehen sind ist es zudem häufig sinnvoller komplett eigene CSS-Regeln zu erstellen, anstatt massenhaft Bootstrap-CSS zu überschreiben.


    Dein Wunsch (großes Logo links und Navigation rechts daneben unten rechts) ist in Bootstrap nicht vorgesehen. Viele Bootstrapvorgaben stören dabei sogar. Deshalb ist es wahrscheinlich einfacher für die von dir gewünschte Darstellung komplett eigenes CSS zu verwenden. Wobei natürlich das adaptive / responsive Verhalten berücksichtigt werden muss.


    Gruss


    MrMurphy

  • Mögliche Lösung wäre einen Flexbox :
    Dem Logo die class="img-responsive" geben statt 100%



    Inhalt der styles.css: