Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690
↧

[TUT] - A Simple Responsive Dropdown Navigation Menu (Re-edit)

January 22, 2021, 7:02 am
$
0
0
[Tutorial] - A Simple Responsive Dropdown Navigation Menu (Re-edit) by: WallBB & V

* 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 in the past 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 here until much later now found again 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 & V **/

 .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:

For external linking:

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

* Or you can also just download Fontawesome5 pkg and strip it down for size to be used for for internal theme include:

ie: download web-specific files source: https://use.fontawesome.com/releases/v5.....2-web.zip

And change headerinclude linkage to reflect where you uploaded your internal library

Internal linking example:

<link rel="stylesheet" href="{$mybb->asset_url}/fontawesome5/css/all.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: 1) 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 visit here to do these on the fly https://realfavicongenerator.net/ * once downloaded create a directory called favicon and place the downloaded files in it then upload the favicon folder into your images directory and then modify the headerinclude and images found in favicon directory to your respective favicon images....

Simple ModCP Responsive Dropdown Navigation Menu

ie:
[Image: Forums-Moderator-Control-Panel.png]

[Image: Forums-Moderator-Control-Panel-1.png]

Create Stylesheet: modnav.css (attached to modcp.php)

Edit Stylesheet: modnav.css

/** ModCP Responsive Dropdown Navigation by WallBB & V **/

.modcp_nav_forums_posts:before{
      content:"\f086";
}
.modcp_nav_users:before{
      content:"\f0c0";
} 
.modcpnav_container {
	width: 100%;
	 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;
	 border-radius: 6px;
	 padding-top: 1px;
	 padding-left: 2px;
	 padding-right: 2px;
	 padding-bottom: 1px;
} 
a.modcpnav {
     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.modcpnav:hover {
     background: #444 !important;
}
 modcpnav a:link {
     color: #fff;
     text-decoration: none;
}
 modcpnav a:visited {
     color: #fff;
     text-decoration: none;
}
 modcpnav a:hover, modcpnav a:active {
     color: #a0a0a0;
     text-decoration: none;
}
.modcpnavtoggle1, [id^="modcpnavdrop1"] {
   display: none; 
}
.modcpnavtoggle2, [id^="modcpnavdrop2"] {
   display: none; 
}
.modcpnavtoggle3, [id^="modcpnavdrop3"] {
   display: none; 
}
modcpnav {
   background: #333;
   margin: 0;
   padding: 0;
}
modcpnav:after {
   clear: both;
   content: "";
   display: table;
}
modcpnav ul {
   list-style: outside none none;
   margin: 0;
   padding: 0;
   position: relative;
}
modcpnav ul li {
   border-left: 1px solid #555;
   display: inline-block;
   float: left;
   margin: 0;
}
modcpnav a {
   background: #222;
   color: #fff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
modcpnav ul li ul li:hover {
   background: #444 none repeat scroll 0 0;
}
modcpnav a:hover {
   background-color: #000000;
}
modcpnav ul ul {
   display: none;
   position: absolute;
   top: 35px;
}
modcpnav ul li:hover > ul {
   display: inherit;
}
modcpnav ul ul li {
   display: list-item;
   float: none;
   position: relative;
   width: 170px;
}
modcpnav ul ul ul li {
   left: 170px;
   position: relative;
   top: -60px;
}
modcpnav ul li > a::after {
   content: " ";
   display: inline;
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
}
modcpnav ul li > a:only-child::after {
   content: "";
}
@media all and (max-width: 768px) {
modcpnav ul li > a::after {
   content: " ";
   display: inline;
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
}	
modcpnav {
   margin: 0;
}
.modcpnavtoggle1 + a, .modcpnavmenu {
   display: none;
}
.modcpnavtoggle1 {
   background: #333;
   border: medium none;
   color: #ffffff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
.modcpnavtoggle1:hover {
   background-color: #000000;
}
.modcpnavtoggle2 + a, .modcpnavmenu {
   display: none;
}
.modcpnavtoggle2 {
   background: #333;
   border: medium none;
   color: #ffffff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
.modcpnavtoggle2:hover {
   background-color: #000000;
}	
.modcpnavtoggle3 + a, .modcpnavmenu {
   display: none;
}
.modcpnavtoggle3 {
   background: #333;
   border: medium none;
   color: #ffffff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
.modcpnavtoggle3:hover {
   background-color: #000000;
}	
[id^="modcpnavdrop1"]:checked + ul {
   display: block;
}
[id^="modcpnavdrop2"]:checked + ul {
   display: block;
}
[id^="modcpnavdrop3"]:checked + ul {
   display: block;
} 	
modcpnav ul li {
   display: block;
   width: 100%;
}
modcpnav ul ul .modcpnavtoggle1, modcpnav ul ul a {
   padding: 0 40px;
}
modcpnav ul ul .modcpnavtoggle2, modcpnav ul ul a {
   padding: 0 40px;
}
modcpnav ul ul .modcpnavtoggle3, modcpnav ul ul a {
   padding: 0 40px;
} 	
modcpnav ul ul ul a {
   padding: 0 80px;
}
modcpnav a:hover, modcpnav ul ul ul a {
   background-color: #000000;
}
modcpnav ul li ul li .modcpnavtoggle1, modcpnav ul ul a, modcpnav ul ul ul a {
   color: #ffffff;
   font-size: 12px;
   padding: 10px 15px;
}
modcpnav ul li ul li .modcpnavtoggle1, modcpnav ul ul a {
   background-color: #212121;
}
modcpnav ul li ul li .modcpnavtoggle2, modcpnav ul ul a, modcpnav ul ul ul a {
   color: #ffffff;
   font-size: 12px;
   padding: 10px 15px;
}
modcpnav ul li ul li .modcpnavtoggle2, modcpnav ul ul a {
   background-color: #212121;
}
modcpnav ul li ul li .modcpnavtoggle3, modcpnav ul ul a, modcpnav ul ul ul a {
   color: #ffffff;
   font-size: 12px;
   padding: 10px 15px;
}
modcpnav ul li ul li .modcpnavtoggle3, modcpnav ul ul a {
   background-color: #212121;
}  	
modcpnav ul ul {
   color: #ffffff;
   float: none;
   position: static;
}
modcpnav ul ul li:hover > ul, modcpnav ul li:hover > ul {
   display: none;
}
modcpnav ul ul li {
   display: block;
   width: 100%;
}
modcpnav ul ul ul li {
   position: static;
}
}
@media all and (max-width: 330px) {
modcpnav ul li {
   display: block;
   width: 94%;
}
}
@media only screen and (min-width: 769px) {
modcpnav ul {
   margin-left: 8%;
}
modcpnav ul ul {
   margin-left: 0;
}
}

Edit stylesheet: modcp.css

.modcp_nav_item:before{
      font-size:16px;
      font-family:"Font Awesome 5 Free";
	  font-weight: 900;
      color: #666;
      width:28px;
      margin-right:3px;
      text-align:center;
      display:inline-block;
}
.modcp_nav_home:before{
      content:"\f015";
}
.modcp_nav_announcements:before {
    content:"\f0f3"
}
.modcp_nav_reports:before {
    content: "\f071";
}
.modcp_nav_modqueue:before {
    content:"\f02d"
}
.modcp_nav_modlogs:before {
    content: "\f109";
}
.modcp_nav_editprofile:before {
    content: "\f007";
}
.modcp_nav_banning:before {
    content: "\f023";
}
.modcp_nav_warninglogs:before {
    content: "\f06e";
}
.modcp_nav_ipsearch:before {
    content: "\f002";
}
.modqueue_message {
	overflow: auto;
	max-height: 250px;
}
.modqueue_controls {
	width: 270px;
	float: right;
	text-align: center;
	border: 1px solid #ccc;
	background: #fff;
	padding: 6px;
	font-weight: bold;
}
.modqueue_controls label {
	margin-right: 8px;
}
.label_radio_ignore,
.label_radio_delete,
.label_radio_approve {
	font-weight: bold;
}
.modqueue_meta {
	color: #444;
	font-size: 95%;
	margin-bottom: 8px;
}
.modqueue_mass {
	list-style: none;
	margin: 0;
	width: 150px;
	padding: 0;
}
.modqueue_mass li {
	margin-bottom: 4px;
	padding: 0;
}
.modqueue_mass li a {
	display: block;
	padding: 4px;
	border: 1px solid transparent;
}
.modqueue_mass li a:hover {
	background: #efefef;
	border: 1px solid #ccc;
	text-decoration: none;
}


Edit Template: modcp_nav

<div class="modcpnav_container">
<modcpnav>
   <label for="modcpnavdrop1" class="modcpnavtoggle1"><i class="fas fa-bars" aria-hidden="true"></i> {$lang->nav_menu}</label>
   <input type="checkbox" id="modcpnavdrop1" />
   <ul class="modcpnavmenu">
      <li><a href="modcp.php" class="modcp_nav_item modcp_nav_home">{$lang->mcp_nav_home}</a></li>
      {$modcp_nav_forums_posts}
      {$modcp_nav_users} 
   </ul>
</modcpnav>
</div>


Edit Template: modcp_nav_announcements

					 <li><a href="{$mybb->settings['bburl']}/modcp.php?action=announcements" class="modcp_nav_item modcp_nav_announcements">{$lang->mcp_nav_announcements}</a></li>


Edit Template: modcp_nav_banning

							<li><a href="{$mybb->settings['bburl']}/modcp.php?action=banning" class="modcp_nav_item modcp_nav_banning">{$lang->mcp_nav_banning}</a></li>



Edit Template: modcp_nav_editprofile

							<li><a href="{$mybb->settings['bburl']}/modcp.php?action=finduser" class="modcp_nav_item modcp_nav_editprofile">{$lang->mcp_nav_editprofile}</a></li>



Edit Template: modcp_nav_forums_posts

<li>
   <!-- Forums & Posts Drop Down -->
   <label for="modcpnavdrop2" class="modcpnavtoggle2"><span class="modcp_nav_item modcp_nav_forums_posts"></span>{$lang->mcp_nav_forums} <i class="fas fa-sort-desc" aria-hidden="true"></i><span class="float_right"><i class="fas fa-bars" aria-hidden="true"></i></span></label>
   <a href="#"><span class="modcp_nav_item modcp_nav_forums_posts"></span>{$lang->mcp_nav_forums}</a>
   <input type="checkbox" id="modcpnavdrop2"/>
   <ul>
      {$nav_announcements}
      {$nav_modqueue}
      {$nav_reportcenter}
      {$nav_modlogs}			  
   </ul>
</li>


Edit Template: modcp_nav_ipsearch

							<li><a href="{$mybb->settings['bburl']}/modcp.php?action=ipsearch" class="modcp_nav_item modcp_nav_ipsearch">{$lang->mcp_nav_ipsearch}</a></li>


Edit Template: modcp_nav_modlogs

							<li><a href="{$mybb->settings['bburl']}/modcp.php?action=modlogs" class="modcp_nav_item modcp_nav_modlogs">{$lang->mcp_nav_modlogs}</a></li>



Edit Template: modcp_nav_modqueue

							<li><a href="{$mybb->settings['bburl']}/modcp.php?action=modqueue" class="modcp_nav_item modcp_nav_modqueue">{$lang->mcp_nav_modqueue}</a</li>



Edit Template: modcp_nav_reportcenter
							<li><a href="{$mybb->settings['bburl']}/modcp.php?action=reports" class="modcp_nav_item modcp_nav_reports">{$lang->mcp_nav_report_center}</a></li>



Edit Template: modcp_nav_users

<li>
                <!-- Users Drop Down -->
                   <label for="modcpnavdrop3" class="modcpnavtoggle3"><span class="modcp_nav_item modcp_nav_users"></span>{$lang->mcp_nav_users} <i class="fas fa-sort-desc" aria-hidden="true"></i><span class="float_right"><i class="fas fa-bars" aria-hidden="true"></i></span></label>
                   <a href="#"><span class="modcp_nav_item modcp_nav_users"></span>{$lang->mcp_nav_users}</a>
                   <input type="checkbox" id="modcpnavdrop3"/>
                   <ul>
		{$nav_editprofile}
		{$nav_banning}
		{$nav_warninglogs}
		{$nav_ipsearch}                                     
                   </ul> 
               </li>
             
             
Edit Template: modcp_nav_warninglogs

							<li><a href="{$mybb->settings['bburl']}/modcp.php?action=warninglogs" class="modcp_nav_item modcp_nav_warninglogs">{$lang->mcp_nav_warninglogs}</a></li>

* note: the snippets provided are merely meant as a starting point and is meant to be continued to be edited further to finish any areas I did not get around to focussing on when quickly putting this tutorial together.

--- placeholder for the past matching respo usercp nav menu sections of this tutorial if I can locate them in my files again, if not no worries as I will just re-write them and add them here if and or when I have/find the free time to do so -- Wink
↧
Search
Viewing all articles
Browse latest Browse all 690

Trending Articles

RAMAYAMPET Mandal Sarpanch | Upa-Sarpanch | Ward member Mobile Numbers Medak...

May 24, 2017, 2:00 am

लड़कियां सेक्स के दौरान क्यों करती है उह! आह!लड़कियां सेक्स के दौरान क्यों करती...

May 19, 2016, 1:54 am

Neem Baba Extra Questions Answer Class 6 English Poorvi

February 1, 2025, 5:19 am

Throw Back: 4×4 — Sikilitele (Ft Castro) Prod by JQ

March 5, 2015, 8:24 am

Rajasthan Board 10th Result 2016 Roll No wise & Name Wise

August 20, 2016, 5:13 pm

Lowe faces four theft charges

November 14, 2017, 6:52 pm

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Mafia, Murder & Mayhem In The Motor City: Detroit Mob Hit Timeline (1937-2007)

December 7, 2016, 3:57 pm

The 10 Tennessee Cities With The Largest Black Population For 2021

December 21, 2020, 10:12 am

Materials Around Us Class 6 Worksheet Science Chapter 6

October 3, 2024, 5:20 am

デスクトップ ヒープの枯渇

January 18, 2018, 8:31 pm

Best Suvichar in Hindi |बेस्ट सुविचार |शुभ विचार हिंदी में

March 7, 2020, 11:19 pm

Kanulanu Thaake Lyrics and translation | Manam (2014)

May 9, 2014, 5:45 am

Korean Sex Porn Videos: XXX Videos & Free Porn Movies

May 30, 2025, 9:29 pm

Teen Shot In Miami Drive-By Dies From Injuries

August 8, 2011, 1:16 pm

Download: IQ Muzatasha feat Shy D & Pmj – Ulesi NiFertilizer Yamavuto

March 22, 2018, 7:23 pm

Mahakal Attitude Status

February 29, 2020, 9:52 am

Property developer set up cannabis factory to help pay off debts...

August 3, 2015, 2:29 am

♡

July 11, 2015, 6:15 am

KB: How to troubleshoot issues when adding a Hyper-V host in System Center...

August 14, 2012, 10:05 am
Search