Canvas main menu with mega-menu submenus doesn't work on narrow bowser widow

Hello,

The issue that is occurring on the Headers is when there are too many items or Longer Items in the Menu than the available width on the Device. You will need to adjust the spacing on some devices since this is a Full Header. Consider using the following CSS:
[ch_pre type="css"]@media (min-width: 992px) and (max-width: 1199.98px) {
.menu-container > .menu-item > .menu-link {
padding-left: 11px;
padding-right: 11px;
}
}[/ch_pre]

This should definitely fix the issues. You can change the Values depending on the Number of Items you have on the menu. 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 but since this is a Full-Length Header, these adjustments are required to make the Menu fit correctly depending on each user's requirements and how much content they plan to accommodate in the Fixed Header Area. A 13-inch Macbook and 24-inch 4k Display will display the Menu in a different way once you start adding more content to the Header Area, which is why there are Utility Classes available to Show/Hide certain elements on Responsive Devices: https://getbootstrap.com/docs/5.2/utilities/display/ . Also, this is the reason why Row Grids are turned into Columns on Mobile Devices. One Size does not fit all.

Additionally, consider checking the image, the size of the Logo along with the Additional Text added is really long for the available area. And the Design and Templates are provided for a General Design System, and we don't force our own modifications to the User's Content that would make Customizations a pain. Customizations will always be part of it based on different user requirements and use cases. Also, it is definitely possible to use JS Codes to detect the responsive content of the Header but will be unbelievably expensive on the memory of the browser and the solution will not be elegant anymore once your Website's Visitors start noticing the slowness in the interactivity of your Websites. Thus, CSS is a very elegant and simple solution.

Hope this Helps! Thanks for Understanding. We assure we will definitely continue looking for more flexible solutions and release updates accordingly.

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

Hello,

Yes, this can happen with any website, we can fix this right away in the Live Previews but this is not a generic issue, as again once the user finds the Menu Items overflow on their website based on the number of items they have, they might consider it as an issue which is the reason why it is important to adjust the size of the menu on different devices. You can consider using this code to fix the position of the Mega-Menus and Sub-Menus:
[ch_pre type="css"]@media (min-width: 992px) {
.sub-menu-container,
.mega-menu-content {
top: 100px;
}

.sticky-header-shrink .sub-menu-container,
.sticky-header-shrink .mega-menu-content {
	top: 60px;
}

}[/ch_pre]

We understand but unfortunately, currently, this functionality is not available out of the box, so must be added in an update. And since this feature has never been requested before, we have never included this, as again the CSS Solutions were more useful and quick to implement for all the other users who have ever reported this issue. We cannot promise when we can include this update but we will send you a notification once this is available. Thanks for your Patience.

Additionally for this:
I think you need the make the header-misc `` responsive so it never wraps while in full-length header mode. Maybe it reduces to a 3 dot menu icon. This should be part of the basic canvas template. I shouldn’t have to customize this. please help!

You can implement this by using the Display Utility Classes: https://getbootstrap.com/docs/5.2/utilities/display/ and hiding the default .header-misc Icons on Medium Devices and display a three-dots Icon with Dropdowns: https://getbootstrap.com/docs/5.2/components/dropdowns/ adding your Custom Content, on Medium Devices as required.

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