Dieses Forum nutzt Cookies
Dieses Forum verwendet Cookies, um deine Login-Informationen zu speichern, wenn du registriert bist, und deinen letzten Besuch, wenn du es nicht bist. Cookies sind kleine Textdokumente, die auf deinem Computer gespeichert sind; Die von diesem Forum gesetzten Cookies düfen nur auf dieser Website verwendet werden und stellen kein Sicherheitsrisiko dar. Cookies auf diesem Forum speichern auch die spezifischen Themen, die du gelesen hast und wann du zum letzten Mal gelesen hast. Bitte bestätige, ob du diese Cookies akzeptierst oder ablehnst.

Ein Cookie wird in deinem Browser unabhängig von der Wahl gespeichert, um zu verhindern, dass dir diese Frage erneut gestellt wird. Du kannst deine Cookie-Einstellungen jederzeit über den Link in der Fußzeile ändern.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Logo-Größe ändern nach Scoll Navigation
#1
Hallo zusammen.
ich bin noch ziemlicher Anfänger mit Bootstrap und habe nun ein Problem, welches sich für mich trotz Google Suche leider nicht lösen lässt.
Nun hoffe ich auf Hilfe in diesem Forum ;-)
Also, ich möchte, das sich das Logo in der Navigationsleiste beim Scrollen in der Größe ändert.
Ich habe es bisher hinbekommen, dass nach dem Scrollen ein anderes Logo geladen wird (andere Farbe) aber dieses neu geladene Logo soll auch noch, sagen wir mal 30% kleiner angezeigt werden, da die Navigationsleiste nach dem Scrollen ebenfalls in der Höhe schmaler wird.
Weiß jemand was ich wo einfügen kann, damit das realisierbar ist?

Ich würde mich freuen, wenn jemand einen wertvollen Tipp für Anfänger hat.

Vielen Dank schon mal und viele Grüße

Dennis

So sieht das ganze bisher aus:

HTML:

            <nav class="navbar navbar-expand-lg navbar-dark fixed-top py-0">
                <div class="container">
                    <!-- Logo -->
                    <a href="#home" class="navbar-brand">
                        <img class="mt-2  mr-2 mb-2" src="img/logos/bildungsfonds_logo_platzhalter_weiss.svg" alt="Logo Bildungsfonds" height="35">
                    </a>

CSS:

nav.navbar.navbar-dark button:hover,
nav.navbar.navbar-dark button:focus,
nav.navbar.navbar-dark .nav-link:hover {
    color: #999999;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    font-size: 80%;
}

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
    text-decoration: underline;
}

.navbar.bg-white .navbar-nav nav-link,
.navbar.bg-white a,
.navbar.bg-white a:hover,
.navbar.bg-white button {
    color: #333 !important;
}


JS:

$(window).on("scroll", function () {
    if ($(window).scrollTop() > 100) {
        // Navigation
        $("nav.navbar").addClass("bg-white");
        $(".navbar .navbar-brand img").attr("src", "img/logos/bildungsfonds_logo_platzhalter_4c.svg");
    } else {
        //Navigation Back
        $("nav.navbar").removeClass("bg-white");
        $(".navbar .navbar-brand img").attr("src", "img/logos/bildungsfonds_logo_platzhalter_weiss.svg");
    }
});
Zitieren
#2
Da sollte es reichen wenn du die Höhe des Logos in Prozent definierst.

CSS
  1. .navbar-brand img{
  2.             height: 90%;
  3.         }


Zitieren
#3
Hallo,

vielen Dank für die Antwort.

Allerdings würde diese CSS Einstellung bedeuten, dass das Logo immer 90% kleiner ist, oder liege ich da falsch?

Ich hätte gerne, dass das Logo eine Größe von 100% hat und erst nachdem ich scrolle. sich das Logo auf 70% verkleinert.

Wie könnte ich das umsetzen mit meinem bisherigen Code?

Viele Grüße
Dennis
Zitieren
#4
Das Logo passt sich doch an die Höhe der Navbar an.
Ok poste mal eine Link.
So wie der Code oben steht geht das wohl nicht.
Schau mir das heut abend noch mal an.
Zitieren
#5
Wenn ich das richtig verstanden habe ist das dein Ziel?



Shrinking Navbar



HTML5
  1. <!-- Navigation -->
  2.     <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  3.         <div class="container">
  4.             <a class="navbar-brand" href="#"><img src="img/1.jpg" class="logo" /></a>
  5.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  6.                 <span class="navbar-toggler-icon"></span>
  7.             </button>
  8.             <div class="collapse navbar-collapse" id="navbarNavDropdown">
  9.                 <ul class="navbar-nav ml-auto">
  10.                     <li class="nav-item active">
  11.                         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  12.                     </li>
  13.                     <li class="nav-item">
  14.                         <a class="nav-link" href="#">About</a>
  15.                     </li>
  16.                     <li class="nav-item">
  17.                         <a class="nav-link" href="#">Service</a>
  18.                     </li>
  19.                     <li class="nav-item">
  20.                         <a class="nav-link" href="#">Preise</a>
  21.                     </li>
  22.                     <li class="nav-item">
  23.                         <a class="nav-link" href="#">Kontakt</a>
  24.                     </li>
  25.                     <li class="nav-item dropdown">
  26.                         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  27.                             Impressum
  28.                         </a>
  29.                         <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  30.                             <a class="dropdown-item" href="#">Action</a>
  31.                             <a class="dropdown-item" href="#">Another action</a>
  32.                             <a class="dropdown-item" href="#">Something else here</a>
  33.                         </div>
  34.                     </li>
  35.                 </ul>
  36.             </div>
  37.         </div>
  38.     </nav>





CSS
  1. main {
  2.     margin-top: 150px;
  3. }
  4. nav a {
  5.     font-size: 18px;
  6.     padding-bottom: 20px !important;
  7.     padding-top: 20px !important;
  8.     transition: all 0.3s ease;
  9. }
  10. .logo {
  11.     height: 120px;
  12.     transition: all 1s;
  13. }
  14. nav.navbar.shrink .logo {
  15.     height: 60px;
  16. }
  17. nav.navbar.shrink {
  18.     min-height: 35px;
  19.     padding: 5px 0;
  20. }
  21. .shrink .navbar-brand {
  22.     font-size: 25px;
  23. }
  24. .shrink a {
  25.     font-size: 15px;
  26.     padding-bottom: 5px !important;
  27.     padding-top: 5px !important;
  28. }
  29. .shrink .navbar-toggle {
  30.     margin: 8px 15px 8px 0;
  31.     padding: 4px 5px;
  32. }




Javascript
  1. // Shrinking Navbar
  2. $(window).scroll(function () {
  3.     if ($(document).scrollTop() > 0) {
  4.         $('nav').addClass('shrink');
  5.         $(".navbar .navbar-brand img").attr("src", "img/2.jpg");
  6.     } else {
  7.         $('nav').removeClass('shrink');
  8.         $(".navbar .navbar-brand img").attr("src", "img/1.jpg");
  9.     }
  10. });


Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
[-]
Willkommen im ersten deutschen Bootstrap-Forum
You have to register before you can post on our site.

Benutzername/E-Mail:


Passwort:





[-]
Letzte Beiträge
Schacteln 2er div s nebneinander
Last Post: The-Error
Gestern 11:37
» Replies: 3
» Views: 70
Navbar Dropdown 2 columns funktioniert n...
Last Post: Niamh
Gestern 11:29
» Replies: 2
» Views: 20
PostgreSQL oder mariaDB bei sehr grossen...
Last Post: rustybatman
Gestern 09:18
» Replies: 0
» Views: 8

[-]
Private Messages
Please login or register to use this functionality.

[-]
Statistics
» Members: 271
» Latest member: havor99
» Forum threads: 237
» Forum posts: 962

Full Statistics

[-]
Tutorials
Get Started
Text/Typography
Gridsystem
Dropdowns
Navigation Bar
Modal
Farben
Jumpotron
Popover
Formulare
Carousel (Slider)
Die Höhe von Elementen mit Klassen h-*
Flip Cards
Bild Overlay-Hover-Effekt
Google Fonts einbinden
Flexbox Bootstrap 4
Responsive Breakpoints

[-]
Wer ist online
There are currently no members online.

>