Joomla Templates Club 406,261 posts

[tiltongh Friend tiltonghJoin date: July 2014Posts: 29Downloads:30Uploads:0 Thanks: 3 Thanked: 3 times in 1 posts]

#199491

Hello all.

I am using JA Mag for a web project, and I need the header to stick on scroll down, like the header on Joomlart Website behaves. I have seen a similar implementation in JA Muzic as well, but the one on Joomlart Website is quite clean and what i want.

How can I achieve that?

Thank you.:)

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

#541442

So that we can try to best assist you, please provide the url of the site you’re working on.

[tiltongh Friend tiltonghJoin date: July 2014Posts: 29Downloads:30Uploads:0 Thanks: 3 Thanked: 3 times in 1 posts]

#541443

Ok great. Thanks for swift response. Am working on a localhost right now, and so would push it up soon, so you check it out.

Thank you.

[tiltongh Friend tiltonghJoin date: July 2014Posts: 29Downloads:30Uploads:0 Thanks: 3 Thanked: 3 times in 1 posts]

#541734

Hi all. I loaded the template now.

http://www.christlifeglory.org/index.php

I need help to achieve the following:

1. I want to take the off canvas menu on the top left off.

2. I want the header to stick on scroll like Joomlart Website header – http://www.joomlart.com/

or the header at this link – http://www.firstmethodistmansfield.org/

3. I want the page to span the whole width, like the http://www.firstmethodistmansfield.org/ page

Please help me out.

Thank you in advance.

[tiltongh Friend tiltonghJoin date: July 2014Posts: 29Downloads:30Uploads:0 Thanks: 3 Thanked: 3 times in 1 posts]

#541750

Hello all.

I read the T3 Documentation, and I have been able to take the off canvas off.

I have also been able to make the menu stick.

Now what is left is how to make the site to span the entire width of my window, something beyond the 1240px.

Please help.

Thanks again.

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

#541751

STICKY HEADER MENU:
Assuming you are using the J3.x/T3V2 version of JA Biz, create a new file called “custom.css” within file path –> /templates/ja_biz/css. Paste the following CSS rule within the custom.css file . . .


.t3-mainnav .container {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
position: fixed;
}

.t3-top-header .container {
position: fixed;
}


FULL WIDTH SITE:
Paste the following CSS rules within your custom.css file . . .


.container {
width: 980px;
}

.t3-slideshow .main-container.slideshow {
margin-left: auto;
margin-right: auto;
width: 75%;
}

Better ?? 😎

1 user says Thank You to TomC for this useful post

1. tiltongh

[tiltongh Friend tiltonghJoin date: July 2014Posts: 29Downloads:30Uploads:0 Thanks: 3 Thanked: 3 times in 1 posts]

#541862

Hello there, and thanks for your support so far.

I got the full width menu and slider to work.

Full width mega menu, i added the following code to custom.css:

.container {
width: 100% !important;
padding-left: 5% !important;
padding-right: 5% !important;
margin: 0 auto !important;
}

and I took off “background:none” from .t3-megamenu .mega > .nav-child.mega-dropdown-menu.full-menu in my megamenu.less file.

I also got the slideshow to span the entire width by removing the “<div class=”container”>” and it’s corresponding closing div.

Concerning the sticky top, I’m going to try your suggestion in a bit.

I earlier read something from the T3 documentation about adding a class to the Main nav, and it quite worked. Just that the top-header overlaps it, and that is not like what i saw on http://www.joomlart.com.

At http://www.joomlart.com, there is a top part, before the menu. When you scroll down, the top part hides, but the menu sticks.

A similar implementation is on http://www.firstmethodistmansfield.org/.

That’s the kind of effect I’m looking for. But I will check your earlier suggestion out. If it doesn’t work, I will let you know.

If you have a different recommendation per the explanation i’ve given, you can post to me.

Thanks so very much for your attention and support all this while.

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

#541879

Let me/us know how you make out with your sticky header/menu – and which solution worked best for you.

😎

[tiltongh Friend tiltonghJoin date: July 2014Posts: 29Downloads:30Uploads:0 Thanks: 3 Thanked: 3 times in 1 posts]

#542106

Hello Tom C.

Thanks again for your support.

I think i have had a fundamental problem with the changes i make to the site style files. I need your help or explanation.

I had the site in development mode, and was making changes in the files located in t3-assets. But after a while, the changes I make get reset to the original state before I made the changes.

Why is that problem? How can I work around it? Is that why you suggested I put css rules in custom.css?

This is my first Joomla 3 joomlart template site, and it’s a bit different from how i worked on Joomla 2.5.

Please educate / advise.

Also let me know how i can change the template name from Ja_biz to something else, so it doesn’t show ja_biz in path when using firebug on the site.

Thanks so much.

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

#542157

As I recommended within Post #6 above, you want to create a custom.css file within file path –> /templates/ja_biz/css (so the file path will be /templates/ja_biz/css/custom.css)

You do not want to modify CSS within the t3-assets file(s) – as such will be overwritten upon update/upgrade of the core files.

[kostas13 Friend kostas13Join date: February 2012Posts: 24Downloads:0Uploads:0 Thanks: 3 Thanked: 1 times in 1 posts]

#543225

<em>@TomC 435942 wrote:</em><blockquote>STICKY HEADER MENU:
Assuming you are using the J3.x/T3V2 version of JA Biz, create a new file called “custom.css” within file path –> /templates/ja_biz/css. Paste the following CSS rule within the custom.css file . . .


.t3-mainnav .container {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
position: fixed;
}

.t3-top-header .container {
position: fixed;
}


FULL WIDTH SITE:
Paste the following CSS rules within your custom.css file . . .


.container {
width: 980px;
}

.t3-slideshow .main-container.slideshow {
margin-left: auto;
margin-right: auto;
width: 75%;
}

Better ?? :cool:</blockquote>

I did the same thing and the menu bar went in the left side of the template. (the template style is not the full screen)

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

#543239

<em>@kostas13 437847 wrote:</em><blockquote>I did the same thing and the menu bar went in the left side of the template. (the template style is not the full screen)</blockquote>

Can you provide the url of the site you’re working on – so we can take a look?

[Andrzej Wachałowicz Friend Andrzej WachałowiczJoin date: March 2015Posts: 23Downloads:91Uploads:22 Thanks: 18 Thanked: 1 times in 1 posts]

#556968

<em>@TomC 435942 wrote:</em><blockquote>STICKY HEADER MENU:
Assuming you are using the J3.x/T3V2 version of JA Biz, create a new file called “custom.css” within file path –> /templates/ja_biz/css. Paste the following CSS rule within the custom.css file . . .


.t3-mainnav .container {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
position: fixed;
}

.t3-top-header .container {
position: fixed;
}


</blockquote>

It doesn’t work for me.

So, I added in templates/ja_biz/tpls/blocks/header.php the following code:

<script src="http://stickyjs.com/jquery.sticky.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("#t3-mainnav").sticky({topSpacing:0});
});
</script>

But after scrolling down the header is moving left, I need to stay it in the middle.
Look at the screens:

Normal header position (top center)

and header in top left position:

What can I do now ?

---

Attachments:

1. 
2. 

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

#557246

<em>@andrzejw 455342 wrote:</em><blockquote>

What can I do now ?</blockquote>

Can you provide the url of the site you’re working on – so we can take a look?

[Andrzej Wachałowicz Friend Andrzej WachałowiczJoin date: March 2015Posts: 23Downloads:91Uploads:22 Thanks: 18 Thanked: 1 times in 1 posts]

#557257

I’ve already fix it.

<em>@Saguaros 437949 wrote:</em><blockquote>
– Open file: templatesja_biztplsblockshead.php and add this block of code at the end of file:


<script src="http://stickyjs.com/jquery.sticky.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("#t3-mainnav").sticky({topSpacing:0});
});
</script>


– Go to file: templatesja_bizcsscustom.css (create this file if it doesn’t exist) and add this css rule:


.sticky-wrapper.is-sticky .t3-mainnav.navbar.navbar-default {
width: 100%;
}

</blockquote>

Link http://new.ciechocinekmsf.pl/

[Author]

Posts