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.
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:
How to make the Topbar sticky so that it stays in the top when scrolling?
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.
This works, but mobile view, there is a problem. please check the mobile view. the bottom spacing is messed up
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.
The problem still exists.
Hi,
Please copy and re-add this again.
Regards,
PenciDesign.
Also after modified code, the appearance on desktop is messed up
Attached files: Screenshot 2023-08-24 135032.png
Now it is working fine. Thank you soo much
Hey, the featured slider is getting hidden behind the header now, across all pages
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.penci-header-wrap {margin-bottom: 90px;
}
Regards,
PenciDesign.
it helped, but please check the tablet view, both things are still not right... adding image
Attached files: tab.png
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.
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;
}
}
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.
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.