Lock Menu while scrolling the page

Hi @thexyzt,

Upon checking, your header menu bar is sticking on the top while page is scrolling. However, additional component on top of it is overlapping some portion of the menu bar.

That being said, you will need to add some adjustments. Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (min-width: 1025px) {
  .sticky-header.is-sticky, 
  .sticky-header.sticky-always {
    top: 46px;
  }
}

Thanks @kharisblank. Your CSS script works and resolves the Header Menu problem.

Please confirm, how to add text “Digital Services” next to Logo in the Header Menu.

Thanks?@kharisblank. The CSS script provided by you resolves the Header Menu for Desktop but not on Mobile. Please review and provide resolution

Hi @thexyzt,

Sorry for late reply.

Please confirm, how to add text “Digital Services” next to Logo in the Header Menu.

.site-branding {
  display: flex;
}

.site-branding * {
  justify-content: space-between;
  align-items: center;
}

The CSS script provided by you resolves the Header Menu for Desktop but not on Mobile. Please review and provide resolution

.sticky-active .mobile-header {
  position: sticky;
  top: 46px;
}