Archived topic

Change padding only in sticky Menu

3 replies · Started by Katrin on April 30, 2020

Viewing posts 1–4 of 4

April 30, 2020 at 3:57 am #1262717

Hey,

I added a CSS Padding to my menu in the desktop version.

@media (min-width: 768px) {
.main-navigation .inside-navigation {
padding: 30px 30px 10px 30px;
}
}
@media (max-width: 1024px) {
.main-navigation .inside-navigation {
padding: 5px 10px 5px 10px;
}
}

The menu is sticky, but only appears when scrolling up. I want the menu to be small while scrolling up, so the padding shouldn’t apply for it. Can you provide me a Code which realize that?

Thank you,
Katrin

April 30, 2020 at 4:26 am #1262759

Hi there,

try this CSS:

@media (min-width: 768px) {
    .main-navigation:not(.is_stuck) .inside-navigation {
        padding: 30px 30px 10px 30px;
    }
}

@media (max-width: 1024px) {
    .main-navigation:not(.is_stuck) .inside-navigation {
        padding: 5px 10px 5px 10px;
    }
}

April 30, 2020 at 4:33 am #1262768

Great, that works! Thank you :)

April 30, 2020 at 4:34 am #1262773

Glad to be of help

This archived topic is closed to new replies.

Start building better websites today.