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

[mike]

now the question is – how do i change it’s size on sticky? 😉

[Leo]

change what on sticky?

[mike]

Hi Leo,

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

Alex

[Leo]

Try this:

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

[mike]

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

[Leo]

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

[mike]

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

[Leo]

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.

[mike]

Merry Christmas!

No hurry..

No staging site unfortunately

Thanks

[Tom]

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;
    }
}

[mike]

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

[mike]

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?

[Leo]

There isn’t any “wrong” CSS as it’s purely visual and yup looks good to me 🙂

[mike]

Thanks for baring with me on this 😉

[Leo]

No problem!

[Author]

Posts