nav menu problems

[Former Member]

I was following Tumbleweed 's instructions here support.proboards.com/thread/630481/menu-website and I have a couple questions.

How can I add the Login / Register back in? How can I adjust the nav menu's size and center it?

krakenagency.boards.net

[Tumbleweed]

Jul 19, 2017 10:48:30 GMT -8 @tumbler said:

I was following Tumbleweed 's instructions here support.proboards.com/thread/630481/menu-website and I have a couple questions.

How can I add the Login / Register back in? How can I adjust the nav menu's size and center it?

krakenagency.boards.net

Actually, your login stuff is still there, it's just all white so it doesn't show. What you'll need to do is add a bit for the welcome part so it matches the menu buttons.
So add this to your css:


#welcome{font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
background:rgba(247,245,235,0.5);
height: 60px;
position: relative;
box-sizing: border-box;
overflow: visible;
visibility: visible;
text-transform: uppercase!important;
padding:12px 0px 0px 0px;
float:right;
}
#welcome a {
color: #000000!important; transition: ease 1s;}
#welcome a:hover{
color: rgba(98,150,193,0.9)!important;
}

To adjust the size you'll want to play with these parts I highlighted in blue including the above stuff:

#navigation-menu > ul li a {
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
background:rgba(247,245,235,0.5);
width: 114px;
height: 60px;
position: relative;
box-sizing: border-box;
overflow: visible;
visibility: visible;
text-transform: uppercase!important;
padding:12px 0px 0px 0px;
transition: ease 1s;
}

Oh and if the text size is too big you can just replace this bit with px only: So this....15px/1.4em.....could be this.... 13px

Centering things is not easy as you have so many things in play. For example a person with a username that is super long, logs in making that area to be super long and a logged in member will have all kinds of menu buttons that the guest will not have.  I can look into it but no promises when I'll get at it.

Hopefully, I helped you on your other questions.

[Former Member]

Thank you! As I am not done designing my forum I might comment on this later to helping it match more, but for now, a couple questions:

This may be complicated but, is it possible to make the nav bar stay at the top of the forum no matter where you scroll?

[Tumbleweed]

Jul 20, 2017 4:20:37 GMT -8 @tumbler said:

Thank you! As I am not done designing my forum I might comment on this later to helping it match more, but for now, a couple questions:

This may be complicated but, is it possible to make the nav bar stay at the top of the forum no matter where you scroll?

Yes, you can have be in a fixed position but it gets a bit tricky if your menu bar is below the banner as opposed to above the banner.  The reason is because you don't want it in the fixed position right away or it would be always be positioned on the page the same height as your banner from the top. So you have to make it scroll up a certain number of pixels until it hits the top and then become fixed.  

AND there is also the control bar when in threads/posts that does the same thing so that takes some redoing too so they don't overlap at the top when they go into the fixed position.  I do remember it being a big pain to get all things working really smooth meaning I remember there was a little jump and not sure if I got that fixed or not but I do have it on one of my test sites. I'll go searching for that test site but I do have a question.

Do you want your banner/logo to scroll out of view with just the menu bar getting in a fixed position at the top of the page? Also, you may want to get your menu the exact height you want it so I can set this up so you don't really have to do any tweaking or hopefully won't.

[Former Member]

Oops, I just realized: I meant can you get the nav bar to scroll with you, instead of being in a fixed postion? I'm not sure if you meant that or not, so I guess I wont answer the question..? Sorry got confused

[Tumbleweed]

Jul 21, 2017 9:22:18 GMT -8 @tumbler said:

Oops, I just realized: I meant can you get the nav bar to scroll with you, instead of being in a fixed postion? I'm not sure if you meant that or not, so I guess I wont answer the question..? Sorry got confused

No, I don't think you were confused and I think I knew what you wanted. I think just talking scroll and fixed, confuses people. Currently, your menu does scroll with you. When you scroll up, it scrolls up.  I think you are talking about something like this:  putteraround3.proboards.com/
You can see how everything is scrolling up when you scroll up until the menu hits the top and then it becomes fixed in that position so it's always in view. That's what you want, right?

I'm still trying to find the right site and theme I had it on because the above site, I hadn't messed with the control bar and I can't remember exactly what I did to make it stop short of where the menu is fixed and work as smooth as possible. The control bar was hard to over-ride what ProBoards had coded that control bar to do. (If you don't know what I'm talking about click on a board on the above test site and you'll see how the control bar is becoming fixed but under the menu buttons.)

So if that is what you want, I'd prefer you get your menu buttons exactly the height you want them to be so I can give you a code where you don't have to come back asking how to fix something because you changed something in the menu. Just much easier for both of us. Meanwhile, I'll keep looking for that site and theme where I had the control bar stopping short of the menu.

[Former Member]

Well, I'd rather it be at the very top, but on the forum banner. I'm not sure exactly how to get it there, is that good enough? I know I sound lazy, but I'm not too good at coding, and it'd prob take me a long time to figure it out

[Tumbleweed]

Jul 22, 2017 6:28:58 GMT -8 @tumbler said:

Well, I'd rather it be at the very top, but on the forum banner. I'm not sure exactly how to get it there, is that good enough? I know I sound lazy, but I'm not too good at coding, and it'd prob take me a long time to figure it out

I'll see if I can work out how to get the menu on the banner and at the top but now I have some questions:


What happens to the banner when one scrolls? Do you want it to scroll off the page and the menu just stay at the top?
Will the menu need to be above the logo text you have so it doesn't cover any of the text?
Have you gotten your menu buttons the height you want them? If so, what is the height?

[Former Member]

Before I start, the forum I'd want it on is dragonology.boards.net, not the original link

1: When you're at the top, it should stop at the top and (nav menu and welcome login) but when you scroll, it scrolls along with you while still at the top of your screen. (the floating nav menu/welcome login will have a background)
2: In the forum above, it should be good enough not to cover the text.
3: I'm not sure what you mean?

[Tumbleweed]

O.K. 

It looks like the menu will fit at the top without overlapping the banner text but the height of the menu will overlap the dragons head if as a member you see more buttons than Home, Forum, Shoutbox, Rules, Shop and Advertise. But as a guest it looks like the menu will barley miss the dragon head. That is if you want the menu to be off to the far left like you have it now. We could make the menu buttons have less padding on top and bottom if there are more buttons for members and it is looking crappy overlapping the dragon head. We can decide that when I get it set up.  (And that's what I was talking about in #3, simply the height of the menu.

Would you mind if I borrowed your dragon banner so I can get it set up and then you can look to see if you want to change anything.

Also, you never said if you want your banner(the dragon) to scroll off the top of the page when you scroll down while the menu stays put.

And it might help if you post your wrapper template just in case you might have changed something and I need to refer to it. 

Thanks.

Edit: @tumbler , I hope you don't mind but I went ahead and borrowed your banner image. I wanted to be able to work on this when I had time, felt like it and/or couldn't sleep and as you can see, I'm not sleeping and I felt like working on it.

 I'm still working out things but a couple changes I did make. I made the transparent background go across the whole page (or nearly) because it really looked stupid otherwise with a gap between the menu buttons and the welcome but I can change it back if you like.  I made the menu button height way less because it was really covering a lot of the dragon head and still is a bit.
Now I just need you to tell me if this is o.k. I am still working out some things but just want to know if I should finish this up or if you decided you don't like the look or changes you might want.

One thing I was thinking of was when you scroll, once you hit a certain point, like maybe when the menu gets past the banner (if you don't want the banner fixed too) the menu background opacity turns more opaque because once it starts rolling over boards, it's hard to read. (Not even sure I know how to do that. lol)

Here is the test site.

[Former Member]

I absolutely love it so far! Thank you! About the banner scroll question - do you mean it scrolls with you?..I'm not sure But whatever you did on the test site is perfect!

EDIT: Just noticed...Hmm that is a good point. I'm not sure, maybe when you scroll off the banner (from the very top) It changes into a solid color? (or more-solid) (If thats too complicated I don't mind )

[Tumbleweed]

Jul 24, 2017 6:27:27 GMT -8 @tumbler said:

I absolutely love it so far! Thank you! About the banner scroll question - do you mean it scrolls with you?..I'm not sure But whatever you did on the test site is perfect!

EDIT: Just noticed...Hmm that is a good point. I'm not sure, maybe when you scroll off the banner (from the very top) It changes into a solid color? (or more-solid) (If thats too complicated I don't mind )

So I got the background to change when it hits the nav tree. You can check it out on the link I gave in my previous post. I'm going to go have lunch, get some real work done and then clean up the coding a bit and have it for you shortly but though I'd post about it in case you are around and need some changes before I give you the coding. 

[Former Member]

I checked the site, and I scrolled around but don't seem to see any change with the nav menu color...

[Tumbleweed]

Jul 24, 2017 11:34:10 GMT -8 @tumbler said:

I checked the site, and I scrolled around but don't seem to see any change with the nav menu color...

The color doesn't change, just the opacity. So the menu text shows up better when on top of other text such as what is in boards. If you look how translucent it is when it scrolls over the banner text and then over the board text, I think you'll see the difference. That said, it can be changed to a different color too.  I'm going to go ahead and give you the wrapper template coding and the styles to go in your style sheet as soon as I tidy up everything because this is as good as it can get, in my opinion. But meanwhile, I changed the color to be a bit more blue so you can really see it is changing as it scrolls over the nav tree. Same test site (I checked it in IE, Edge, FF and Chrome and it works on all of them)

O.K. Here is what you need to do. First you need to go remove your banner if you added it via your themes or the visual editor because the banner image is in the wrapper template.
Here is the wrapper template: (This replaces everything you have in it.)


<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
       <div id="keepsakes" style="display:none"><div id="avatarsave">$[current_user.avatar]</div><div id="pmsave">$[current_user.messages]</div></div>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
       
<div id="outer_wrapper">
<header>
<div id="banner-container" role="banner">
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
                   
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a {if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
                 
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.  
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span>    $[logout_link]
{/if}
</p>
                       
</div>
<center>
<div style="position:relative;top:0px;margin-bottom:-63px;">
                        <img src="http://storage.proboards.com/6625337/images/QxeMBGKlwRHLuJKXxFzq.jpg">
</div>
</center>  
</div>
<p style="clear:both;"></p>  
               
                       
</header>
<div id="wrapper">
$[participated_threads_link]

{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}

$[header]

<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
               
$[shoutbox]
</div>

$[footer]
               </div>
       </div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>


<script>
$(document).ready(function(){      
  var scroll_start = 0;
  var startchange = $('#navigation-tree');
  var offset = startchange.offset();
  $(document).scroll(function() {
     scroll_start = $(this).scrollTop();
     if(scroll_start > offset.top) {
         $('#navigation-menu').css('background-color', 'rgba(247, 245, 220, 0.9)');
      } else {
         $('#navigation-menu').css('background-color', 'rgba(247, 245, 235, 0.5)');
      }
  });
});
</script>




The script at the bottom is where you'd change the opacity for when you scroll. The first one is for the color and opacity you want over the boards and the second one is for over the banner area and how a visitor will first see it. So these lines in the code above:

$('#navigation-menu').css('background-color', 'rgba(247, 245, 220, 0.9)');
} else {
$('#navigation-menu').css('background-color', 'rgba(247, 245, 235, 0.5)');


And this will replace all the css you had for your menu before:





/*banner and menu overhaul*/
#outer_wrapper{width:97%;position:abosolute:top:0px;
}
#navigation-menu{padding-bottom:0px;background-image:none; width:100%;
background-color:transparent;float:left;
position:fixed;left:0px;z-index:100;background:rgba(247,245,235,0.5);
}
#navigation-menu a { position: relative; }
#navigation-menu > ul, #navigation-menu > ul li { text-transform: uppercase!important; float: left;text-align:center;}
#navigation-menu > ul li a {
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
position: relative;
box-sizing: border-box;
overflow: visible;
visibility: visible;
text-transform: uppercase!important;
padding:4px 8px 4px 8px;
transition: ease 1s;
}
#navigation-menu > ul li a:visited{
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
background:rgba(247,245,235,0.5);
text-transform: uppercase!important;
}
#navigation-menu > ul li a:hover{
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717!important;
background:rgba(98,150,193,0.5);
text-transform: uppercase!important;
}
#navigation-menu > ul li a.state-active{  
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717!important;
background:rgba(98,150,193,0.5)!important;
text-transform: uppercase!important;
}  
#navigation-menu > ul li a.state-active:hover{  
font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717!important;
background:rgba(98,150,193,0.5);
text-transform: uppercase!important;
padding:0px 8px 4px -4px;
}  
#welcome{font: normal normal normal 15px/1.4em futura-lt-w01-light,sans-serif;
color:#171717;
box-sizing: border-box;
overflow: visible;
visibility: visible;
text-transform: uppercase!important;
padding:0px 30px 8px 4px;
transition: ease 1s;
float:right;  
text-align:left;
}
#welcome a:link{color:blue!important;}
#navigation-menu div.tip-holder{position:relative;top:-10px;left:0px;}
h2#banner{background-image:none;
background-color:transparent;}


And that's it.

[Former Member]

Works great! I love it!

I have a question...I'm not sure if this is too complicated or not, but is it possible to add a little fade when they change?