Skip to main content
S
stefanh64556484
Known Participant
March 2, 2017
Answered

Logo Header Resizing

  • March 2, 2017
  • 1 reply
  • 1788 views

Hello,

i want that a logo in the navigation menu ( header ) shrink smaller when the user scroll down. Then i have more space and it looks better !!

How can i do this ??

Greetings

Stefan

    This topic has been closed for replies.
    Correct answer osgood_

    Hello Nancy,

    i have try:

      -webkit-transition: all 0.3s ease;

      transition: all 0.3s ease;

    But the Logo has no animation !!

    body {

      padding-top: 60px;

    }

    nav .navbar-brand {

      font-size: 30px;

    }

    nav .navbar-toggle {

      margin: 13px 15px 13px 0;

    }

    nav a {

      font-size: 18px;

      padding-bottom: 20px !important;

      padding-top: 20px !important;

      -webkit-transition: all 0.3s ease;

      transition: all 0.3s ease;

    }

    nav.navbar.shrink {

      min-height: 35px;

    }

    nav.navbar.shrink .navbar-brand {

      font-size: 25px;

    }

    nav.navbar.shrink a {

      font-size: 15px;

      padding-bottom: 10px !important;

      padding-top: 10px !important;

    }

    nav.navbar.shrink a img {

      max-height: 25px;

      max-width: 51px;   

    }

    nav.navbar.shrink .navbar-toggle {

      margin: 8px 15px 8px 0;

      padding: 4px 5px;

    }

    Greetings

    Stefan


    Add a class to your image - class="logo":

    <img src="pictures/logo.png" width="103" height="20" class="logo" />

    Add the below css to your css styles:

    .logo {

    -webkit-transition: all 0.3s ease-in;

    -webkit-transform: scale(1.0);

    -ms-transition: all 0.3s ease-in;

    -ms-transform: scale(1.0);

    -moz-transition: all 0.3s ease-in;

    -moz-transform: scale(1.0);

    transition: all 0.3s ease-in;

    transform: scale(1.0);

    }

    .logo_resize {

    -webkit-transform: scale(0.8);

    -ms-transform: scale(0.8);

    -moz-transform: scale(0.8);

    transform: scale(0.8);

    }

    Add $('.logo').addClass('logo_resize');    &     $('.logo').removeClass('logo_resize');   to the function as shown below:

    $(window).scroll(function() {

      if ($(document).scrollTop() > 50) {

        $('nav').addClass('shrink');

    $('.logo').addClass('logo_resize');

      } else {

        $('nav').removeClass('shrink');

    $('.logo').removeClass('logo_resize');

      }

    });

    1 reply

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    March 2, 2017

    Can you please elaborate, at the moment it is hard to visualise what you want.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    S
    stefanh64556484Author
    Known Participant
    March 2, 2017

    Hello Ben,

    in many Word Press Themes you can see this effect

    Please watch this example:

    Enfold Theme Demo – a Kriesi.at Theme

    When you scroll down the Logo will be smaller

    Do you have an Idea how can i do this in Dreamweaver ??

    Thanks for your help

    Greetings

    Stefan

    S
    stefanh64556484Author
    Known Participant
    March 3, 2017

    stefanh64556484  wrote

    Hello,

    thank you

    I have try this, but when i scroll down the Logo disappears !!

    body {

      padding-top: 60px;

    }

    nav .navbar-brand {

      font-size: 30px;

    }

    nav .navbar-toggle {

      margin: 13px 15px 13px 0;

    }

    nav a {

      font-size: 18px;

      padding-bottom: 20px !important;

      padding-top: 20px !important;

      -webkit-transition: all 0.3s ease;

      transition: all 0.3s ease;

    }

    nav.navbar.shrink {

      min-height: 35px;

    }

    nav.navbar.shrink .navbar-brand {

      font-size: 25px;

    }

    nav.navbar.shrink a {

      font-size: 15px;

      padding-bottom: 10px !important;

      padding-top: 10px !important;

    }

    nav.navbar.shrink a img {

      max-height: 10px;

      padding-bottom: 10px !important;

      padding-top: 10px !important;

    }

    nav.navbar.shrink .navbar-toggle {

      margin: 8px 15px 8px 0;

      padding: 4px 5px;

    }

    What is wrong ??

    Greetings

    Stefan

    Try removing

    padding-bottom: 10px !important;

    padding-top: 10px !important;

    From:

    nav.navbar.shrink a img {

    max-height: 40px;

    padding-bottom: 10px !important;

    padding-top: 10px !important;

    }

    Theres seems little point in reducing a logo from 20px high to 10px high.


    Hello,

    thank you very much. Now it is OK

    The only thing is that the logo has no animation ( it shrinks immediately when you scroll down )

    The Text shrink with an animation ( i think this looks better )

    Do you have a idea how can i do this ??

    Greetings

    Stefan

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices