Sticky header covers sidebar on scroll

Support
#1

Hi I’m using the Icon stack with Pro header builder, I have just enabled the sidebar on blog page and when you scroll the header extends to cover the search in the sidebar.
Is this a setting I’ve missed or dose it need custom css?

#2

Hello @Chedy,

Thanks for asking. :slight_smile:

I tried looking at the Pro Theme website urls you have assigned in your licence manager. But I didn’t came across a website that resembles problem you are facing. Ins that regards, can you please share website URL for us to take a closer look?

Thanks.

#3

Sorry yes the url helps
https://organicmotion.com.au/ogm/

Blog index with sidebar

#4

Hi @Chedy,

Add this in your X > Theme Options > CSS:

@media (min-width: 1200px){
.blog .e577-5.x-bar .x-bar-fixed {
width:87% !important;
}
}

Let us know how it goes.

Thanks.

#5

Hi thanks for the quick reply… but no Joy, I added the code but it had no effect?

Cheers Chedy

#6

Is there something that can be done in Pro header builder? I only need it for the Bolg index and blog posts, So it’s possible to create a specific header for just those pages…

Thanks again Chedy

#7

Hi There,

Could you please share us with your admin account so we can take a closer look?

Thank you.

#8

Hi Please find the secure note above…

Thanks!

#9

Hi There,

Thank you for the credentials, but that seems to have no access on your admin dashboard.

Yes, that is possible. You can duplicate your current header and assign the duplicate on the Posts Page and All Posts


Then to resolve the issue with sticky bar and sidebar, please add the custom CSS below on the Sticky Bar’s Element CSS area.



@media (min-width: 768px) {
	$el {
		width: calc(100% - 250px) !important;
	}
}

Hope it helps,
Cheers!

#10

Hi I’m sorry I had the user role set to subscriber, I have changed it to administrator you should be able to get in now…

#11

Hello There,

Thanks for updating it. I have logged in and resolved the issue for you. I added this custom css in the theme options > custom css instead:

@media (min-width: 1200px){
  .blog .x-bar.x-bar-fixed {
    width: calc(100% - 250px) !important;
  }
}

Please check your site now.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.