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.
- 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
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.
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.
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
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.
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.
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?
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.
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?
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.
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.
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; } }Hi,
I've checked your site, the topbar already displays like the screenshot below:
Please check again.
Regards,
PenciDesign.
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
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.
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.
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.
Hi,
Please use the code I've sent in the previous reply here: https://pencidesign.ticksy.com/ticket/3023451/#comment-16148860
Regards,
PenciDesign.
Hi,
Please clear all the browser cache the check again, here is a screenshot from my browser:
Regards,
PenciDesign.
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
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.
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.
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.
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?
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.
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.
attachment
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.
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?
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.
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.
attachment
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.
Thanks. during the download, the main menu on all devices twitches. please help me fix it.
attachment
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.
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.
updated the theme to the latest version and everything is ok
you can close the ticket thank you