Logo Header Resizing

[stefanh64556484]

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

[BenPleysier]

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

[stefanh64556484]

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

[BenPleysier]

This might help Animated Resizing Header On Scroll - Call Me Nick

[Nancy OShea]

I think this is what you want.  Adjust values as required.

https://codepen.io/j_holtslander/pen/doQggE

[stefanh64556484]

Hello Ben,

Hello Nancy,

thanks for your help. This is exactly what i am looking for

But in this examples there is a text logo. I need a .jpg Logo

Example from Codepen with logo:

<nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#"><img src="pictures/logo.png" width="103" height="20" /></a>

    </div>

    <div class="collapse navbar-collapse">

      <ul class="nav navbar-nav pull-right">

        <li class="active"><a href="#">Home</a></li>

        <li><a href="#">Page</a></li>

        <li><a href="#">Link</a></li>

      </ul>

    </div>

    <!--/.nav-collapse -->

  </div>

</nav>

I can see the logo, but the logo don`t resize

When i use a Text Logo then i can see resizing

How can i resize this with a .jpg logo ??

Greetings

Stefan

[osgood_]

If you are following the codepen example https://codepen.io/j_holtslander/pen/doQggE

Use this:

nav.navbar.shrink a img {

max-height: 40px;

padding-bottom: 10px !important;

padding-top: 10px !important;

}

Instead of this:

nav.navbar.shrink a {

  font-size: 15px;

  padding-bottom: 10px !important;

  padding-top: 10px !important;

}

Is 20px the 'original' height of your image? Do you want it to reduce down to 10px ???? if so alter the css above to - max-height: 10px;

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

DONT set a height or width for the image. Just go with: <img src="pictures/logo.png" alt="" />

EDITED

if you want the text to reduce as well then use both:

nav.navbar.shrink a {

  font-size: 15px;

  padding-bottom: 10px !important;

  padding-top: 10px !important;

}

nav.navbar.shrink a img {

max-height: 40px;

padding-bottom: 10px !important;

padding-top: 10px !important;

}

[stefanh64556484]

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

[osgood_]

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.

[stefanh64556484]

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

[Nancy OShea]

See CSS3 Animations

[stefanh64556484]

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

[osgood_ · Accepted solution]

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');

  }

});

[stefanh64556484]

THANK YOU VERY MUCH !!

NOW IT IS OK

YOU ARE THE BEST

Greetings

Stefan