Bootstrap Navbar - Image was tiefer setzen?

[Dsimon24]

Hallo zusammen,

ich nutze Bootstrap um eine Website bzw. eine WebApp zu erstellen.
Jetzt habe ich die Standard-Navbar eingebunden und möchte ein Logo einbinden.
Das Logo soll aber nur zur Hälfte noch in der Navbar, zur anderen Hälfte unter der
Navbar ersichtlich sein. Wie kann ich das Logo so nach unten verschieben, sodass
sich die Navbar nicht nach unten hin vergrößert?

                <a class="navbar-brand" href="{{ url('/') }}">
                    <?php //{{ config('app.name', 'Laravel') }} ?>
                    <img src="https://red.xxx.de/assets/img/logo.png"
                         height="60"
                         width="60"
                         alt="">
                </a>

Und wo wir gerade dabei sind? Wie kann ich eine Farbe für die Navbar festlegen?

VG, David

 

[benneq]

Zur Positionierung brauchst du CSS: https://www.mediaevent.de/css/position.html
Oder du schneidest das Bild zu, und zeigst die eine Hälfte oben und die andere Hälfte unten an. Das kann man entweder händisch machen und 2 Bilder erstellen, oder mit CSS z.B. clip benutzen: https://www.w3schools.com/cssref/pr_pos_clip.asp

 

[Tourgott]

Setze ein <div class="verschieben"> mit position:absolute um obigen Code. Das Elternelement setzt du auf position: relative.

Die Klasse "verschieben" kannst du nun beliebig positionieren.

 

[kim88]

Und zu den Farben

Bootstrap bietet bei der Navbar 3 verschiedene Color Schemes an: https://getbootstrap.com/docs/4.3/components/navbar/#color-schemes

Wenn du was individuelles willst, musst das eben selber mit ein paar Zeilen CSS machen.