Headline gets stuck behind header when scrolling back to top of page

now the question is - how do i change it's size on sticky? ;)

change what on sticky?

Hi Leo,

Sorry if i wasn't clear
I meant change the logo size when menu goes sticky.

Alex

Try this:

@media (max-width: 768px) {
    .mobile-header-navigation.navigation-stick .site-logo.mobile-header-logo img {
        height: 75px;
    }
}

Hi,

This makes the logo smaller but:

1. the header height stays the same
2. the logo is not centered anymore

I use the css tom has provided in order to center it -

#mobile-header .site-logo {
position: absolute;
right: calc( 50% - 50px);
}

Can you apply it so I can see?

You will need to have an extra CSS to center the smaller logo as it's using absolute positioning:

@media (max-width: 768px) {
    .mobile-header-navigation.navigation-stick .site-logo.mobile-header-logo {
        position: absolute;
        right: calc( 50% – 50px);
    }
}

This didn't change it's postion even though i've changed the 50px

I can apply it for a short time beacause the site is sort-of live already

Thanks

Can you set up a staging site so you can make changes without effecting the existing one?

We are in a different time zone and it's Christmas where we are so it might take us longer to reply.

Merry Christmas!

No hurry..

No staging site unfortunately

Thanks

Merry Christmas!

Give this a shot:

@media (max-width: 768px) {
    .main-navigation.navigation-stick .main-nav ul li a, 
    .main-navigation.navigation-stick .menu-toggle, 
    .main-navigation.navigation-stick .mobile-bar-items a {
        line-height: 50px;
    }

    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 50px;
    }
}

Hi,

Line height did change, but when i try to center the logo using the following css it does not work

.mobile-header-navigation.navigation-stick .site-logo.mobile-header-logo {
position: absolute;
right: calc( 50% – 25px);

Thanks a lot

It works like this -
@media (max-width: 768px) {
.mobile-header-navigation.navigation-stick .site-logo.mobile-header-logo img {
height:75px;
right: 15%;
}
.main-navigation.navigation-stick .main-nav ul li a,
.main-navigation.navigation-stick .menu-toggle,
.main-navigation.navigation-stick .mobile-bar-items a {
line-height: 75px;
}
}

is that css ok?

There isn't any "wrong" CSS as it's purely visual and yup looks good to me :)

Thanks for baring with me on this ;)

No problem!