5 replies · opened Sep 6, 2016
I have used the default index.html and placed the ‘top-bar’ div from index-magazine.html above the ‘header’ div.
I have a simple test page here: http://bit.ly/2bm1Kn6
If you inspect the page and give the #top-bar a z-index:1, then it becomes visible
But the other problems still remain
Hello,
This is Definitely Possible but you will need to remove the .slider-parallax-inner from the Slider Area as it is not supported for Layouts which has another content above the Header. Additionally, some CSS/JS modifications will be required. Please use this Sample File: https://www.dropbox.com/s/voaci8w17sdajhc/index-topbar.html?dl=1 which has the Custom CSS in the Document <head> for your use. You will then need to add the following JS Code replacing the entire headerSchemeChanger: function( activeSlide, onWinLoad ) Function Block in the js/functions.js File:
headerSchemeChanger: function( activeSlide, onWinLoad ){
if( activeSlide.length > 0 ) {
var darkExists = false;
if( activeSlide.hasClass('dark') ){
if( oldHeaderClasses ) { var oldClassesArray = oldHeaderClasses.split(/ +/); } else { var oldClassesArray = ''; }
var noOfOldClasses = oldClassesArray.length;
if( noOfOldClasses > 0 ) {
var i = 0;
for( i=0; i<noOfOldClasses; i++ ) {
if( oldClassesArray[i] == 'dark' && onWinLoad == true ) {
darkExists = true;
break;
}
}
}
$('#header.transparent-header:not(.sticky-header,.semi-transparent,.floating-header)').addClass('dark');
if( !darkExists ) {
$('#header.transparent-header.sticky-header,#header.transparent-header.semi-transparent.sticky-header,#header.transparent-header.floating-header.sticky-header').removeClass('dark');
}
$headerWrap.removeClass('not-dark');
$('#top-bar').addClass('dark');
} else {
if( $body.hasClass('dark') ) {
activeSlide.addClass('not-dark');
$('#top-bar').removeClass('dark').addClass('not-dark');
$('#header.transparent-header:not(.semi-transparent,.floating-header)').removeClass('dark');
$('#header.transparent-header:not(.sticky-header,.semi-transparent,.floating-header)').find('#header-wrap').addClass('not-dark');
} else {
$('#header.transparent-header:not(.semi-transparent,.floating-header)').removeClass('dark');
$headerWrap.removeClass('not-dark');
$('#top-bar').removeClass('dark');
}
}
if( $header.hasClass('sticky-header') ) {
SEMICOLON.header.stickyMenuClass();
}
SEMICOLON.header.logo();
}
},This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Thank you for the reply!
I have replaced the files and it seems to be working.
There is only 1 thing left, when i goto the 3rd slider, it should have the class 'dark' to make the text readable on white backgrounds.
What am i missing?
You can find the updated site here: http://bit.ly/2cDvatU
Hello,
Please update the JS Code we have provided you with in the earlier replies since this for the very same Functionality you are looking for. Thanks for your Patience.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Thank you very much!
Seems to work now after clearing cache
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard