nav ban

[stewie22]

Hi Folks I want to make my nav bar stop at the top of my page when I scroll down and have everything pass under it , not being very computer savy could some one either help or guide me through the process the picture below is want to have happen thank you stewie22

[Scott]

stewie22,
It's probably best to anchor the nav menu to the top of the page first and then keep it from scrolling with the page.

[stewie22]

Oct 4, 2017 13:40:29 GMT -8 Scott said:

stewie22 ,
It's probably best to anchor the nav menu to the top of the page first and then keep it from scrolling with the page.

My reply disappeared: Hi Scott sounds like a good idea to me Could you tell me where to start please

[Scott]

Oct 4, 2017 23:13:18 GMT -8 stewie22 said:

Oct 4, 2017 13:40:29 GMT -8 Scott said:

stewie22 ,
It's probably best to anchor the nav menu to the top of the page first and then keep it from scrolling with the page.

My reply disappeared: Hi Scott sounds like a good idea to me Could you tell me where to start please

Be glad to help. Sorry I didn't have time today, but should tomorrow.

[Scott]

Hi stewie22 ,
I was testing this on my test forum first - so ignore the forum name, menu items, etc.


How does this look?  The nav menu would be fixed at the top and the notification bubbles below, rather than above the menu items.




Let me know and we can proceed.

[stewie22]

Oct 7, 2017 12:34:30 GMT -8 Scott said:

Hi stewie22 ,
I was testing this on my test forum first - so ignore the forum name, menu items, etc.


How does this look?  The nav menu would be fixed at the top and the notification bubbles below, rather than above the menu items.


Hi Scott so we can have maximum screen can the forum name roll up leaving just the nav bar at the top with the action bar just below? 
If I havent explained it right ill post a pic for you. In not what you have shown will still be great  Thanks 

Let me know and we can proceed.

[Scott]

Oct 7, 2017 14:25:56 GMT -8 stewie22 said:

Oct 7, 2017 12:34:30 GMT -8 Scott said:

Hi stewie22 ,
I was testing this on my test forum first - so ignore the forum name, menu items, etc.


How does this look?  The nav menu would be fixed at the top and the notification bubbles below, rather than above the menu items.


Hi Scott so we can have maximum screen can the forum name roll up leaving just the nav bar at the top with the action bar just below? 
If I havent explained it right ill post a pic for you. In not what you have shown will still be great  Thanks 

Let me know and we can proceed.

When you scroll the page, the nav bar will remain fixed at the top, while the rest scrolls.

[stewie22]

Oct 7, 2017 15:52:27 GMT -8 Scott said:

Oct 7, 2017 14:25:56 GMT -8 stewie22 said:

When you scroll the page, the nav bar will remain fixed at the top, while the rest scrolls.

That will be great Scott. Scott would you be able to tell me where you went to make this change I think its about time I started to learn a bit, maybe set up a test site to practise on so I don't mess up the main site. thanks

[Scott]

stewie22 ,

1. Go to Admin > Structure > Layout Templates, click on the Forum Wrapper layout template.
2. Starting around line 16, find and highlight these lines:
<div id="banner-container" role="banner">
    <h2 id="banner">
$[forum.title]
    </h2>
</div>
3. Cut (ctrl+x)
4. Find this code:
   </div>
</header>
5. Create a new line BETWEEN the </div> and </header>, and the paste the code you cut (from steps 2 & 3).
6. Save Changes
7. Next go to the CSS Style Sheet for the same theme (Admin > Themes > Advanced Styles & CSS, Style Sheet tab.
8. Scroll to the very bottom and on a new line paste the following:
#navigation-menu {
   position: fixed;
   top: 0px;
   width: 89%;
   height:31px;
}

#banner-container {
   margin-top: 31px;
}

9. Then while still in the CSS, scroll up to line 284.  
10.  On that line find  postion: absolute; top;  and replace 'top' with the word bottom
11.  The on line 286 find  border-top: 4px solid  and delete just those words.
12. Save changes.

You should be all good to go after this.

[stewie22]

Oct 12, 2017 12:18:33 GMT -8 Scott said:

stewie22 ,

1. Go to Admin > Structure > Layout Templates, click on the Forum Wrapper layout template.
2. Starting around line 16, find and highlight these lines:
<div id="banner-container" role="banner">
    <h2 id="banner">
$[forum.title]
    </h2>
</div>
3. Cut (ctrl+x)
4. Find this code:
   </div>
</header>
5. Create a new line BETWEEN the </div> and </header>, and the paste the code you cut (from steps 2 & 3).
6. Save Changes
7. Next go to the CSS Style Sheet for the same theme (Admin > Themes > Advanced Styles & CSS, Style Sheet tab.
8. Scroll to the very bottom and on a new line paste the following:
#navigation-menu {
   position: fixed;
   top: 0px;
   width: 89%;
   height:31px;z-index: 1000;
}

#banner-container {
   margin-top: 31px;
}

9. Then while still in the CSS, scroll up to line 284.  
10.  On that line find  postion: absolute; top;  and replace 'top' with the word bottom
11.  The on line 286 find  border-top: 4px solid  and delete just those words.
12. Save changes.

You should be all good to go after this.

Thanks Scott I'm thinking I will start a test site to play around with it first so as not to mess up my site Ill get back to you and let you know how I go

[stewie22]

Hi Scott I set up a test site and (stewies-test.freeforms.net) and made the changes it almost works the nav bar has moved to the top but as I scroll down it disappears, it looks like I have missed something although I have checked and rechecked it would you mind having a look for me please when you have the time of cause 

Thanks Stewie22 

[Scott]

stewie22,

In your css where you have this:

#navigation-menu {
position: fixed;
top: 0px;
width: 89%;
height:31px;
}


Change it to this:
#navigation-menu {
position: fixed;
top: 0px;
width: 89%;
height:31px;
z-index: 1000;
}

[stewie22]

Oct 13, 2017 9:31:02 GMT -8 Scott said:

stewie22 ,

In your css where you have this:

#navigation-menu {
position: fixed;
top: 0px;
width: 89%;
height:31px;
}


Change it to this:
#navigation-menu {
position: fixed;
top: 0px;
width: 89%;
height:31px;
z-index: 1000;
}Thanks Scott with your knowledge and my lack of skills you could run this joint  Nah really I appreciate your time on this

[stewie22]

Hi Scott I spoke to soon, applying the changes to Grey-members.com I then click on General Discussions, when I scroll down the navbar disappears, I have rechecked the changes I'm pretty sure I have it right. Have I missed something? please

Thanks Stewie22 

Hi Scott disregard the above. I had some weekend time and went through what I had done I found where I made the mistake and its working great. Just goes to show if I pay more attention to what you tell me and what i'm doing, things do work

Thanks again Stewie22  

[Scott]

No worries stewie22, glad I was able to help you with this.