Mobile nav overlay (not push content)

Hello,

Thanks for your Patience!

1. These Modifications comes under Customization as these can be done using the Custom CSS and Utility Classes. We currently do not provide Customization related Support.

Use the following CSS:

.primary-menu {
	z-index: 499;
	background-color: #FFF;
}

.menu-container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-right: var(--bs-gutter-x, 0.75rem);
	padding-left: var(--bs-gutter-x, 0.75rem);
}

@media (min-width: 576px) {
	.menu-container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.menu-container {
		max-width: 720px;
	}
}

and these Utility Classes on the .primary-menu Element:

<nav class="primary-menu position-absolute start-0 w-100 align-wide-full">

1. You can add the data-trigger-speed="500" Attribute to the .primary-menu Element.

This should definitely work fine. Hope this Helps!

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

Hello,

1. Consider using this code:

@media (max-width: 991.98px) {
	.primary-menu {
		z-index: 499;
		background-color: #FFF;
	}

	.menu-container {
		margin-left: auto;
		margin-right: auto;
		padding-right: var(--bs-gutter-x, 0.75rem);
		padding-left: var(--bs-gutter-x, 0.75rem);
	}
}

@media (max-width: 575.98px) {
	.menu-container {
		max-width: 100%;
	}
}

@media (max-width: 767.98px) {
	.menu-container {
		max-width: 540px;
	}
}

@media (max-width: 991.98px) {
	.menu-container {
		max-width: 720px;
	}
}

1. Transparent Mobile Headers are currently not supported. We will surely consider adding this in Our Future Updates and will send you a Notification once this is available.

Hope this Helps!

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

Hello,

Apologies for the Inconveniences caused!

1. We worked more on this. Consider using this CSS Code:

@media (max-width: 991.98px) {
	.primary-menu {
		position: absolute;
		align-items: start;
		justify-content: start;
		z-index: 499;
		background-color: #FFF;
		top: 100%;
		left: 0;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		max-width: 100vw !important;
		width: 100vw !important;
		max-height: 70vh;
		overflow-y: scroll;
	}

	.menu-container {
		margin-left: auto;
		margin-right: auto;
		padding-right: var(--bs-gutter-x, 0.75rem);
		padding-left: var(--bs-gutter-x, 0.75rem);
	}
}

@media (max-width: 575.98px) {
	.menu-container {
		max-width: 100%;
	}
}

@media (max-width: 767.98px) {
	.menu-container {
		max-width: 540px;
	}
}

@media (max-width: 991.98px) {
	.menu-container {
		max-width: 720px;
	}
}

Remove the Classes added previously to the .primary-menu Element.

1. As we have mentioned multiple times earlier, we currently do not provide Customization Support. Consider reading the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to manually code this or Hire a Freelancer to help you out.

Hope this Helps!

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

Hello,

Apologies but as we have mentioned earlier, these customizations must be done manually as this is the part of work you do for the Client.

Secondly, the Transparent Header on Mobile Devices is currently not supported out of the box as it requires a lot of things to work together. And due to structural constraints, this cannot be provided as a quick edit, as we will have to work on this thoroughly in order to release this in an Update.

So we request you to please keep your questions only related to the Features currently included with Canvas.

Thanks for Understanding.

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

Hello,

Transparent Menus are definitely possible but as we have mentioned this will take way much of our development time and comes under Customization so we wouldn't be able to help you with that at the moment.

Again, the second option is also not supported and you will need to hire a Freelancer to hire for Customizations like these.

We are happy to help with Minor Customizations which does not require Structural Changes to the Core Codes of Canvas but beyond that is out of our control. Thanks for Understanding.

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