ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Dante
• April 4, 2016 at 2:38 pm #259543
  marekpolak

  Member

  Post count: 4

  Dear Support,

  How can I make the sticky header not to move the logo and menu when scrolling?
  I have managed to achieve fully transparent header with the Custom CSS, but when I start scrolling the logo and navigation menu “jumps by approximately 20-30 pixels.

  Below is the custom CSS I have attached to the theme so far:

  —
  .is-sticky #header.sticky-header .sticky-header-resized {
  background-color: transparent!important;
  border-bottom: none!important;
  -webkit-box-shadow: none !important;
  -webkit-linear-gradient: none !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  }

  #header .is-sticky .sticky-header {
  background-color: transparent!important;
  background: -webkit-linear-gradient(top, transparent, transparent)!important;
  background: -moz-linear-gradient(top, transparent, transparent)!important;
  background: -ms-linear-gradient(top, transparent, transparent)!important;
  background: -o-linear-gradient(top, transparent, transparent)!important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  }

  .sticky-header-resized #logo img {
  width: 350px!important;
  }
  —

  I have had a look at the other forum posts and managed to keep the logo size consistent by using the last entry in CSS, but still cannot sort out the movement.

  Your help would be greatly appreciated.

  Regards

  Marek

  April 5, 2016 at 12:16 pm #259691
  David Martin – Support

  Moderator

  Post count: 20834

  Hi,

  Please test this:

  #header .is-sticky .sticky-header > .row {
      margin: 0 auto;
  }

  Thanks.

  April 5, 2016 at 12:23 pm #259693
  marekpolak

  Member

  Post count: 4

  Hi David,

  Thanks a lot. This seem to solve the movement of the #logo element, but menu still jumps when scrolling.

  I appreciate your help.

  Regards

  Marek

  April 6, 2016 at 11:19 am #259866
  David Martin – Support

  Moderator

  Post count: 20834

  No problem, for that please also add this:

  .search-off .header-3 .is-sticky #main-navigation ul.menu {
      padding-right: 60px;
  }

  Thanks.

• Back to forum

  Posted in: Dante