MyBB Community Forums

Full Version: BootBB : Sticky Header Issue
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi folks

As per the title, I've been playing with the BootBB theme, and I managed to make the menu and header sticky. Unfortunately, in the process I've somehow made it so the top list of links can't be clicked, and I'm honestly clueless as to why that is or how to fix it.

I am also having an issue wherein the Enhanced Account Switcher is not working on the forum index, but works on all other pages, including the Portal. Not sure what's going on here, either. I'm using:

MyBB Version - 1.8.15
PHP Version - 5.5.38
BootBB Version - 2.2
Enhanced Account Switcher - 2.1.7

Also Installed;
Online Today (2.0.3)
Template Conditionals (1.8)
Plugin Uploader (1.2.2)
Thread Description (1.1)
PluginLibrary (12)


My forum is at: http://dinosaur.dreamscaperpgs.net/forum/
You'll need to change the layout from Default to 'Jurassic'

Forum is closed, but you'll be able to see the menu. If you need further access to assist with the EAS, please let me know and I'll PM details for a test account access.

Thank you!
As the forum is closed, I am not able to see the site at all. Also the theme changer isn't working for guest. Probably permissions not allowed Smile
That's bizarre! It works for me when I log out and view it as a guest.

I've unlocked the site and set the layout as default!
Here is the code from the Header!


CSS
#sticky_panel_main {
   display: none;
   margin: 0;
   padding: 0;
   position: fixed;
   margin-top: -31px;
   z-index: 999999;
   width: 100%;
   height: 70px;
}

#sticky_panel_main .upper {
    background: #e0e0e0;
    color: #777;
    padding: 7px;
    line-height: 25px;
	text-align:left;
	margin-top: 61px;
}

#sticky_panel_main .navigation {
    background-color: transparent;
    color: #777;
    padding: 7px;
    line-height: 25px;
	text-align:center;
	margin-top: 91px;
}

Header Template
<header>
<div class="navbar navbar-default"  id="sticky_panel_main" style="display: block; margin-top: 0px;">
     <div class="container">
          <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
               <span class="sr-only">Toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span> 
               </button>
			  
			  <div class="navbar-header">
				  <!--<a class="navbar-brand" href="{$mybb->settings['bburl']}">BootBB</a>-->
				  <a class="" href="{$mybb->settings['bburl']}"><img src="{$theme['logo']}" style="height:60px;width:200px;" /></a>
			  
			  </div>
          </div>
          <div class="collapse navbar-collapse navbar-ex1-collapse">
			  <ul class="nav navbar-nav navbar-right">
				  <li id="nav-portal"><a href="portal.php"><i class="fa fa-bell"></i> Portal</a></li>
               <li id="nav-forums"><a href="index.php"><i class="fa fa-group"></i> Forum</a></li>
               <li id="nav-search"><a href="search.php"><i class="fa fa-search"></i> Search</a></li>
               <li id="nav-member"><a href="memberlist.php"><i class="fa fa-users"></i> Member</a></li>
				  
<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-cubes"></i> Misc <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="search.php?action=getnew"><i class="fa fa-comment"></i> View New Posts</a></li>
            <li><a href="search.php?action=getdaily"><i class="fa fa-comments"></i> View Today's Posts</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="fa fa-book"></i> View Forum Rules</a></li>
			  <li id="nav-help"><a href="misc.php?action=help"><i class="fa fa-life-bouy"></i> Help Docs</a></li>
          </ul>
</li> 
</ul>
  
          </div>
     </div>
</div>
</header>
{$as_sidebar}

<div id="container">
	<a name="top" id="top"></a>
		<div id="header">
			<div id="sticky_panel_main" style="display: block; margin-top: 0px;">
				<div class="upper">
					<div class="container">

						{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
				</div>
			</div>
			<div id="sticky_panel_main" style="display: block; margin-top: 0px;">
				<div class="navigation">
					<div class="container">	
						<navigation>
			</div>
					</div>
				</div>
               <br /><br /><br /><br />  
				<br /><br /><br /><br />            
                <main class="container">
				<br />
                 {$pm_notice}{$pm_switch_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
The browser console shows this error on your index page:
Uncaught TypeError: $(...).counterUp is not a function
    at HTMLDocument.<anonymous> ((index):365)
    at i (jquery.js?ver=1814:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1814:2)
    at Function.ready (jquery.js?ver=1814:2)
    at HTMLDocument.K (jquery.js?ver=1814:2)

It's because all scripts from the folder images/js/ seem to be missing:
http://dinosaur.dreamscaperpgs.net/forum...tooltip.js
http://dinosaur.dreamscaperpgs.net/forum...rup.min.js
http://dinosaur.dreamscaperpgs.net/forum...nts.min.js
Okay. Added the JS. But the menu still isn't working.

The EAS is though! Thank you very much for that <3 Big Grin
Hi folks! Still seeking some assistance with the sticky header issue, if anyone is able to offer some insight!

Thank you!