Joomla Templates Club 406,261 posts

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#706050

Our board would like the top menu to be above the slideshow like on this demo template: http://www.joomlart.com/demo/#ja_university

How do we achieve this with Sugite? It doesn’t have to have the tabs etc, they just feel it would be easier for people to see if the menu wasn’t transparent on slideshow. It can keep the same style as on default sugite pages but just be moved above the slideshow.

Also our slideshow is set to 400px however is displaying about 720px height….

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#706118

Try This . . . .

Within file path —> /templates/ja_sugite/local/css/themes/school/mod_jaslideshowlite.css
at line 48, modify as follows:


.ja-ss-item {
backface-visibility: hidden;
display: block;
float: left;
left: 0;
margin: 80px 0 0;
min-height: 260px;
overflow: hidden;
position: absolute;
right: 0;
width: 100%;
z-index: 1;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#752335

Try This . . . .

Within file path —> /templates/ja_sugite/local/css/themes/school/mod_jaslideshowlite.css
at line 48, modify as follows:


.ja-ss-item {
backface-visibility: hidden;
display: block;
float: left;
left: 0;
margin: 80px 0 0;
min-height: 260px;
overflow: hidden;
position: absolute;
right: 0;
width: 100%;
z-index: 1;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#719218

Thank you @tomc. That did it, but we do have a concern about it. If we update the template or ja-slideshow, will those changes disappear?

Also is there a way to make the menu “sticky” so it follows down the page if you are scrolling?

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#752951

Thank you @tomc. That did it, but we do have a concern about it. If we update the template or ja-slideshow, will those changes disappear?

Also is there a way to make the menu “sticky” so it follows down the page if you are scrolling?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#719220

<em>@angie00 499549 wrote:</em><blockquote>Thank you @TomC . That did it, but we do have a concern about it. If we update the template or ja-slideshow, will those changes disappear? [/quote]

It may, which is why it is always a sound practice to perform a complete backup of your entire site before any update/upgrade.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#752953

<em>@angie00 499549 wrote:</em><blockquote>Thank you @TomC . That did it, but we do have a concern about it. If we update the template or ja-slideshow, will those changes disappear? [/quote]

It may, which is why it is always a sound practice to perform a complete backup of your entire site before any update/upgrade.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#719223

<em>@angie00 499549 wrote:</em><blockquote>
Also is there a way to make the menu “sticky” so it follows down the page if you are scrolling?</blockquote>

You can try this . . .

FIRST – IMPORTANT:
COPY THE ORIGINAL CSS CODES we’re about to modify into a WordPad document ro something – just in case you want to revert back to the original.

Within file path —> /templates/ja_sugite/local/css/themes/school/bootstrap.css
at line 415, modify as follows:


.container {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
position: fixed;
}

Then, at line 432, modify as follows:


.container {
width: 100%;
}

Then, because there is a strange transition effect for the header . . . . .

Within file path –> /modules/mod_jaslideshowlite/assets/css/animate.css
at line 13, modify as follows:


.animate {
transition: all 1200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#752956

<em>@angie00 499549 wrote:</em><blockquote>
Also is there a way to make the menu “sticky” so it follows down the page if you are scrolling?</blockquote>

You can try this . . .

FIRST – IMPORTANT:
COPY THE ORIGINAL CSS CODES we’re about to modify into a WordPad document ro something – just in case you want to revert back to the original.

Within file path —> /templates/ja_sugite/local/css/themes/school/bootstrap.css
at line 415, modify as follows:


.container {
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
position: fixed;
}

Then, at line 432, modify as follows:


.container {
width: 100%;
}

Then, because there is a strange transition effect for the header . . . . .

Within file path –> /modules/mod_jaslideshowlite/assets/css/animate.css
at line 13, modify as follows:


.animate {
transition: all 1200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Better ??

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#719230

Thanks @tomc We are testing this on a local server and it seems the slideshow didn’t move under menu. The menu is cutting off the slideshow images at top? Is there a way to move the slideshow down? Or are we missing a step?

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#752963

Thanks @tomc We are testing this on a local server and it seems the slideshow didn’t move under menu. The menu is cutting off the slideshow images at top? Is there a way to move the slideshow down? Or are we missing a step?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#720294

Hi @angie00,

You can open file templatesja_sugitejsscript.js and look for this code :

$('.ja-header').on ('hover', function () {
$('html').removeClass ('scrollDown scrollUp').addClass ('hover');
scrollDir = 0;
})

scrollToggle = function () {
$('html').removeClass ('hover');
if (scrollDir == 1) {
$('html').addClass ('scrollDown').removeClass ('scrollUp');
} else if (scrollDir == -1) {
$('html').addClass ('scrollUp').removeClass ('scrollDown');
} else {
$('html').removeClass ('scrollUp scrollDown');
}
$('html').addClass ('animating');
setTimeout(function(){ $('html').removeClass ('animating'); }, 1000);
}

then comment it out as below (insert /* in the beginning and */ at the end)

/*
$('.ja-header').on ('hover', function () {
$('html').removeClass ('scrollDown scrollUp').addClass ('hover');
scrollDir = 0;
})

scrollToggle = function () {
$('html').removeClass ('hover');
if (scrollDir == 1) {
$('html').addClass ('scrollDown').removeClass ('scrollUp');
} else if (scrollDir == -1) {
$('html').addClass ('scrollUp').removeClass ('scrollDown');
} else {
$('html').removeClass ('scrollUp scrollDown');
}
$('html').addClass ('animating');
setTimeout(function(){ $('html').removeClass ('animating'); }, 1000);
}
*/

1 user says Thank You to Adam M for this useful post

1. angie00

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#753306

Hi @angie00,

You can open file templatesja_sugitejsscript.js and look for this code :

$('.ja-header').on ('hover', function () {
$('html').removeClass ('scrollDown scrollUp').addClass ('hover');
scrollDir = 0;
})

scrollToggle = function () {
$('html').removeClass ('hover');
if (scrollDir == 1) {
$('html').addClass ('scrollDown').removeClass ('scrollUp');
} else if (scrollDir == -1) {
$('html').addClass ('scrollUp').removeClass ('scrollDown');
} else {
$('html').removeClass ('scrollUp scrollDown');
}
$('html').addClass ('animating');
setTimeout(function(){ $('html').removeClass ('animating'); }, 1000);
}

then comment it out as below (insert /* in the beginning and */ at the end)

/*
$('.ja-header').on ('hover', function () {
$('html').removeClass ('scrollDown scrollUp').addClass ('hover');
scrollDir = 0;
})

scrollToggle = function () {
$('html').removeClass ('hover');
if (scrollDir == 1) {
$('html').addClass ('scrollDown').removeClass ('scrollUp');
} else if (scrollDir == -1) {
$('html').addClass ('scrollUp').removeClass ('scrollDown');
} else {
$('html').removeClass ('scrollUp scrollDown');
}
$('html').addClass ('animating');
setTimeout(function(){ $('html').removeClass ('animating'); }, 1000);
}
*/

1 user says Thank You to Adam M for this useful post

1. angie00

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#720531

@tomc and @adam M

Thank you both for your help! Your support is much appreciated. We still have one issue of the menu covering up the slideshow upon first load. Is there a way to move the slideshow down below the menu? Or am I missing this step in the instructions above possibly?

[angie00 Friend angie00Join date: November 2011Posts: 294Downloads:0Uploads:80 Thanked: 10 times in 1 posts]

#753369

@tomc and @adam M

Thank you both for your help! Your support is much appreciated. We still have one issue of the menu covering up the slideshow upon first load. Is there a way to move the slideshow down below the menu? Or am I missing this step in the instructions above possibly?

[Author]

Posts