Overlapping header logo & resize on scroll

[Harpa83]

Hi guys!

My site is www.eldhusatlasinn.is (X and Integrity stack)
PW: Loa

I have an overlapping header logo using this custom CSS:

.x-navbar-inner {
min-height: 60px;
max-height: 60px;

}

.x-brand img {
position: fixed;
background-color: transparent;
width: 250px;
margin-top:8px;
}

@media (max-width: 450px) {
.x-brand img {
position: relative;
width: 250px;
margin-top: 0px;
margin-left: 30px;
}

}

Is it possible to shrink the logo on scroll? Maybe inside the navbar on scroll?

Can you possibly help with this?

[lely]

Hi @Harpa83,

It is possible with further custom CSS. Here’s your guide on how to inspect elements:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

You can see when you inspect navigation container, once you scroll, there is an additional class added to it:x-navbar-fixed-top Using that class you can control the size of your image and reset current position and margins.

For more guidance see this: https://screencast-o-matic.com/watch/cYh1Idg1Eu

Further customization is outside the scope of our support. Thank you for understanding