Slider and Mobile Navigation Issues

Hello,

We Really Apologize for the Delays in replying to your Support Query!

1. Unfortunately, currently the Mobile Breakpoints can only be changed by Customizing the Codes as mentioned in the Support Topic:
   Currently Responsive Menus are activated on Devices below 992px (no classes are used for this). Having a Mobile Menu at different breakpoints is definitely possible but there is a fair bit of Customization required to achieve this:

2. In the style.css File, you will need to change all the Media Queries that includes the #header,#primary-menu and other Header Elements from @media (min-width: 992px) to @media (min-width: 1200px) and from @media (max-width: 991.98px) to @media (max-width: 1199.98px).

3. In the js/functions.js File, you will need to change all the following codes targeting the Headers and Primary Menus:

$body.hasClass('device-xl') || $body.hasClass('device-lg')

to:

$body.hasClass('device-xl')

and:

$body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs')

to:

$body.hasClass('device-lg') || $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs')

We have already implemented this Canvas 7 which is due to be released soon but this currently cannot be used in Canvas 6.x due to Structural Constraints and many CSS Changes that has been implemented to achieve this feature.

1. We are not sure why this is occurring. Can you please try different variations of this code. Example, try the following code:

<img src="images/slider/rev/ken-1.jpg" alt="kenburns6" data-bgposition="left center" data-kenburns="on" data-duration="10000" data-ease="Linear.easeNone" data-scalestart="130" data-scaleend="100" data-bgpositionend="right center">

And check if this fixes the issue. Additionally, we would also recommend you to try a different sized image (Image with Larger Height) and check if that fixes the issue. If the issue still persists, please provide us with your FTP Details and we will definitely look into this for you. 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,

The issue that is occurring on your Header right now is when there are too many items or Longer Items in the Menu than available width on the Device. Since One Size doesn't fit all, the Best Solution for this is using CSS with Media Queries. You can consider decreasing the Size of the Text in the Menu and the Logo Sizes on these devices:

@media (min-width: 992px) and (max-width: 1440px) {
    .menu-container > .menu-item > .menu-link {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 10px;
        letter-spacing: 0px;
    }

    #header:not(.sticky-header) #logo img {
        height: 70px !important;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .header-misc {
        display: none;
    }
}

This should definitely fix the issues. You can change the Values depending on the Amount of Items you have in the menu. Hope this Helps!

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

Hello,

This is Definitely Possible! You can simply consider using the following code:

#header.sticky-header .header-misc {
    display: none;
}

This will definitely work fine. Hope this Helps!

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