Joomla Templates Club 406,261 posts

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#691455

Hi everyone,

I would like to have my navbar fixed, and animated in charity, like the nice one in JA events ii or JA Social ii . Is that possible ? How can I do it ?

Thanks,

Polo

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

#691651

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings

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

#749336

So that we can try to best assist you, please provide the url of the site you’re working on,
as well as temporarily set “Optimize CSS” to “Off” within your Template Manager–General settings

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#691653

Sure. Here it is :

http://grosmm.com/grosmm2

Thanks

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#749338

Sure. Here it is :

http://grosmm.com/grosmm2

Thanks

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

#691657

Try This . . . .

Within file path –> /templates/ja_charity/local/css/themes/church/template.css
at line 3733, modify as follows:


.t3-header {
background: #92e3e4 none repeat scroll 0 0;
color: #ffffff
padding-bottom: 14px;
padding-top: 14px;
position: fixed;
z-index: 99;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Is this the effect you are looking to accomplish?

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

#749342

Try This . . . .

Within file path –> /templates/ja_charity/local/css/themes/church/template.css
at line 3733, modify as follows:


.t3-header {
background: #92e3e4 none repeat scroll 0 0;
color: #ffffff
padding-bottom: 14px;
padding-top: 14px;
position: fixed;
z-index: 99;
}

SAVE CHANGES – CLEAR CACHE – REFRESH PAGE

Is this the effect you are looking to accomplish?

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#691663

Hi,

Thanks, but that’s not exactly what i meant.:eek:

I would rather something “smooth”, like in JA events ii. Is that possible ? Do I have to transfer some files from one template to another ?

Thanks in advance,

Polo

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#749348

Hi,

Thanks, but that’s not exactly what i meant.:eek:

I would rather something “smooth”, like in JA events ii. Is that possible ? Do I have to transfer some files from one template to another ?

Thanks in advance,

Polo

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#691958

Hi,

I have found a way to do it, and I’m sharing it, if someone want to do the same thing.

The nice transition is just the affix function of boostrap + a little css effect.

So I changed line 37 in header.php to this :

<header id=”t3-header” class=”t3-header t3-smooth-header affix-top” data-spy=”affix” data-offset-top=”1″>

and added this in custom.css :

.t3-header.t3-smooth-header{
border-bottom: 6px solid #607d8b
box-shadow: 0 -2px #fff inset, 0 -3px #37474f inset;
top: 0;
z-index: 1000;
padding-bottom: 24px;
padding-top: 24px;
transition: all 0.35s ease 0s;
}
.t3-header.t3-smooth-header.affix{
position: fixed;
z-index: 1030;
padding-bottom: 10px;
padding-top: 10px;
width:100%;
transition: all 0.35s ease 0s;
background-color:#EEEEEE;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}

And it works fine !

Thanks

[polo974 Friend polo974Join date: May 2015Posts: 63Downloads:133Uploads:4 Thanks: 13 Thanked: 5 times in 2 posts]

#749471

Hi,

I have found a way to do it, and I’m sharing it, if someone want to do the same thing.

The nice transition is just the affix function of boostrap + a little css effect.

So I changed line 37 in header.php to this :

<header id=”t3-header” class=”t3-header t3-smooth-header affix-top” data-spy=”affix” data-offset-top=”1″>

and added this in custom.css :

.t3-header.t3-smooth-header{
border-bottom: 6px solid #607d8b
box-shadow: 0 -2px #fff inset, 0 -3px #37474f inset;
top: 0;
z-index: 1000;
padding-bottom: 24px;
padding-top: 24px;
transition: all 0.35s ease 0s;
}
.t3-header.t3-smooth-header.affix{
position: fixed;
z-index: 1030;
padding-bottom: 10px;
padding-top: 10px;
width:100%;
transition: all 0.35s ease 0s;
background-color:#EEEEEE;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}

And it works fine !

Thanks

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

#691980

NICE WORK !!! . . . and THANK YOU for sharing your solution.

All the best with your continuing site development !!! 🙂

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

#749493

NICE WORK !!! . . . and THANK YOU for sharing your solution.

All the best with your continuing site development !!! 🙂

[meziane Friend mezianeJoin date: October 2015Posts: 40Downloads:144Uploads:9 Thanks: 1]

#751098

It’s Great Work!

[Author]

Posts