Joomla Templates Club 406,261 posts

[tiggercat Friend tiggercatJoin date: November 2011Posts: 50Downloads:0Uploads:11 Thanks: 27 Thanked: 1 times in 1 posts]

#177688

Hi there,

What code do I need to change to have a fixed top.mainnav, top.header and top.menu?

Thanks,
Nicole

---

Attachments:

1. 

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

#455459

Nicole:

Can you provide the url of the site you’re working on?
Also, please set “Optimize CSS” to “No’ within your Template Manager–General Settings

1 user says Thank You to TomC for this useful post

1. tiggercat

[tiggercat Friend tiggercatJoin date: November 2011Posts: 50Downloads:0Uploads:11 Thanks: 27 Thanked: 1 times in 1 posts]

#455464

<em>@TomC 322839 wrote:</em><blockquote>Nicole:

Can you provide the url of the site you’re working on?
Also, please set “Optimize CSS” to “No’ within your Template Manager–General Settings</blockquote>

Thank you very much for your help, Tom.

http://www.apollo-mfg.cn, the “Optimize CSS” is set to No.

Thanks again.

Nicole

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

#455467

So, just so I am clear, you want your header and main nav to “stick,” with the content scrolling “under” it – for all pages?

1 user says Thank You to TomC for this useful post

1. tiggercat

[tiggercat Friend tiggercatJoin date: November 2011Posts: 50Downloads:0Uploads:11 Thanks: 27 Thanked: 1 times in 1 posts]

#455484

<em>@TomC 322850 wrote:</em><blockquote>So, just so I am clear, you want your header and main nav to “stick,” with the content scrolling “under” it – for all pages?</blockquote>

Yes. thanks, Tom.

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

#455487

Okay, there are a few of steps to get this to work . . . .

STEP ONE:
Within file path –> /templates/ja_nex/css/template.css

at line 733, modify as follows:

<blockquote>#ja-topmenu {
background: none repeat scroll 0 0 </blockquote><blockquote>#222222
border-bottom: 1px solid #111111
color: #999999
padding: 1px 0;
position: fixed;
z-index: 999;
}</blockquote>

STEP TWO:
Within file path –> /templates/ja_nex/css/template.css

at line 755, modify as follows:

<blockquote>#ja-header {
background: none repeat scroll 0 0 </blockquote><blockquote>#CC3333
position: fixed;
to: 25px;
}</blockquote>

STEP THREE:
Within file path –> /templates/ja_nex/css/template.css

at line 686, modify as follows:

<blockquote>#ja-mainnav {
line-height: 1;
position: fixed;
top: 98px;
z-index: 11;
}</blockquote>

Let me know if that works for you.

1 user says Thank You to TomC for this useful post

1. tiggercat

[tiggercat Friend tiggercatJoin date: November 2011Posts: 50Downloads:0Uploads:11 Thanks: 27 Thanked: 1 times in 1 posts]

#455492

<em>@TomC 322880 wrote:</em><blockquote>Okay, there are a few of steps to get this to work . . . .

STEP ONE:
Within file path –> /templates/ja_nex/css/template.css

at line 733, modify as follows:

STEP TWO:
Within file path –> /templates/ja_nex/css/template.css

at line 755, modify as follows:

STEP THREE:
Within file path –> /templates/ja_nex/css/template.css

at line 686, modify as follows:

Let me know if that works for you.</blockquote>

Hi Tom,

Thank you so very much for your above instruction steps.

I followed your instruction, and I think we still need to do a bit work to get them positioned well.

Here is the screen shot after/before I modified the code:

Thanks,
Nicole

---

Attachments:

1. 
2. 

[tiggercat Friend tiggercatJoin date: November 2011Posts: 50Downloads:0Uploads:11 Thanks: 27 Thanked: 1 times in 1 posts]

#457006

Thank you Hieu Nguyen for your great help!!!

Here below is the update on how to do it:

To stick 3 elelents you need a fixed position, a Fixed Height to each elements and also you need to place each element to their proper fixed position:

1) The code will be:
Within file path –> /templates/ja_nex/css/template.css

#ja-topmenu { position: fixed; height: 30px; top: 0; z-index: 999;}
#ja-header { position: fixed; height: 80px; top: 30px; /* Place for topmenu */ z-index: 9999;}
#ja-mainnav { position: fixed; height: 42px; top:110px; /* Place for topmenu + header */ z-index: 9999;}

2) Because you fixed these elements, all elements below this will be place on the top of the page. So you need to make a Padding to the “warpper” to ensure others elements will be place below topmenu , header + mainnav, you need to add below code:
Within file path –> /templates/ja_nex/css/template.css

#ja-wrapper { padding-top: 172px }

Enjoy!
Nicole

[Author]

Posts