The latest Matrix Themes updates and bug fixes of June 2020
Sticky elements issue
In some Matrix Themes ( templates with sticky header ) you might see a bug with the header like you see in below screenshot. The error is specially visible in Firefox browser.
How to Fix
In admin mode, go to Matrix Themes menu > Updates and find a quick tutorial with this issue.
All you have to do is to remove the current version of matrix js file and replace with the latest version matrix-1.6.3.js which includes the sticky plugin updates
Once you replace the js file in your website, you need to make a small change in CSS:
.fixed,.fixed-mobile {
z-index:203001!important;
}
Alternative fixed header
If you're using advanced package, a tutorial with an alternative fixed header can be found in new updated section "Matrix Add-Ons"
Logo image issue
In Firefox browser, the header in templates with logo image inside the sticky element, doesn't appear smoothly on page load. This is happens because image is loaded after other elements in header ( navigation, shopping cart etc ).
To fix it, you add the height of the logo directly in HTML using inline style:
<div class="hs-logo max-height-70">
<div class="is--flex no-padding" style="height:90px;">
<a href="/"><img src="logo.png" alt="Custom Jimdo theme" /></a>
</div>
</div>
- Tip! How to add a good quality logo image
Create a hidden page and add a logo image to content using module "Photo".
Resize it for your own preference and then using the developer tools ( in view mode ) inspect it's url which should look like this:
<img srcset="https://image.jimcdn.com/app/cms/image/transf/dimension=214x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png 214w, https://image.jimcdn.com/app/cms/image/transf/dimension=320x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png 320w, https://image.jimcdn.com/app/cms/image/transf/dimension=428x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png 428w" sizes="(min-width: 214px) 214px, 100vw" id="cc-m-imagesubtitle-image-11375482894" src="https://image.jimcdn.com/app/cms/image/transf/dimension=214x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png" alt="" class="" data-src-width="769" data-src-height="165" data-src="https://image.jimcdn.com/app/cms/image/transf/dimension=214x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png" data-image-id="7873629794" name="cc-m-imagesubtitle-image-11375482894"/>
Copy it's url path and replace the default png logo in HTML:
<div class="hs-logo max-height-70">
<div class="is--flex no-padding" style="height:90px;">
<a href="/"><img src="logo.png" alt="Custom Jimdo theme" /></a>
</div>
</div>
<div class="hs-logo max-height-70">
<div class="is--flex no-padding" style="height:90px;">
<a href="/"><img srcset="https://image.jimcdn.com/app/cms/image/transf/dimension=214x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png 214w, https://image.jimcdn.com/app/cms/image/transf/dimension=320x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png 320w, https://image.jimcdn.com/app/cms/image/transf/dimension=428x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png 428w" sizes="(min-width: 214px) 214px, 100vw" id="cc-m-imagesubtitle-image-11375482894" src="https://image.jimcdn.com/app/cms/image/transf/dimension=214x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png" alt="" class="" data-src-width="769" data-src-height="165" data-src="https://image.jimcdn.com/app/cms/image/transf/dimension=214x10000:format=png/path/s1aeecbbb2a5865b1/image/i8c9057c13076888c/version/1591027266/image.png" data-image-id="7873629794" name="cc-m-imagesubtitle-image-11375482894"/> alt="Custom Jimdo theme" /></a>
</div>
</div>
Shopping cart issue
If shopping cart appears inside the same section with navigation ( see Lemberg theme ), the navigation might have "jumping effect" on page load.
In latest version of Lemberg theme, it has been added fadeIn effect to the whole header.
You can do it in just two steps:
01. In CSS, add display:none; to hs-header class:
.hs-header {
background:#111;
width: 100%;
float:left;
padding: 0;
top:0;
left:0;
z-index:203001;
position:relative;
display:none;
}
02. Add fadeIn effect to hs-header on the top of HTML ( design> custom template> HTML):
...
// bg title
$('.bg-caption,.single-caption,.hs-header').fadeIn(1000).css('display','block');
...
Mobile navigation issue
If you have very long list of navigation items ( Altona theme or any other multilingual theme), on mobile devices you can't scroll down to the last item. Just add the below style to your CSS / any position):
.m-wrapper {
overflow-y:auto;
}
Updated support page
The support page has been updated with new tutorials, common support issues and general information.
If you need a specific tutorial and further details about any other issue, please leave your comment here ( it won't be posted )
Matrix Add-ons
On the same support page, you will find a new section "Matrix Add-Ons" which replaces the previous Premium tutorials of Advanced package. The password access is the same sent to you after the purchase of advanced package.
Matrix Add-Ons
Advanced packageGeneral
Age Verify snippet
Typing animation
Block Reveal effects
Video Stories plugin
Snippet for multilingual websites
Animated header
STAND OUT WITH A PROFESSIONAL JIMDO WEBSITE