MyBB Community Forums

This comes up a lot, so i thought i would post this tip on starting to get your MyBB responsive. What this mod will do is give you a fixed navigation bar at the top of the page, which collapses on the small screen. It should also make adding toplinks alot simpler for newbies.

Step 1: Link to a responsive framework:

In headerinclude:

Find:

{$stylesheets}

Add the following above it:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

You can also save a copy of the css file to your local server, and then link to it as follows:

<link rel="stylesheet" href="{$mybb->asset_url}/w3.css">

Find:

<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />

Add the following above it:

<meta name="viewport" content="width=device-width, initial-scale=1">

Save and close.

If you refresh your screen, you will notice that the default layout is broken.

Step 2: Global.css

Find

body {

background: #fff;
color: #333;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
overflow-y: scroll;
}

And replace it with:

body {

background: #fff;
color: #333;
text-align: center;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
/* overflow-y: scroll;*/
}

Find:

#container {

color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
min-width: 990px;
}

And replace it with:

#container {

color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
/* min-width: 990px;*/
}

Find:

.wrapper {

width: 85%;
min-width: 970px;
max-width: 1500px;
margin: auto auto;
}

And replace it with:

.wrapper {

width: 85%;
/* min-width: 970px;
max-width: 1500px;*/
margin: auto auto;
}

Step 3: Header template

Find:

<div id="container">

And add the following above it:

<ul class="w3-navbar w3-small w3-light-grey">
   <li class="w3-hide-medium w3-hide-large w3-light-grey w3-opennav w3-right">
    <a href="javascript:void(0);" onclick="myFunction1()">☰</a>
  </li>	
  <li class="w3-hide-small w3-right"><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
  {$menu_calendar}
  {$menu_memberlist}
  {$menu_search}
  {$menu_portal}	
</ul>
<div id="topnav" class="w3-hide w3-hide-large w3-hide-medium">
  <ul class="w3-navbar w3-small w3-center w3-light-grey">
    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></li>
    <li><a href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></li>
    <li><a href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></li>
    <li><a href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></li>
	<li><a href="{$mybb->settings['bburl']}/portal.php">{$lang->toplinks_portal}</a></li>  
  </ul>
</div>
<script>
function myFunction1() {
    var x = document.getElementById("topnav");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

Step 4: header_menu_calendar; header_menu_memberlist; header_menu_portal; header_menu_search

In each of the above templates, replace <li> with <li class="w3-hide-small w3-right">

The redundant classes on the links; class="calendar"; class="memberlist"; class="portal"; class="search"; class="help" can be deleted from their respective links.

If you want to use font awesome, simply place <i class="fa fa-calendar"></i>&nbsp; before the language definition, so that you have:
<li class="w3-hide-small w3-right"><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar"></i>&nbsp;{$lang->toplinks_calendar}</a></li>

Don't forget to link to the font awesome css in headerinclude.

Step 5:

Go to http://mobiletest.me/ pick a small phone, and view your site.

Step 6: Remove redundant toplinks from header.

In header template, find

					<ul class="menu top_links">
						{$menu_portal}
						{$menu_search}
						{$menu_memberlist}
						{$menu_calendar}
						<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
					</ul>

and delete.

Done! Hope some people find this useful.

You can also add a screenshot so people know what they are getting apart from that good tutorial, will help lots of users

Updated the first post with some screen grabs.

Nice work, Ashley1

(2016-09-10, 04:53 PM)Phillip. Wrote: [ -> ]Nice work, Ashley1

Thanks.