Thread Rating:
  • 1 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] - A Simple Responsive Dropdown Navigation Menu (Re-edit)
#1
Information 
[Tutorial] - A Simple Responsive Dropdown Navigation Menu (Re-edit) by: WallBB & Vintagedaddyo

* This is a continuation / variation of: [Tutorial] - Simple Responsive Dropdown Navigation Menu for MyBB by WallBB https://community.mybb.com/thread-202472.html  **

** while helping a few members via that tutorial in the distant past https://community.mybb.com/thread-202472-page-3.html & https://community.mybb.com/thread-202472-page-4.html I made several variations of the menu of which some were shared there at the time and then there was this one that I did not share until just now found below:

Also note: that this was done rather fast and there is indeed room for improvements...


Ok, simply follows the instructions below:

in your theme changes your logo to logo_white.png


Edit your theme and create a stylesheet for your theme called say:

respo_menu.css  * attach it globally

Add to respo_menu.css

/** Simple Responsive Dropdown Navigation by WallBB & Vintagedaddyo **/

 .welcomeblock {
     background: #555 !important;
     background: -moz-linear-gradient(top, #555 0%, #333 100%) !important;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #333)) !important;
     background: -webkit-linear-gradient(top, #555 0%, #333 100%) !important;
     background: -o-linear-gradiuuuuuent(top, #555 0%, #333 100%) !important;
     background: -ms-linear-gradient(top, #555 0%, #333 100%) !important;
     background: linear-gradient(top, #555 0%, #333 100%) !important;
:filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#333', GradientType=0 ) !important;
     border-bottom: 1px solid #333 !important;
     text-align: center;
     margin: 0 !important;
     padding: 10px;
     color: #fff;
     font-size:70%;
     white-space: wrap;
}
 .welcomeblock:hover {
     background: #444 !important;
}
 .welcomeblock a:link {
     color: #fff;
     text-decoration: none;
}
 .welcomeblock a:visited {
     color: #fff;
     text-decoration: none;
}
 .welcomeblock a:visited {
     color: #fff;
     text-decoration: none;
}
 .mini-avatar {
     vertical-align:middle;
     float:right;
     width:25px;
     height:25px;
     border-radius:100%;
     margin-left:5px;
     background: url('images/default_avatar.png') no-repeat;
     background-size: 100% auto;
     margin-top: -6px;
}
 .mini-avatar img {
     width:25px;
     height:25px;
     border-radius:100%;
}
 .mini-avatar img[src=""] {
     display: none;
}
 a.brand {
     float: left;
     padding:8px;
     height: 60px;
}
 a.brand img {
     font-size: 1.25rem;
     line-height: inherit;
     white-space: nowrap;
     vertical-align:middle;
}
 a.nav {
     background: #333 !important;
     background: -moz-linear-gradient(top, #333 0%, #555 100%) !important;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #555)) !important;
     background: -webkit-linear-gradient(top, #333 0%, #555 100%) !important;
     background: -o-linear-gradient(top, #333 0%, #555 100%) !important;
     background: -ms-linear-gradient(top, #333 0%, #555 100%) !important;
     background: linear-gradient(top, #333 0%, #555 100%) !important;     filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#555', GradientType=0 ) !important;
     border-bottom: 1px solid #555 !important;
}
 a.nav:hover {
     background: #444 !important;
}
 nav a:link {
     color: #fff;
     text-decoration: none;
}
 nav a:visited {
     color: #fff;
     text-decoration: none;
}
 nav a:hover, nav a:active {
     color: #a0a0a0;
     text-decoration: none;
}
 .toggle, [id^="drop1"] {
     display: none;
}
 .toggle2, [id^="drop2"] {
     display: none;
}
 nav {
     background: #333;
     border-bottom: 1px solid #555;
     margin: 0;
     padding: 0;
}
 nav:after {
     clear: both;
     content: "";
     display: table;
}
 nav ul {
     list-style: outside none none;
     margin: 0;
     padding: 0;
     position: relative;
}
 nav ul li {
     border-left: 1px solid #555;
     display: inline-block;
     float: right;
     margin: 0;
     text-align: left;
}
 nav a {
     background: #333;
     color: #fff;
     display: block;
     font-family: Helvetica, Arial, Verdana, sans-serif;
     font-size: 12px;
     padding: 10px 15px;
     text-decoration: none;
     text-align: left;
}
 nav ul li ul li:hover {
     background: #444 none repeat scroll 0 0;
}
 nav a:hover {
     background-color: #000000;
}
 nav ul ul {
     display: none;
     position: absolute;
     top: 35px;
}
 nav ul li:hover>ul {
     display: inherit;
}
 nav ul ul li {
     display: list-item;
     float: none;
     position: relative;
     width: 170px;
}
 nav ul ul ul li {
     right: 170px;
     position: relative;
     top: 60px;
}
 nav ul li > a:after {
     content: " ";
     display: inline;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
}
 nav ul li>a:only-child:after {
     content: "";
}
 @media all and (max-width: 768px) {
.forum_status {
    display: block !important;
}	 
.forum_legend dd {
    float: left;
    margin-left: 42px !important;
    margin-top: -22px !important;	 
 }		 
.forum_legend dt {
	float: none !important;
 }	 
.modal {
   width: 94%;
}	 
.tborder [id^="cat_"] td:nth-child(5){
     width: 20%;
     text-align: right;
}
.tborder [id^="cat_"] td:nth-child(4){
     display: none;
}
.tborder [id^="cat_"] td:nth-child(3){
    display: none;
}
     nav ul li > a:after {
         display: none;
    }
     nav {
         margin: 0;
    }
     .toggle+a, .menu {
         display: none;
    }
     .toggle {
         background: #333;
         border: medium none;
         color: #ffffff;
         display: block;
         font-family: Helvetica, Arial, Verdana, sans-serif;
         font-size: 25px;
         padding: 10px 15px;
         text-decoration: none;
         float: right;
    }
     .toggle:hover {
         background-color: #212121;
    }
     .toggle2 {
         background: #333;
         border: medium none;
         color: #ffffff;
         display: block;
         font-family: Helvetica, Arial, Verdana, sans-serif;
         font-size: 25px;
         padding: 10px 15px;
         text-decoration: none;
         float: right;
    }
     .toggle2:hover {
         background-color:  #212121;
    }
     [id^="drop1"]:checked+ul {
         display: block;
    }
     [id^="drop2"]:checked+ul {
         display: block;
    }
     nav ul li {
         display: block;
         width: 100%;
    }
     nav ul ul .toggle, nav ul ul a {
         padding: 0 40px;
         text-align: left !important;
    }
     nav ul ul .toggle2, nav ul ul a {
         padding: 0 40px;
         text-align: left !important;
    }
     nav ul ul ul a {
         padding: 0 80px;
    }
     nav a:hover, nav ul ul ul a {
         background-color: #000000;
    }
     nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a {
         color: #ffffff;
         font-size: 12px;
         padding: 10px 15px;
         text-align: left !important;
    }
     nav ul li ul li .toggle, nav ul ul a {
         background-color: #212121;
    }
     nav ul li ul li .toggle2, nav ul ul a, nav ul ul ul a {
         color: #ffffff;
         font-size: 12px;
         padding: 10px 15px;
         text-align: left !important;
    }
     nav ul li ul li .toggle2, nav ul ul a {
         background-color: #212121;
    }
     nav ul ul {
         color: #ffffff;
         float: none;
         position: static;
    }
     nav ul ul li:hover>ul, nav ul li:hover>ul {
         display: none;
    }
     nav ul ul li {
         display: block;
         width: 100%;
    }
     nav ul ul ul li {
         position: static;
    }
}
 @media all and (max-width: 330px) {
     nav ul li {
         display: block;
         width: 94%;
    }
}
 @media only screen and (min-width: 769px) {
     nav ul {
         margin-left: 8%;
    }
     nav ul ul {
         margin-left: 0;
    }
} 


In headerinclude template find:

{$stylesheets}

Add before:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">


Change header template as follows:

<div id="container">
    <a name="top" id="top"></a>
    <nav>
        <a class="nav" href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
        <label for="drop1" class="toggle"><i class="fas fa-bars" aria-hidden="true"></i> </label>
        <input type="checkbox" id="drop1" />
        <ul class="menu">
            <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><span><i class="fas fa-question"></i> {$lang->toplinks_help}</span></a></li>
            {$menu_calendar}
            {$menu_memberlist}
            {$menu_search}
            {$menu_portal}
            <li><a href="{$mybb->settings['homeurl']}" class="home"><span><i class="fas fa-home" aria-hidden="true"></i> {$mybb->settings['homename']}</span></a></li>
            {$welcomeblock}
            <div id="content">
                <div class="wrapper">
                    {$pm_notice}
                    {$remote_avatar_notice}
                    {$bannedwarning}
                    {$bbclosedwarning}
                    {$modnotice}
                    {$pending_joinrequests}
                    {$awaitingusers}
                    <navigation>
                        <br />

Change header_welcomeblock_guest template as follows:

<!-- Continuation as opened in the header template -->
<input type="checkbox" id="drop2" />
<li>
    <!--<a href="{$mybb->settings['bburl']}/member.php?action=register"> {$lang->welcome_guest}-->
    <a href="#"> {$lang->welcome_guest}
        <div class="mini-avatar">
            <img src="{$mybb->user['avatar']}" alt="avatar" />
        </div></a>
    <!-- First Tier Drop Down -->
    <input type="checkbox" id="drop2-2" />
    <ul>
        <li><a href="{$mybb->settings['bburl']}/search.php?action=getnew"><i class="fas fa-comment" aria-hidden="true"></i> {$lang->welcome_newposts}</a></li>
        <li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily"><i class="fas fa-comments" aria-hidden="true"></i> {$lang->welcome_todaysposts}</a></li>
        <li><a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;"><i class="fas fa-sign-in-alt" aria-hidden="true"></i> {$lang->welcome_login}</a></li>
        <li><a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fas fa-user-plus" aria-hidden="true"></i> {$lang->welcome_register}</a></li>
    </ul>
    <label for="drop2-2" class="toggle2"><i class="fas fa-bars" aria-hidden="true"></i> <i class="fas fa-sort-desc" aria-hidden="true"></i></label>
</li>
</ul>
</nav>
<div class="welcomeblock">
    <span class="welcome">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login"><i class="fas fa-sign-in-alt" aria-hidden="true"></i> {$lang->welcome_login}</a>&nbsp;<a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fas fa-user-plus" aria-hidden="true"></i> {$lang->welcome_register}</a></span></div>
<div class="modal" id="quick_login" style="display: none;">
    <form method="post" action="{$mybb->settings['bburl']}/member.php">
        <input name="action" type="hidden" value="do_login" />
        <input name="url" type="hidden" value="" />
        <input name="quick_login" type="hidden" value="1" />
        <input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
        <table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
            <tr>
                <td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
            </tr>
            {$loginform}
        </table>
    </form>
</div>
<script type="text/javascript">
    $("#quick_login input[name='url']").val($(location).attr('href'));
</script>

Change header_welcomeblock_member template as follows:

<!-- Continuation as opened in the header template -->
<input type="checkbox" id="drop2" />
<li>
    <!--<a href="member.php?action=profile&uid={$mybb->user['uid']}">{$mybb->user['username']}-->
    <a href="#">{$mybb->user['username']}
        <div class="mini-avatar">
            <img src="{$mybb->user['avatar']}" alt="avatar" />
        </div></a>
    <!-- First Tier Drop Down -->
    <input type="checkbox" id="drop2-2" />
    <ul>
        {$usercplink}
        {$modcplink}
        {$admincplink}
        {$buddylink}
        {$searchlink}
        {$pmslink}
        <li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout"><i class="fas fa-sign-out-alt" aria-hidden="true"></i> {$lang->welcome_logout}</a></li>
    </ul>
    <label for="drop2-2" class="toggle2"><i class="fas fa-bars" aria-hidden="true"></i> <i class="fas fa-sort-desc" aria-hidden="true"></i></label>
</li>
</ul>
</nav>
<div class="welcomeblock">
    <span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout"><i class="fas fa-sign-out-alt" aria-hidden="true"></i> {$lang->welcome_logout}</a></span></div>

replace header_welcomeblock_member_user template:
                <li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><i class="fas fa-user" aria-hidden="true"></i> {$lang->welcome_usercp}</a></li>

replace header_welcomeblock_member_admin template with:
               <li><a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php" class="admincp"><i class="fas fa-cog" aria-hidden="true"></i> {$lang->welcome_admin}</a></li>

replace header_welcomeblock_member_buddy
template with:
    <li><a id="buddylink" href="javascript:void(0)" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;"><i class="fas fa-users" aria-hidden="true"></i> {$lang->welcome_open_buddy_list}</a></li>

replace header_welcomeblock_member_moderator template with:

                <li><a href="{$mybb->settings['bburl']}/modcp.php" class="modcp"><i class="fas fa-cog" aria-hidden="true"></i> {$lang->welcome_modcp}</a></li>


replace header_welcomeblock_member_pms template with:

               <li><a href="{$mybb->settings['bburl']}/private.php"><i class="fas fa-envelope" aria-hidden="true"></i> {$lang->welcome_pms}</a></li>

replace header_welcomeblock_member_search template with:

                <li><a href="{$mybb->settings['bburl']}/search.php?action=getnew"><i class="fas fa-comment" aria-hidden="true"></i> {$lang->welcome_newposts}</a></li>
                <li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily"><i class="fas fa-comments" aria-hidden="true"></i> {$lang->welcome_todaysposts}</a></li>

replace header_menu_calendar with:

        <li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fas fa-calendar" aria-hidden="true"></i> {$lang->toplinks_calendar}</a></li>


replace header_menu_memberlist with:

        <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="members"><span><i class="fas fa-user" aria-hidden="true"></i> {$lang->toplinks_memberlist}</span></a></li>

replace header_menu_portal with:

        <li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><span><i class="fas fa-bell" aria-hidden="true"></i> {$lang->toplinks_portal}</span></a></li>


replace header_menu_search with:

        <li><a href="{$mybb->settings['bburl']}/search.php" class="search"><span><i class="fas fa-search" aria-hidden="true"></i> {$lang->toplinks_search}</span></a></li>


Examples:


[Image: Screenshot-20200204-155616-Firefox.jpg]

[Image: Screenshot-20200204-155620-Firefox.jpg]

[Image: Screenshot-20200204-155628-Firefox.jpg]

[Image: Screenshot-20200204-155654-Firefox.jpg]

[Image: Screenshot-20200204-155659-Firefox.jpg]

[Image: Screenshot-20200204-155711-Firefox.jpg]


Note: one thing the tutorial forgets to mention is that this menu will not be responsive on mobile device after following the tutorial. Yeah you can resize your desktop browser or what not and it may appear responsive but without viewport, it will not function as intended on mobile devices because this needs to be added to header include for that to happen.

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



Now, this wont make the rest of your theme responsive, only the menu as the rest of the theme is up to you to work on and a good starting point is commenting out container width and wrapper width... until you sort out device sizings.

Example:

global.css 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;
}

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


Comment out:

#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;*/
}

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


Simple enough right? Now, keep editing and modifying for your personal usages. Happy editing, Best of luck!  Cool

Extra Note: (optional)

One last thing, ok, so maybe you are wanting a pull to refresh addition to this menu and are reading the tutorial found here: https://community.mybb.com/thread-221731.html as it is a rather nice feature..., alrighty, let us add it to this tutorial

First download the pulltorefresh.min.js file attached here:
.js   pulltorefresh.min.js (Size: 6.48 KB / Downloads: 3) and upload the pulltorefresh.min.js file to your /jscripts folder.


Then in header template find:

<div id="container">

and replace it with:

<div id="pulltorefresh"></div>
<script src="{$mybb->asset_url}/jscripts/pulltorefresh.min.js"></script>
<script>
PullToRefresh.init({
  mainElement: '#pulltorefresh', // above which element?
  onRefresh: function (done) {
    setTimeout(function () {
      done(); // end pull to refresh
document.location.reload(true);
    }, 1500);
  }
});
</script>
<div id="container">



Ok, let us focus since we already did the menu, the pull to refresh, now let us do the favicon also for a variety of devices.

Find in headerinclude template where you added:
<meta name="viewport" content="width=device-width, initial-scale=1">

Also now add:
<link rel="apple-touch-icon" sizes="180x180" href="{$mybb->asset_url}/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{$mybb->asset_url}/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{$mybb->asset_url}/images/favicon/favicon-16x16.png">
<link rel="manifest" href={$mybb->asset_url}/images/favicon?"/site.webmanifest">
<link rel="mask-icon" href="{$mybb->asset_url}/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Then download
.zip   Upload.zip (Size: 43.74 KB / Downloads: 0) * inside you will find a folder /images/favicon upload the favicon folder into your images directory and then modify the headerinclude and images found in favicon directory to your respective favicon images ** you can also just visit here to do these on the fly https://realfavicongenerator.net/
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#2
Enjoy everyone Wink
A responsive menu will surely help your website adopt on every device.
Reply
#3
/** Reserved post **/


This post will eventually contain further tutorial continuation of say then focus on usercp and modcp menus if and or when my time allows to say finish both up and write the related tutorials for each.... stay tuned.

Example:
   
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#4
(02-03-2020, 01:47 AM)vintagedaddyo Wrote: [Tutorial] - A Simple Responsive Dropdown Navigation Menu (Re-edit) by: WallBB & Vintagedaddyo

* This is a continuation / variation of: [Tutorial] - Simple Responsive Dropdown Navigation Menu for MyBB by WallBB https://community.mybb.com/thread-202472.html  **

** while helping a few members via that tutorial in the distant past https://community.mybb.com/thread-202472-page-3.html & https://community.mybb.com/thread-202472-page-4.html I made several variations of the menu of which some were shared there at the time and then there was this one that I did not share until just now found below:

Also note: that this was done rather fast and there is indeed room for improvements...


Ok, simply follows the instructions below:

in your theme changes your logo to logo_white.png


Edit your theme and create a stylesheet for your theme called say:

respo_menu.css  * attach it globally

Add to respo_menu.css

/** Simple Responsive Dropdown Navigation by WallBB & Vintagedaddyo **/

 .welcomeblock {
     background: #555 !important;
     background: -moz-linear-gradient(top, #555 0%, #333 100%) !important;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #333)) !important;
     background: -webkit-linear-gradient(top, #555 0%, #333 100%) !important;
     background: -o-linear-gradiuuuuuent(top, #555 0%, #333 100%) !important;
     background: -ms-linear-gradient(top, #555 0%, #333 100%) !important;
     background: linear-gradient(top, #555 0%, #333 100%) !important;
:filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#555', endColorstr='#333', GradientType=0 ) !important;
     border-bottom: 1px solid #333 !important;
     text-align: center;
     margin: 0 !important;
     padding: 10px;
     color: #fff;
     font-size:70%;
     white-space: wrap;
}
 .welcomeblock:hover {
     background: #444 !important;
}
 .welcomeblock a:link {
     color: #fff;
     text-decoration: none;
}
 .welcomeblock a:visited {
     color: #fff;
     text-decoration: none;
}
 .welcomeblock a:visited {
     color: #fff;
     text-decoration: none;
}
 .mini-avatar {
     vertical-align:middle;
     float:right;
     width:25px;
     height:25px;
     border-radius:100%;
     margin-left:5px;
     background: url('images/default_avatar.png') no-repeat;
     background-size: 100% auto;
     margin-top: -6px;
}
 .mini-avatar img {
     width:25px;
     height:25px;
     border-radius:100%;
}
 .mini-avatar img[src=""] {
     display: none;
}
 a.brand {
     float: left;
     padding:8px;
     height: 60px;
}
 a.brand img {
     font-size: 1.25rem;
     line-height: inherit;
     white-space: nowrap;
     vertical-align:middle;
}
 a.nav {
     background: #333 !important;
     background: -moz-linear-gradient(top, #333 0%, #555 100%) !important;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(100%, #555)) !important;
     background: -webkit-linear-gradient(top, #333 0%, #555 100%) !important;
     background: -o-linear-gradient(top, #333 0%, #555 100%) !important;
     background: -ms-linear-gradient(top, #333 0%, #555 100%) !important;
     background: linear-gradient(top, #333 0%, #555 100%) !important;     filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#555', GradientType=0 ) !important;
     border-bottom: 1px solid #555 !important;
}
 a.nav:hover {
     background: #444 !important;
}
 nav a:link {
     color: #fff;
     text-decoration: none;
}
 nav a:visited {
     color: #fff;
     text-decoration: none;
}
 nav a:hover, nav a:active {
     color: #a0a0a0;
     text-decoration: none;
}
 .toggle, [id^="drop1"] {
     display: none;
}
 .toggle2, [id^="drop2"] {
     display: none;
}
 nav {
     background: #333;
     border-bottom: 1px solid #555;
     margin: 0;
     padding: 0;
}
 nav:after {
     clear: both;
     content: "";
     display: table;
}
 nav ul {
     list-style: outside none none;
     margin: 0;
     padding: 0;
     position: relative;
}
 nav ul li {
     border-left: 1px solid #555;
     display: inline-block;
     float: right;
     margin: 0;
     text-align: left;
}
 nav a {
     background: #333;
     color: #fff;
     display: block;
     font-family: Helvetica, Arial, Verdana, sans-serif;
     font-size: 12px;
     padding: 10px 15px;
     text-decoration: none;
     text-align: left;
}
 nav ul li ul li:hover {
     background: #444 none repeat scroll 0 0;
}
 nav a:hover {
     background-color: #000000;
}
 nav ul ul {
     display: none;
     position: absolute;
     top: 35px;
}
 nav ul li:hover>ul {
     display: inherit;
}
 nav ul ul li {
     display: list-item;
     float: none;
     position: relative;
     width: 170px;
}
 nav ul ul ul li {
     right: 170px;
     position: relative;
     top: 60px;
}
 nav ul li > a:after {
     content: " ";
     display: inline;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
}
 nav ul li>a:only-child:after {
     content: "";
}
 @media all and (max-width: 768px) {
.forum_status {
    display: block !important;
}	 
.forum_legend dd {
    float: left;
    margin-left: 42px !important;
    margin-top: -22px !important;	 
 }		 
.forum_legend dt {
	float: none !important;
 }	 
.modal {
   width: 94%;
}	 
.tborder [id^="cat_"] td:nth-child(5){
     width: 20%;
     text-align: right;
}
.tborder [id^="cat_"] td:nth-child(4){
     display: none;
}
.tborder [id^="cat_"] td:nth-child(3){
    display: none;
}
     nav ul li > a:after {
         display: none;
    }
     nav {
         margin: 0;
    }
     .toggle+a, .menu {
         display: none;
    }
     .toggle {
         background: #333;
         border: medium none;
         color: #ffffff;
         display: block;
         font-family: Helvetica, Arial, Verdana, sans-serif;
         font-size: 25px;
         padding: 10px 15px;
         text-decoration: none;
         float: right;
    }
     .toggle:hover {
         background-color: #212121;
    }
     .toggle2 {
         background: #333;
         border: medium none;
         color: #ffffff;
         display: block;
         font-family: Helvetica, Arial, Verdana, sans-serif;
         font-size: 25px;
         padding: 10px 15px;
         text-decoration: none;
         float: right;
    }
     .toggle2:hover {
         background-color:  #212121;
    }
     [id^="drop1"]:checked+ul {
         display: block;
    }
     [id^="drop2"]:checked+ul {
         display: block;
    }
     nav ul li {
         display: block;
         width: 100%;
    }
     nav ul ul .toggle, nav ul ul a {
         padding: 0 40px;
         text-align: left !important;
    }
     nav ul ul .toggle2, nav ul ul a {
         padding: 0 40px;
         text-align: left !important;
    }
     nav ul ul ul a {
         padding: 0 80px;
    }
     nav a:hover, nav ul ul ul a {
         background-color: #000000;
    }
     nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a {
         color: #ffffff;
         font-size: 12px;
         padding: 10px 15px;
         text-align: left !important;
    }
     nav ul li ul li .toggle, nav ul ul a {
         background-color: #212121;
    }
     nav ul li ul li .toggle2, nav ul ul a, nav ul ul ul a {
         color: #ffffff;
         font-size: 12px;
         padding: 10px 15px;
         text-align: left !important;
    }
     nav ul li ul li .toggle2, nav ul ul a {
         background-color: #212121;
    }
     nav ul ul {
         color: #ffffff;
         float: none;
         position: static;
    }
     nav ul ul li:hover>ul, nav ul li:hover>ul {
         display: none;
    }
     nav ul ul li {
         display: block;
         width: 100%;
    }
     nav ul ul ul li {
         position: static;
    }
}
 @media all and (max-width: 330px) {
     nav ul li {
         display: block;
         width: 94%;
    }
}
 @media only screen and (min-width: 769px) {
     nav ul {
         margin-left: 8%;
    }
     nav ul ul {
         margin-left: 0;
    }
} 


In headerinclude template find:

{$stylesheets}

Add before:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css">


Change header template as follows:

<div id="container">
    <a name="top" id="top"></a>
    <nav>
        <a class="nav" href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
        <label for="drop1" class="toggle"><i class="fas fa-bars" aria-hidden="true"></i> </label>
        <input type="checkbox" id="drop1" />
        <ul class="menu">
            <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><span><i class="fas fa-question"></i> {$lang->toplinks_help}</span></a></li>
            {$menu_calendar}
            {$menu_memberlist}
            {$menu_search}
            {$menu_portal}
            <li><a href="{$mybb->settings['homeurl']}" class="home"><span><i class="fas fa-home" aria-hidden="true"></i> {$mybb->settings['homename']}</span></a></li>
            {$welcomeblock}
            <div id="content">
                <div class="wrapper">
                    {$pm_notice}
                    {$remote_avatar_notice}
                    {$bannedwarning}
                    {$bbclosedwarning}
                    {$modnotice}
                    {$pending_joinrequests}
                    {$awaitingusers}
                    <navigation>
                        <br />

Change header_welcomeblock_guest template as follows:

<!-- Continuation as opened in the header template -->
<input type="checkbox" id="drop2" />
<li>
    <!--<a href="{$mybb->settings['bburl']}/member.php?action=register"> {$lang->welcome_guest}-->
    <a href="#"> {$lang->welcome_guest}
        <div class="mini-avatar">
            <img src="{$mybb->user['avatar']}" alt="avatar" />
        </div></a>
    <!-- First Tier Drop Down -->
    <input type="checkbox" id="drop2-2" />
    <ul>
        <li><a href="{$mybb->settings['bburl']}/search.php?action=getnew"><i class="fas fa-comment" aria-hidden="true"></i> {$lang->welcome_newposts}</a></li>
        <li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily"><i class="fas fa-comments" aria-hidden="true"></i> {$lang->welcome_todaysposts}</a></li>
        <li><a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;"><i class="fas fa-sign-in-alt" aria-hidden="true"></i> {$lang->welcome_login}</a></li>
        <li><a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fas fa-user-plus" aria-hidden="true"></i> {$lang->welcome_register}</a></li>
    </ul>
    <label for="drop2-2" class="toggle2"><i class="fas fa-bars" aria-hidden="true"></i> <i class="fas fa-sort-desc" aria-hidden="true"></i></label>
</li>
</ul>
</nav>
<div class="welcomeblock">
    <span class="welcome">{$lang->welcome_guest} <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login"><i class="fas fa-sign-in-alt" aria-hidden="true"></i> {$lang->welcome_login}</a>&nbsp;<a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fas fa-user-plus" aria-hidden="true"></i> {$lang->welcome_register}</a></span></div>
<div class="modal" id="quick_login" style="display: none;">
    <form method="post" action="{$mybb->settings['bburl']}/member.php">
        <input name="action" type="hidden" value="do_login" />
        <input name="url" type="hidden" value="" />
        <input name="quick_login" type="hidden" value="1" />
        <input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
        <table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
            <tr>
                <td class="thead" colspan="2"><strong>{$lang->login}</strong></td>
            </tr>
            {$loginform}
        </table>
    </form>
</div>
<script type="text/javascript">
    $("#quick_login input[name='url']").val($(location).attr('href'));
</script>

Change header_welcomeblock_member template as follows:

<!-- Continuation as opened in the header template -->
<input type="checkbox" id="drop2" />
<li>
    <!--<a href="member.php?action=profile&uid={$mybb->user['uid']}">{$mybb->user['username']}-->
    <a href="#">{$mybb->user['username']}
        <div class="mini-avatar">
            <img src="{$mybb->user['avatar']}" alt="avatar" />
        </div></a>
    <!-- First Tier Drop Down -->
    <input type="checkbox" id="drop2-2" />
    <ul>
        {$usercplink}
        {$modcplink}
        {$admincplink}
        {$buddylink}
        {$searchlink}
        {$pmslink}
        <li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout"><i class="fas fa-sign-out-alt" aria-hidden="true"></i> {$lang->welcome_logout}</a></li>
    </ul>
    <label for="drop2-2" class="toggle2"><i class="fas fa-bars" aria-hidden="true"></i> <i class="fas fa-sort-desc" aria-hidden="true"></i></label>
</li>
</ul>
</nav>
<div class="welcomeblock">
    <span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout"><i class="fas fa-sign-out-alt" aria-hidden="true"></i> {$lang->welcome_logout}</a></span></div>

replace header_welcomeblock_member_user template:
                <li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><i class="fas fa-user" aria-hidden="true"></i> {$lang->welcome_usercp}</a></li>

replace header_welcomeblock_member_admin template with:
               <li><a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php" class="admincp"><i class="fas fa-cog" aria-hidden="true"></i> {$lang->welcome_admin}</a></li>

replace header_welcomeblock_member_buddy
template with:
    <li><a id="buddylink" href="javascript:void(0)" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;"><i class="fas fa-users" aria-hidden="true"></i> {$lang->welcome_open_buddy_list}</a></li>

replace header_welcomeblock_member_moderator template with:

                <li><a href="{$mybb->settings['bburl']}/modcp.php" class="modcp"><i class="fas fa-cog" aria-hidden="true"></i> {$lang->welcome_modcp}</a></li>


replace header_welcomeblock_member_pms template with:

               <li><a href="{$mybb->settings['bburl']}/private.php"><i class="fas fa-envelope" aria-hidden="true"></i> {$lang->welcome_pms}</a></li>

replace header_welcomeblock_member_search template with:

                <li><a href="{$mybb->settings['bburl']}/search.php?action=getnew"><i class="fas fa-comment" aria-hidden="true"></i> {$lang->welcome_newposts}</a></li>
                <li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily"><i class="fas fa-comments" aria-hidden="true"></i> {$lang->welcome_todaysposts}</a></li>

replace header_menu_calendar with:

        <li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fas fa-calendar" aria-hidden="true"></i> {$lang->toplinks_calendar}</a></li>


replace header_menu_memberlist with:

        <li><a href="{$mybb->settings['bburl']}/memberlist.php" class="members"><span><i class="fas fa-user" aria-hidden="true"></i> {$lang->toplinks_memberlist}</span></a></li>

replace header_menu_portal with:

        <li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><span><i class="fas fa-bell" aria-hidden="true"></i> {$lang->toplinks_portal}</span></a></li>


replace header_menu_search with:

        <li><a href="{$mybb->settings['bburl']}/search.php" class="search"><span><i class="fas fa-search" aria-hidden="true"></i> {$lang->toplinks_search}</span></a></li>


Examples:


[Image: Screenshot-20200204-155616-Firefox.jpg]

[Image: Screenshot-20200204-155620-Firefox.jpg]

[Image: Screenshot-20200204-155628-Firefox.jpg]

[Image: Screenshot-20200204-155654-Firefox.jpg]

[Image: Screenshot-20200204-155659-Firefox.jpg]

[Image: Screenshot-20200204-155711-Firefox.jpg]


Note: one thing the tutorial forgets to mention is that this menu will not be responsive on mobile device after following the tutorial. Yeah you can resize your desktop browser or what not and it may appear responsive but without viewport, it will not function as intended on mobile devices because this needs to be added to header include for that to happen.

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



Now, this wont make the rest of your theme responsive, only the menu as the rest of the theme is up to you to work on and a good starting point is commenting out container width and wrapper width... until you sort out device sizings.

Example:

global.css 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;
}

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


Comment out:

#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;*/
}

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


Simple enough right? Now, keep editing and modifying for your personal usages. Happy editing, Best of luck!  Cool

Extra Note: (optional)

One last thing, ok, so maybe you are wanting a pull to refresh addition to this menu and are reading the tutorial found here: https://community.mybb.com/thread-221731.html as it is a rather nice feature..., alrighty, let us add it to this tutorial

First download the pulltorefresh.min.js file attached here:  and upload the pulltorefresh.min.js file to your /jscripts folder.


Then in header template find:

<div id="container">

and replace it with:

<div id="pulltorefresh"></div>
<script src="{$mybb->asset_url}/jscripts/pulltorefresh.min.js"></script>
<script>
PullToRefresh.init({
  mainElement: '#pulltorefresh', // above which element?
  onRefresh: function (done) {
    setTimeout(function () {
      done(); // end pull to refresh
document.location.reload(true);
    }, 1500);
  }
});
</script>
<div id="container">



Ok, let us focus since we already did the menu, the pull to refresh, now let us do the favicon also for a variety of devices.

Find in headerinclude template where you added:
<meta name="viewport" content="width=device-width, initial-scale=1">

Also now add:
<link rel="apple-touch-icon" sizes="180x180" href="{$mybb->asset_url}/images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{$mybb->asset_url}/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{$mybb->asset_url}/images/favicon/favicon-16x16.png">
<link rel="manifest" href={$mybb->asset_url}/images/favicon?"/site.webmanifest">
<link rel="mask-icon" href="{$mybb->asset_url}/images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Then download  * inside you will find a folder /images/favicon upload the favicon folder into your images directory and then modify the headerinclude and images found in favicon directory to your respective favicon images ** you can also just visit here to do these on the fly https://realfavicongenerator.net/
This helped me ! Thank ya Smile
[Image: GEEKHALL-AD.png]
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)