How to resize sticky header?

[solidsn2004]

Hi,

I have enabled sticky header and header resizing from the backend but when I scroll down the page the header barely changes.
Having worked quite a lot in the Dante theme I find it weird that Atelier doesn’t have more customisation options for header resizing (unless I can’t find it).

I have used the custom css below in order to resize it the way I want (60px):

.is-sticky > .sticky-header-resized{
height:60px !important;
}

.is-sticky #logo img{
height: 40px;
}

.full-center.resized-header #header{
    height: 60px;
}

Can you help me position navigation bar and logo inside the resized header?

Thanks a lot.

PS. To see the website please use same password as admin credentials.

[solidsn2004]

Any ideas guys?

[Mohammad – SUPPORT]

Hi,
Please provide me page password to view it.
Thanks
Mohammad

[solidsn2004]

Hi Mohammad,

As I said in my first post password to see page is the same as your login.

Thanks

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.full-center.resized-header #header, .full-center.resized-header .float-menu, .header-split.resized-header .float-menu {
    height: 80px !important;
}

Thanks
Mohammad

[solidsn2004]

Hello Mohammad,

Thanks for your code but unfortunately its not working…
As I said I want to keep the height of the resized header to 60px (not 80 as per your code) and center the logo and the navigation menu.

Any other suggestion?

Thanks in advance.

[solidsn2004]

Any updates on this Mohammad?

[Mohammad – SUPPORT]

Hi,
Remove the last code and use this new code:-

.full-center.resized-header #header, .full-center.resized-header .float-menu, .header-split.resized-header .float-menu {
    height: 60px !important;
}
.full-center.resized-header #logo, .full-center.resized-header #logo.no-img a {
    height: 60px !important;
}

Thanks
Mohammad

[solidsn2004]

Almost there,

As you can see logo is aligned good now but navigation menu stays the same…

[Mohammad – SUPPORT]

Hi,
Please use also this custom css code:-

.full-center nav#main-navigation {
    margin-top: -30px !important;
    display: block !important;
    float: right !important;
}

Thanks
Mohammad

[solidsn2004]

Now the navigation bar always stays on top when you load the page (-30px). I want it to align in the middle when you scroll down not when you load the page 🙂

[Mohammad – SUPPORT]

Hi,
Remove the last code and use this new code.

.full-center.resized-header nav#main-navigation {
    margin-top: -30px !important;
    display: block !important;
    float: right !important;
}

Thanks
Mohammad

[solidsn2004]

Thanks a lot this worked!

[Mohammad – SUPPORT]

Hi,
Glad 🙂 to help you.
Thanks
Mohammad

[carlotte]

Hi,

Same question here,

Using the given codes above, the logo in sticky header becomes smaller when scrolling down, but the sticky header itself stays very high. How to make it less high (80px)?
See live site: http://www.mistymountain.nl/

Ive used the code:

.is-sticky > .sticky-header-resized{
height:80px !important;
}

.is-sticky #logo.has-img a > img {
height: 60px;
}

.full-center.resized-header #header, .full-center.resized-header .float-menu, .header-split.resized-header .float-menu {
height: 80px !important;
}

.full-center.resized-header #logo, .full-center.resized-header #logo.no-img a {
height: 60px !important;
}