Make top and main navigation both sticky

Hi,

I have two menu bars at the top of the page.

The top menu is called secondary-navigation and the main menu is called main-navigation.
With the help of the following CSS I managed to make the main-navigation sticky, but the secondary-navigation is scrolling away.

Can you tell me what I'm missing to make the secondary-navigation also sticky?

@media (min-width:769px){
    .secondary-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        z-index: 10000;
    }

    .main-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 30px;
        z-index: 1000;
    }
}