NavigatorZ replied
Customer Reply
you can close the ticket thank you
Public Ticket #20754
TopBar
Conversation thread
NavigatorZ replied
Customer Reply
updated the theme to the latest version and everything is ok
NavigatorZ replied
Customer Reply
Hello. I decided to make a new main menu and Toolbar using Header Builder. In general, everything worked out, but I don't know how to fix one detail, when scrolling down, the main menu completely overlaps the icons of social networks and part of the widget from the sidebar. Please help me to make the main menu stick together with the topbar at the very beginning of scrolling.
NavigatorZ replied
Customer Reply
The video shows that the main menu appears lower than necessary and then rises up to the TopBar. And it's all clearly visible to the naked eye.
NavigatorZ replied
Customer Reply
attachment
NavigatorZ replied
Customer Reply
Thanks. during the download, the main menu on all devices twitches. please help me fix it.
PenciDesign Supporter replied
Staff Reply
Hi,
Please add this CSS code to your site:
@media only screen and (max-width: 960px) {
.penci-headline,
.penci-top-bar .pctopbar-item.penci-topbar-trending {
display: block;
padding: 0 10px;
margin: 0;
}
#header {
margin-top: 32px;
}
.is-sticky #navigation {
top: 32px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1169px) {
.sticky-wrapper.is-sticky #navigation {
top: 32px !important;
}
.is-sticky #navigation.header-6 #logo img {
padding: 10px 0;
}
}
Regards,
PenciDesign.
NavigatorZ replied
Customer Reply
attachment
NavigatorZ replied
Customer Reply
Thanks. Everything is OK on mobile! but nothing has changed on the tablet version: the main menu twitches when scrolling and the distance has not decreased.
PenciDesign Supporter replied
Staff Reply
Hi,
Please add this CSS code to your site:
@media only screen and (max-width: 767px) {
.penci-headline,
.penci-top-bar .pctopbar-item.penci-topbar-trending {
display: block;
padding: 0 10px;
margin: 0;
}
#header {
margin-top: 32px;
}
.is-sticky #navigation {
top: 32px !important;
}
}
Regards,
PenciDesign.
NavigatorZ replied
Customer Reply
Thanks. On the mobile and tablet versions, the TopBar has extra space at the top and bottom. How do I make this place not exist, just like on the PC version?
PenciDesign Supporter replied
Staff Reply
Hi,
Please add the following CSS code to your site:
@media only screen and (max-width: 767px) {
.is-sticky #navigation.header-6 #logo img {
max-height: 58px;
padding: 10px 0;
}
#navigation {
position: fixed;
}
}Regards,
PenciDesign.
NavigatorZ replied
Customer Reply
attachment
NavigatorZ replied
Customer Reply
Thanks. On the PC version, there is no more jerk when scrolling! On the mobile version, the twitching and resizing of the main menu continues! can this be fixed? On the PC version, the main menu completely covers the icons of social networks.
PenciDesign Supporter replied
Staff Reply
Hi,
Please add this CSS code to your site:
@media only screen and (min-width: 961px) {
.sticky-wrapper.is-sticky #navigation,
.is-sticky #navigation.menu-item-padding,
.is-sticky #navigation.menu-item-padding,
#navigation.sticky-active,
#navigation.sticky-active.menu-item-padding,
#navigation.sticky-active.menu-item-padding {
height: 75px !important;
}
.is-sticky #navigation.header-6 .pcheader-icon>a,
.is-sticky #navigation.header-6.menu-item-padding ul.menu>li>a {
height: 75px !important;
line-height: 75px !important;
}
.is-sticky #navigation.header-6 #logo img {
padding: 12px 0;
max-height: 75px;
}
#navigation {
position: fixed;
}
}
Regards,
PenciDesign.
NavigatorZ replied
Customer Reply
The topbar for smartphone is now fixed. thank you! How to make the sticky top and main menu not twitch during the start of scrolling (on all devices) and not overlap the icons of social networks on the PC?
PenciDesign Supporter replied
Staff Reply
Hi,
Please add this CSS code to your site:
@media only screen and (max-width: 767px) {
.penci-top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
#header {
margin-top: 65px;
}
.is-sticky #navigation {
top: 65px !important;
}
}
@media only screen and (max-width: 600px) {
.is-sticky #navigation {
top: 65px !important;
}
}
Regards,
PenciDesign.
NavigatorZ replied
Customer Reply
Thanks. I slightly changed your code, I would like the date to be displayed as well as on the PC on the right edge, please look, did I do it right? And I removed the widget display by 100% width - it's better to disable the sidebar content on the tablet altogether, just as I did on smartphones. How to do it? The topbar is fixed on the PC and tablet versions, but not fixed on the smartphone version. Please help me fix it on my smartphone.
PenciDesign Supporter replied
Staff Reply
Hi,
1. Please add the custom CSS code to your site:
@media only screen and (min-width: 768px) and (max-width: 1169px) {
#header {
z-index: 999999;
}
.penci-headline .pctopbar-item {
float: left;
display: block;
width: 50%;
max-width: unset;
}
.penci-headline .pctopbar-item:last-child {
line-height: 32px;
}
#header {
margin-top: 55px;
}
.tradingview-widget-container,
.tradingview-widget-container iframe {
width: 100% !important;
}
.sticky-wrapper.is-sticky #navigation {
top: 55px !important;
}
}
2. When you access your site with the tablet/mobile screen view, the content & sidebar will show as the row, so in the code above, I've forced the iframe display as 100% width of the screen.
Regards,
PenciDesign.
NavigatorZ replied
Customer Reply
This is not a correct display: 1) the date is not displayed symmetrically to the "Best messages" section 2) a large distance from the top and bottom, which is not present on the PC version 3) sidebar banners are not displayed symmetrically
PenciDesign Supporter replied
Staff Reply
Hi,
Please clear all the browser cache the check again, here is a screenshot from my browser:
Regards,
PenciDesign.
PenciDesign Supporter replied
Staff Reply
Hi,
Please use the code I've sent in the previous reply here: https://pencidesign.ticksy.com/ticket/3023451/#comment-16148860
Regards,
PenciDesign.
PenciDesign Supporter replied
Staff Reply
Hi,
Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
@media only screen and (min-width: 768px) and (max-width: 1169px) {
.penci-headline .pctopbar-item {
float: left;
display: block;
width: 50%;
max-width: unset;
}
#header {
margin-top: 72px;
}
}
Regards,
PenciDesign.
NavigatorZ replied
Customer Reply
hello. I cleared the Wp-optimizer cache and temporarily disabled caching, cleared the entire browser history and opened the site in incognito mode. The Topbar is displayed, but all the problems listed above have persisted.
PenciDesign Supporter replied
Staff Reply
Hi,
The problem because your site still serves the content from the cache. About this case, please clear all the WP-Optimize cache then check again in incognito/private mode.
Regards,
PenciDesign.
NavigatorZ replied
Customer Reply
Hello.
There are also several problems:
- the problem of overlapping icons of social networks photo attached;
- there are problems with yanking the main menu during the start of scrolling;
- topbar is not fixed in the mobile version;
- in the tablet version, the top bar is very wide, and the date is shifted to the center, the main menu is not displayed and all the content is not displayed in the center. photo attached
PenciDesign Supporter replied
Staff Reply
Hi,
I've checked your site, the topbar already displays like the screenshot below:
Please check again.
Regards,
PenciDesign.
NavigatorZ started the conversation
Conversation Start
hello. How do I make the Topbar stick so that when scrolling it moves down? I found a custom CMS in one of the tickets, but when applying the Topbar just doesn't show up.
@media only screen and (min-width: 767px) {
.penci-top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
#header {
margin-top: 32px;
}
.sticky-wrapper.is-sticky #navigation {
top: 32px !important;
}
}
Want to join this conversation or access attachments? Sign in first.
