How to make topbar sticky? | PenciDesign Support

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please send me your WordPress admin account in a PRIVATE reply.
I'll log in and try to help you customize it.

Regards,
PenciDesign.

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

If you want the header to work perfectly on all devices, I recommend you build the custom header layout with the Penci Header Builder. Here is a document detail:

Regards,
PenciDesign.

Amrrit Achipallya replied

3 years ago

Customer Reply

it isnt working either on desktop, or on tablet or on desktop. if it works, the slider is getting cut or there is extra white space ... you have given me codes in bits and pieces, can you consolidate and give me, and keep in mind responsiveness for all three formats of devices? humble request.

this is what i have so far

.penci-top-bar.topbar-menu.topbar-fullwidth {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
#navigation,
.is-sticky #navigation {
top: 30px !important;
position: relative;
}
@media only screen and (max-width: 767px) {
#navigation,
.is-sticky #navigation {
top: 50px !important;
}
}
.penci-header-wrap {
margin-bottom: 90px;
}
@media only screen and (min-width: 768px) and (max-width: 1169px) {
#navigation,
.is-sticky #navigation {
top: 70px !important;
}
}

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please add this CSS code to your site:

@media only screen and (min-width: 768px) and (max-width: 1169px) {
  #navigation,
  .is-sticky #navigation {
    top: 70px !important;
  }
}

Regards,
PenciDesign.

Amrrit Achipallya replied

3 years ago

Customer Reply

it helped, but please check the tablet view, both things are still not right... adding image

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-header-wrap {
  margin-bottom: 90px;
}

Regards,
PenciDesign.

Amrrit Achipallya replied

3 years ago

Customer Reply

Hey, the featured slider is getting hidden behind the header now, across all pages

Amrrit Achipallya replied

3 years ago

Customer Reply

Now it is working fine. Thank you soo much

Amrrit Achipallya replied

3 years ago

Customer Reply

Also after modified code, the appearance on desktop is messed up

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please copy and re-add this again.

Regards,
PenciDesign.

Amrrit Achipallya replied

3 years ago

Customer Reply

The problem still exists.

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please modify the CSS code like the following below:

.penci-top-bar.topbar-menu.topbar-fullwidth {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
#navigation,
.is-sticky #navigation {
  top: 30px !important;
  position: relative;
}
@media only screen and (max-width: 767px) {
  #navigation,
  .is-sticky #navigation {
    top: 50px !important;
  }
}

Regards,
PenciDesign.

Amrrit Achipallya replied

3 years ago

Customer Reply

This works, but mobile view, there is a problem. please check the mobile view. the bottom spacing is messed up

PenciDesign Supporter replied

3 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-top-bar.topbar-menu.topbar-fullwidth {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}
#navigation,
.is-sticky #navigation {
  top: 30px !important;
  position: relative;
}

Regards,
PenciDesign.

Amrrit Achipallya started the conversation

3 years ago

Conversation Start

How to make the Topbar sticky so that it stays in the top when scrolling?