Sticky - Top Bar instead of Header

Hello,

Apologies for the delays on this Support Query.

We are looking into this and escalated this to our senior devs as this Query requires Customization. Once we get a confirmation from them, that the requirements you have listed can be achieved out of the box, we will provide you with the solutions. Else, you will need to wait for an update when we include these features and release the update. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Hello,

Thanks for your Kind Continued Patience!

We have tried checking out your Website to see if we can implement this feature without too many changes to the core codes but unfortunately, your website currently doesn't exists which is why we couldn't check the exact codes.

You can consider using the following code to see if this works:

1. CSS:

#top-bar {
	position: relative;
	width: 100%;
	height: 45px;
	border-bottom: 0;
	z-index: 399;
}

#top-bar-wrap {
	position: fixed;
	left: 0;
	width: 100%;
	height: 45px;
	background-color: #fff;
	border-bottom: 1px solid #EEE;
}

@media (min-width: 992px) {
	.sticky-header #header-wrap {
		top: 45px !important;
	}
}

1. HTML:

First, use the following code for Top Bar:

<div id="top-bar">
	<div id="top-bar-wrap">
		<div class="container">

			...

		</div>
	</div>
</div>

and this for Header:

<header id="header" class="full-header" data-sticky-offset="0">

This should work fine. You can extend according to your needs but for any further customizations, you will need to do this manually or consider hiring us for further customizations.

Let us know if we can help you with anything else or if you find any further issues.

Hello,

Thank You so much for your Interest and considering us for Customization Work. We can definitely do this customization for you and will send you an Email.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.