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:
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> 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> {$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
and delete.
Done! Hope some people find this useful.
![[Image: My_BB_navbar.jpg]]()
![[Image: My_BB_navbar1.jpg]]()
![[Image: My_BB_navbar2.jpg]]()
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:
Code:
<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> 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> {$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
Code:
<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.
![[Image: My_BB_navbar.jpg]](http://s31.postimg.org/fwbznadqz/My_BB_navbar.jpg)
![[Image: My_BB_navbar1.jpg]](http://s32.postimg.org/g0ydyz139/My_BB_navbar1.jpg)
![[Image: My_BB_navbar2.jpg]](http://s31.postimg.org/55koqe3ej/My_BB_navbar2.jpg)