Is it possible to have a floating logo that re-size with sticky header?

[fionalu]

Hi,

I’m wondering if this logo/header effect is possible in Dante: https://www.underarmour.com/en-us/mens

In short, the logo is longer than header bar, and it will re-size bigger or smaller with the header when scroll up or down. (I don’t need menu text moving left and right like the example, just the red logo motion part)

The logo settings in the theme options didn’t worked like this, meaning the logo’s height couldn’t be bigger than header’s height.

Other than that I think Dante’s sticky header function will take it from there, so before adding a floating position absolute div and customize the re-size motion in the old fashioned way myself, maybe you guys have some better idea about how to change the logo’s height and achieve this?

Thanks 🙂

Fiona

[Mohammad – SUPPORT]

Hi,
Just increase the height of logo. It shoud be higher than header height.
Thanks
Mohammad

[fionalu]

Hi Mohammad,

As you can see in my site: http://cbwp.bitnamiapp.com/wordpress/

The method you provided is not working as the example I mentioned, the header’s height will automatically adjust with a bigger logo, and so the header became huge.

What I’m trying to get is a logo “longer” than the header, the logo’s bottom will fall outside of the header, and logo’s height is bigger than the header.

In the meantime the header’s height stays at minimum (89px or less), and they all have the sticky header’s scrolling re-size motion. If I’m not clear enough, please check the example I gave previously.

Any way to do this?

Thanks 🙂

Fiona

[fionalu]

I made a pic just to illustrate better, please see the attachments.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.sticky-wrapper{
height:145px !important;
}
.sticky-header-resized{
height:110px !important;
}

Thanks
Mohammad

[fionalu]

Hi Mohammad,

I’ve pasted the code you gave into theme options/custom CSS section, and now there’s four problem:

1. There’s a white gap between the logo and top bar, how to remove it only for logo, without moving the menu text?

2. The menu text are way up top, how to make them lower? (I tried and the search icon stayed, they’re in different divs?)

3. When scrolling with mouse, the re-size motion completes in 3-4 scrolls on my computer, that’s say the first and last scroll are the big/small logo, the ones in between (when div class changes to “sticky-wrapper is-sticky”) header height changes back to the huge header.

You could see the effect on my site: http://cbwp.bitnamiapp.com/wordpress/

I tried to use the code below but didn’t work.

.is-sticky {
height:110px !important;
}

4. When I go back to theme options to change the logo’s width and height settings and hit “Save”, two things happen:
4-1. The header’s height went back to the huge header, until I save the custom CSS section again.
4-2. The logo’s height will change at the first step, but after I save the custom CSS section, it went back to previous size.

I’m not sure what to do here, please advise.

Thanks!

Fiona

[Mohammad – SUPPORT]

Hi,
1- Please use this custom css code:-

.header-6 #logo, .header-7 #logo{
top:0px !important;
}

2- use this custom css code:-

#main-navigation{
margin-top:20px !important;
}
.search-nav{
margin-top:20px !important;
}

3-  Please use this custom css code:-

.sticky-header-resized #logo img, .header-container > .row, .header-5 header .container > .row, .header-6 header > .container > .row {
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
transition: height 1s ease-in-out, width 0.5s ease-in-out;
-moz-transition: height 1s ease-in-out, width 0.5s ease-in-out;
-webkit-transition: height 1s ease-in-out, width 0.5s ease-in-out;
-o-transition: height 1s ease-in-out, width 0.5s ease-in-out;
}

`
Thanks
Mohammad

[fionalu]

Hi Mohammad,

Thanks for your help! I’ve managed to get the effect I need, and I couldn’t do it without you 🙂

Just two last things:

1. After scrolling down and the header sticks to the top, the menu text is too low because we adjusted its padding-top to 20px earlier.

I’m wondering if there’s a way to let the menu text (and search icon) normally had padding-top:20px, but after scrolling down with the header sticks, change the padding-top to 0?

2. In mobile responsive mode, the header’s height is bigger than logo’s height again. How to make this effect responsive?

Thank you so much!

Fiona

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
.sticky-header-resized #mian-navigation{
margin-top:0px !important;
}

/*For mobile*/
@media only screen and (max-width: 767px) {
.sticky-wrapper{
height:75px !important
}
}
Thanks
Mohammad

[fionalu]

Hi Mohammad,

Thank you soooo much! I just love your great support and how the site’s logo looking now, truly grateful to you guys 🙂

Fiona

[Mohammad – SUPPORT]

Hi,
You welcome and give us five start rating at themeforest.
Thanks
Mohammad