Archived topic
Sticky Top Bar and Merge with Navigation Menu
9 replies · Started by Josef Carlo on March 21, 2021
Hey Team,
I have a top bar and added the sticky codes as per your forums. Unfortunately, it does not work for me.
The code I added is:
.top-bar
{
background-color: #e8f0fe;
color:#545454;
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 99;
}
Also, is there a way to merge this with my navigation menu. I looked here https://docs.generatepress.com/article/top-bar-widget-area/ but I do not see the option to merge.
Thanks in advance!
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Website is https://mostaco.ph
Just to make sure, so you want this entire part to be sticky?
https://www.screencast.com/t/fJMIAdLpW
And what do you mean by merge?
There isn't an option to merge the header with top bar - can't picture how that would work.
Let me know :)
Let's just have the blue top bar sticky. Thanks!
So disable the sticky navigation in the customizer:
https://docs.generatepress.com/article/sticky-navigation/
Then add this CSS:
.top-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
I disabled the sticky navigation and added the CSS but the blue bar is still not sticky.
Can you remove the merged header element first?
Then use the edited CSS above:
https://generatepress.com/forums/topic/sticky-top-bar-and-merge-with-secondary-navigation/#post-1704351
Hey Leo,
I will have to close this ticket for now. Thanks!
No problem :)
