MyBB Community Forums

Full Version: how to add a responsive sidebar navigation menu in mybb ?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
i want to add a responsive sidebar navigation menu in my forum ?

but i am very low in css , so please can anyone help me with this ?
Here is just one variant for example:

[Image: Forums-2.png]

[Image: Forums-3.png]

For testing purposes:

Edit Template: headerinclude

Add:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>


& comment out in global.css the following two min-widths

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

Adding Menu:

Add to css:
@media only screen and (max-width: 868px) {
.sidebar-index {
    float: unset !important;
    width: 100% !important;
}

.forum-index {
    float: unset;
    width: 100% !important;
}
}

.sidebar-index {
    float: right; 
    width: 19%
}
.forum-index {
    float: left;
    width: 80%
}

body {
  font-size: 100%;
  overflow-y: scroll;
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a {
  text-decoration: none;
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
a:hover {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
a:active {
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.app {
  height: 37vh;
  margin-bottom: 5px;
}
/* -------------
Sidebar
----------------*/
.sidebar {
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  background-color: #19222a;
  -webkit-transform: translateZ(0);
  visibility: visible;
  -webkit-backface-visibility: hidden;
	border-radius: 6px;
	margin-bottom: 20px;
}
.sidebar header {	
	background: #0066a2 url(images/thead.png) top left repeat-x;
	color: #ffffff;
	border-bottom: 1px solid #263c30;
	padding: 8px;	
    width: 100%;
    display: block;
	font-weight: bold;
}
/* -------------
Sidebar Nav
----------------*/
.sidebar-nav {
  position: fixed;
  background-color: #19222a;
  height: 100%;
  font-weight: 400;
  font-size: 1.2em;
  overflow: auto;
  padding-bottom: 6em;
  z-index: 9;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.sidebar-nav ul {
  list-style: none;
  display: block;
  padding: 0;
  margin: 0;
}
.sidebar-nav ul li {
  margin-left: 0;
  padding-left: 0;
  display: inline-block;
  width: 100%;
}
.sidebar-nav ul li a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.75em;
  padding: 1.05em 1em;
  position: relative;
  display: block;
}
.sidebar-nav ul li a:hover {
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.sidebar-nav ul li a:active {
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-transition: all 0.6s ease;
  -moz-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.sidebar-nav ul li i {
  font-size: 1.8em;
  padding-right: 0.5em;
  width: 9em;
  display: inline;
  vertical-align: middle;
}
.sidebar-nav > ul > li > a:after {
  content: "";
  font-family: ionicons;
  font-size: 0.5em;
  width: 10px;
  color: #fff;
  position: absolute;
  right: 0.75em;
  top: 45%;
}
.sidebar-nav .nav-flyout {
  position: absolute;
  background-color: #080d11;
  z-index: 9;
  left: 2.5em;
  top: 0;
  height: 100vh;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.sidebar-nav .nav-flyout a:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.sidebar-nav .nav-flyout a:active{
  background-color: rgba(255, 255, 255, 0.05);
}
.sidebar-nav ul > li:hover .nav-flyout {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.sidebar-nav ul > li:active .nav-flyout {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

Edit Template: index

find:

{$forums}


Replace with:

<div class="sidebar-index">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
   <section class="app">
      <aside class="sidebar">
         <header>
            Menu
         </header>
         <nav class="sidebar-nav">
            <ul>
               <li>
                  <a href="#"><i class="ion-bag"></i> <span>Item 1</span></a>
                  <ul class="nav-flyout">
                     <li>
                        <a href="#"><i class="ion-ios-color-filter-outline"></i>Link 1</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-ios-clock-outline"></i>Link 2</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-android-star-outline"></i>Link 3</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-heart-broken"></i>Link 4</a>
                     </li>
                  </ul>
               </li>
               <li>
                  <a href="#"><i class="ion-ios-settings"></i> <span class="">Item 2</span></a>
                  <ul class="nav-flyout">
                     <li>
                        <a href="#"><i class="ion-ios-alarm-outline"></i>Link 1</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-ios-camera-outline"></i>Link 2</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-ios-chatboxes-outline"></i>Link 3</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-ios-cog-outline"></i>Link 4</a>
                     </li>
                  </ul>
               </li>
               <li>
                  <a href="#"><i class="ion-ios-briefcase-outline"></i> <span class="">Item 3</span></a>
                  <ul class="nav-flyout">
                     <li>
                        <a href="#"><i class="ion-ios-flame-outline"></i>Link 1</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-ios-lightbulb-outline"></i>Link 2</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-ios-location-outline"></i>Link 3</a>
                     </li>
                     <li>
                        <a href="#"><i class="ion-ios-locked-outline"></i>Link 4</a>
                     </li>
                  </ul>
               </li>
               <li>
                  <a href="#"><i class="ion-ios-medical-outline"></i> <span class="">Item 4</span></a>
               </li>
            </ul>
         </nav>
      </aside>
   </section>
</div>
<div class="forum-index">	
   {$forums}
</div>

& then you can continue editing further for your usages.

for example: start setting device specific for example for this: * & **

@media only screen and (max-width: 360px) {
.sidebar-nav ul li a {
	width: 255px;
}
}

@media only screen and (min-width: 375px) {
.sidebar-nav ul li a {
	width: 275px;
}
}


@media only screen and (min-width: 414px) {
.sidebar-nav ul li a {
	width: 314px;
}
}

*etc, etc  ** (note these are only an example and not actually tweaked to precise specifics...)


also note: if you are wanting to change menu icons then visit: ionicons icons listing v2 for ref: https://ionicons.com/v2/

& then you can continue editing further for your usages.

Best of luck!  Big Grin  ~ V
amazing, you have provided an amazing content . Thanks for helping 😊.

also i was saying about this :- 
but it isn't Responsive 😞 can we do this with responsive ? 

will you please help me with this ? i will be obliged to you.
responsive css :- 
header :- 
<div class="haut glow">
	<a href="{$mybb->settings['bburl']}"><i id="logo" class="fa fa-comments-o fa-beat">  Gossipion</i></a>
	<span class="useroptions">
		<ul id="menu-deroulant" class="float-right-header">
			<li class="hide_mobile">
				<form action="search.php" method="post">
					  <input type="text"  id="search" name="keywords" style="display: none;font-family: roboto condensed;text-transform: uppercase;font-size: 13px;" placeholder="Search...">
					  <input type="hidden" name="action" value="do_search">
					  <input type="hidden" name="postthread" value="1">
					  <input type="hidden" name="showresults" value="posts">
				</form></li>
			<li class="hide_mobile"><a href="#" onclick='$("#search").animate({
            width: "toggle"
        });'><i style="padding:4px;" class="fa fa-search"></i></a></li>
			<li id="search_mobile" style="display:none;"><a href="search.php"><i style="padding:3px;" class="fa fa-search"></i></a></li>
			<li><a onclick="$('#side').slideToggle( 'slow' ); return false;" href='#'><i class="fa fa-list"></i></a></li>
			{$welcomeblock}
		</ul>
		<ul id="menu-deroulant" class="float-left-header">
			<li><a href="{$mybb->settings['bburl']}"><i class="fa fa-home"></i> Home</a></li>
			<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users"></i> Members</a></li>
			<li><a href="{$mybb->settings['bburl']}/showteam.php"><i class="fa fa-user-secret"></i> Team</a></li>
			<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-life-ring"></i> Help</a></li>
			<li class="alerts {$newAlertsIndicator}">
	<a href="{$mybb->settings['bburl']}/alerts.php" class="myalerts" onclick="MyBB.popupWindow('/alerts.php?modal=1&amp;ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;"><i class="fa fa-bell faa-ring1 animated" style="font-size: 14px;font-weight: bold;"></i>  {$lang->myalerts_alerts}({$mybb->user['unreadAlerts']})</a></li>
			<li><a href="#">More <i class="fa fa-angle-down"></i></a>
				<ul>
					<li class="alerts {$newAlertsIndicator}">{$myalerts_headericon}</li>
					<li><a href="#">Link 2</a></li>
					<li><a href="#">Link 3</a></li>
				</ul>
			</li>
		</ul>
	</span>
</div>
<div id="side" data-simplebar>
	<i id="side-close" onclick="$('#side').slideToggle( 'slow' );" class="fa fa-times"></i>
	<div id="side-links">
		<div class="menu_mobile" style="display:none;"><span class="title">User Links</span>{$welcomeblock}</div><br>
		<span class="title">Quick Links</span>
		<a href="{$mybb->settings['bburl']}"><i class="fa fa-home"></i> Home</a>
		<a href='memberlist.php'><i class="fa fa-users"></i> Members</a>
		<a href='showteam.php'><i class="fa fa-user-secret"></i> Team</a>
		<a href='misc.php?action=help'><i class="fa fa-life-ring"></i> Help</a>
		<br>
		<span class="title">More</span>
		<a href="{$mybb->settings['bburl']}/alerts.php" class="myalerts" onclick="MyBB.popupWindow('/alerts.php?modal=1&amp;ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;"><i class="fa fa-bell" style="color: red;font-size: 14px;font-weight: bold;"> {$lang->myalerts_alerts}({$mybb->user['unreadAlerts']})</i></a>
		<a href='#'><i class="fa fa-link"></i> Link 2</a>
		<a href='#'><i class="fa fa-link"></i> Link 3</a>
		<br><br><br><br>
	</div>
</div><center>
<div style="width: 98%; height: 70px;"></div>
<div id="header_block"><span id="hb_title" style="color: #fff;text-align: center;">{$mybb->settings['bbname']}<br /><span id="hb_desc" style="color: #fff;text-align: center;">Welcome to our board <i class="fa fa-smile-o"></i></span></span></div></center>
{$as_sidebar}<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
		<div id="content">
			<div class="wrapper">
				{$pm_notice}{$pm_switch_notice}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$modnotice}
				{$unreadreports}<!-- StatusFeed --> {$unread_statuses} <!-- /StatusFeed -->
				{$pending_joinrequests}
				{$awaitingusers}
{$awaitingPersonalDataErasureRequests}
				<navigation>
					<br />


header_welcomeblock_member :- 
<li class="hide_mobile"><img src="{$mybb->user['avatar']}" class="pixelmonkey" style="margin-top: -14px;width: 20px; height: 20px; border-radius: 400px; transition: all 1s;text-align: center;" title="{$mybb->user['username']}" onError="this.src='{$mybb->settings['bburl']}/images/default_avatar.png';"> <i class="fa fa-angle-double-down"></i>
	<ul>
		<li><a href="private.php">Inbox</a></li>
		<li><a href="usercp.php">User CP</a></li>
		<li>{$admincplink}</li>
		<li>{$modcplink}</li>
		<li><a href="member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><i class="fa fa-sign-out"></i>Logout</a></li>
	</ul>
</li>
<script>
	var connected = 1;
</script>

<span class="menu_mobile" style="display:none;">{$admincplink}
		{$modcplink}
	<a href='private.php'><i class="fa fa-inbox"></i> Inbox</a>
	<a href='usercp.php'><i class="fa fa-cogs"></i> User CP</a>
	<a href="member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"><i class="fa fa-sign-out"></i> Logout</a>
</span>

header_welcomeblock_guest :- 
<li class="hide_mobile"><a href="member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">Login</a></li>
		<li class="hide_mobile"><a href="member.php?action=register">Register</a></li>

<span class="menu_mobile" style="display:none;"><a href='' onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;"><i class="fa fa-sign-in"></i> Login</a>
	<a href="member.php?action=register"><i class="fa fa-user-plus"></i> Register</a></span>

				<div class="modal" id="quick_login" style="display: none;text-align:center;">
					<form method="post" action="{$mybb->settings['bburl']}/member.php">
						<input name="my_post_key" type="hidden" value="{$mybb->post_code}" />
						<input name="action" type="hidden" value="do_login" />
						<input name="url" type="hidden" value="" />
						<input name="quick_login" type="hidden" value="1" />
						<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>
							<tr>
								<td class="trow1" colspan="2"></td>
							</tr>
							<tr>
								<td class="trow1" width=""><strong>{$login_username}</strong></td>
								<td class="trow1"><input name="quick_username" id="quick_login_username" type="text" value="" class="textbox initial_focus" /></td>
							</tr>
							<tr>
								<td class="trow2"><strong>{$lang->password}</strong></td>
								<td class="trow2">
									<input name="quick_password" id="quick_login_password" type="password" value="" class="textbox" />
								</td>
							</tr>
							<tr>
								<td class="trow2" colspan="2">
									<div align="center"><input name="submit" type="submit" class="button" value="Sign-in" /></div>
								</td>
							</tr>
							<tr>
								<td class="trow1" colspan="2"></td>
							</tr>
						</table>
					</form>
				</div>
				<script type="text/javascript">
					$("#quick_login input[name='url']").val($(location).attr('href'));
				</script>
(2021-02-04, 02:33 AM)PARADOXP Wrote: [ -> ]also i was saying about this :- 

While yes such can be done by the end user if they choose without much dificulty..., I do not have the free time currently to dedicated to your specific theme nor do I have your theme to do such..., but yes such things can be done by the user easily...

but yes just for example sake you can see such can easily be added to a theme....

[Image: Forums.png]

[Image: Forums-1.png]

[Image: Forums-4.png]

[Image: Forums-5.png]

[Image: Forums-6.png]
(2021-02-04, 06:55 AM)censor_deeznutz Wrote: [ -> ]
(2021-02-04, 02:33 AM)PARADOXP Wrote: [ -> ]also i was saying about this :- 

While yes such can be done by the end user if they choose without much dificulty..., I do not have the free time currently to dedicated to your specific theme nor do I have your theme to do such..., but yes such things can be done by the user easily...

but yes just for example sake you can see such can easily be added to a theme....

[Image: Forums.png]

[Image: Forums-1.png]

[Image: Forums-4.png]

[Image: Forums-5.png]

[Image: Forums-6.png]

as i can see in this picture you already have done this .


please share the method in free time , how did you do this ?
(2021-02-04, 07:15 AM)PARADOXP Wrote: [ -> ]as i can see in this picture you already have done this .


please share the method in free time , how did you do this ?


This is not specific to your theme as you requested as I don't currently have that theme to look fully at, edit, etc, etc nor do I have lmuch free time as of late to even do so, nor is this perfect as it was simple done in like a 10 or so minutes edit just to show an example of such being added as a start to default theme due to rather limited free time currently, but...,


Add to CSS:
* {
	margin: 0;
	text-decoration: none;
}

#side-search {
	border: 0;
	padding: 15px;
	margin: 0;
}

#side-search input.button,
#side-search input.textbox {
	border-color: #000;
}

#side-search input.button {
	background: #B93632;
	color: #fff;
}

#side-search input {
	margin: -3px 0;
}

.sidebar {
	top: 0;
	bottom: 0;
	position: fixed;
	/*overflow-y: scroll;
	overflow-x: hidden;*/
	left: 0;
	width: 240px;
	left: -240px;
	height: 100%;
	background: #1e1e1e;
	transition: all .5s ease;
	-ms-overflow-style: none;
	/* IE and Edge */
	scrollbar-width: none;
	/* Firefox */
}

.sidebar::-webkit-scrollbar {
	display: none;
	/* Safari */
}

.sidebar header {
	font-size: 16px;
	color: white;
	line-height: 70px;
	text-align: center;
	background: #1b1b1b;
	user-select: none;
	font-weight: bold;
}

.sidebar a {
	display: block;
	height: 65px;
	width: 100%;
	color: white;
	line-height: 65px;
	padding-left: 30px;
	box-sizing: border-box;
	border-bottom: 1px solid black;
	border-top: 1px solid rgba(255, 255, 255, .1);
	border-left: 5px solid transparent;
	transition: all .5s ease;
}

.sidebar a.active,
.sidebar a:hover {
	border-left: 5px solid #b93632;
	color: #b93632;
}

.sidebar a.active,
.sidebar a:active {
	border-left: 5px solid #b93632;
	color: #b93632;
}

.sidebar a i {
	font-size: 23px;
	margin-right: 16px;
}

.sidebar a span {
	letter-spacing: 1px;
	text-transform: uppercase;
}

#check {
	display: none;
}

label #btn,
label #cancel {
	position: absolute;
	cursor: pointer;
	color: white;
	border-radius: 5px;
	border: 1px solid #262626;
	margin: 15px 30px;
	font-size: 29px;
	background: #262626;
	height: 45px;
	width: 45px;
	text-align: center;
	line-height: 45px;
	transition: all .5s ease;
	top: 0;
}

label #cancel {
	opacity: 0;
	visibility: hidden;
}

#check:checked~.sidebar {
	left: 0;
}

#check:checked~label #btn {
	margin-left: 245px;
	opacity: 0;
	visibility: hidden;
}

#check:checked~label #cancel {
	margin-left: 245px;
	opacity: 1;
	visibility: visible;
}

.mini-avatar-block {
	display: block;
}

.mini-avatar-user {
	vertical-align: middle;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	margin-left: 20%;
	background: url('images/default_avatar.png') no-repeat;
	background-size: 100% auto;
	margin-top: -6px;
	display: inline-block;
}

.mini-avatar-user img {
	width: 25px;
	height: 25px;
	border-radius: 100%;
}

.mini-avatar-user img[src=""] {
	display: none;
}

.mini-avatar-guest {
	vertical-align: middle;
	width: 25px;
	height: 25px;
	border-radius: 100%;
	margin-left: 20%;
	background: url('images/default_avatar.png') no-repeat;
	background-size: 100% auto;
	margin-top: -6px;
	display: inline-block;
}

.mini-avatar-guest img {
	width: 25px;
	height: 25px;
	border-radius: 100%;
}

.mini-avatar-guest img[src=""] {
	display: none;
}

@media(max-width: 860px) {
	#logo {
		padding-bottom: 10px !important;
		text-align: center !important;
		float: none !important;
		padding-left: 30px;
	}
	#logo img {
		padding-bottom: 15px;
	}
	.modal {
		width: 300px;
	}
}




comment out the following min-widths in global.css for:

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


Edit Template: headerinclude

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

Add before:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Find:
{$stylesheets}

Add before:
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

Again Find:
{$stylesheets}

Add After:
<script type="text/javascript">
$(document).ready(function() {
    var url = window.location;
    var element = $('.sidebar a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0;
    }).addClass('active').parent().parent().addClass('in').parent();
    if (element.is('a')) {
        element.addClass('active');
    }
});
</script>


Edit Template: header


Repace with:
<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div id="logo">
   <div class="wrapper">
      <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
      <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>
   </div>
</div>
<div id="panel">
<div class="upper">
<div class="wrapper">
   {$quicksearch}
   {$welcomeblock}
   <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
   <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
   <!-- </div>-->
   <!-- </div> -->
   <a href="{$mybb->settings['bburl']}/portal.php">
   <i class="fas fa-bell"></i>
   <span>{$lang->toplinks_portal}</span>
   </a>
   <a href="{$mybb->settings['bburl']}/search.php">
   <i class="fas fa-search"></i>
   <span>{$lang->toplinks_search}</span>
   </a>
   <a href="{$mybb->settings['bburl']}/memberlist.php">
   <i class="fas fa-users"></i>
   <span>{$lang->toplinks_memberlist}</span>
   </a>
   <a href="{$mybb->settings['bburl']}/calendar.php">
   <i class="fas fa-calendar"></i>
   <span>{$lang->toplinks_calendar}</span>
   </a>
   <a href="{$mybb->settings['bburl']}/misc.php?action=help">
   <i class="far fa-question-circle"></i>
   <span>{$lang->toplinks_help}</span>
   </a>
</div>
<div id="content">
<div class="wrapper">
{$pm_notice}
{$remote_avatar_notice}
{$bannedwarning}
{$bbclosedwarning}
{$modnotice}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />


Edit Template: header_welcomeblock_guest

Replace with:
<!-- Continuation of div(class="upper") as opened in the header template -->
<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">{$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a></span>
</div>
</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>
</div> <!-- -->
</div> <!-- -->
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>          
<div class="sidebar">
<header>
   <form action="{$mybb->settings['bburl']}/search.php">
      <fieldset id="side-search">
         <input name="keywords" type="text" class="textbox" />
         <input value="{$lang->search_button}" type="submit" class="button" />
         <input type="hidden" name="action" value="do_search" />
         <input type="hidden" name="postthread" value="1" />
      </fieldset>
   </form>
</header>
<div class="mini-avatar-block">
   <a href="{$mybb->settings['bburl']}/member.php?action=register" class="active">
      {$lang->welcome_guest}
      <div class="mini-avatar-guest">   
         <img src="{$mybb->user['avatar']}" alt="avatar" />
      </div>
   </a>
</div>
<a href="{$mybb->settings['bburl']}/member.php?action=register">
<i class="fas fa-pencil-alt"></i>
<span>{$lang->welcome_register}</span>
</a>
<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-key"></i>
<span>{$lang->welcome_login}</span>
</a>


Edit Template: header_welcomeblock_member

Replace with:

<!-- Continuation of div(class="upper") as opened in the header template -->
<span class="welcome">{$lang->welcome_back} <a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="logout">{$lang->welcome_logout}</a></span>
</div>
</div>
<div class="lower">
   <div class="wrapper">
      <ul class="menu panel_links">
         {$usercplink}
         {$modcplink}
         {$admincplink}
      </ul>
      <ul class="menu user_links">
         {$buddylink}
         {$searchlink}
         {$pmslink}
      </ul>
   </div>
   <br class="clear" />
</div>
</div> <!-- -->
</div> <!-- -->
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>      
<div id="sidebar" class="sidebar">
<header>
   <form action="{$mybb->settings['bburl']}/search.php">
      <fieldset id="side-search">
         <input name="keywords" type="text" class="textbox" />
         <input value="{$lang->search_button}" type="submit" class="button" />
         <input type="hidden" name="action" value="do_search" />
         <input type="hidden" name="postthread" value="1" />
      </fieldset>
   </form>
</header>
<div class="mini-avatar-block">
   <a href="member.php?action=profile&uid={$mybb->user['uid']}"  class="active">
      <i class="fas fa-user"></i>{$mybb->user['username']}
      <div class="mini-avatar-user">
         <img src="{$mybb->user['avatar']}" alt="avatar" />
      </div>
   </a>
</div>
{$usercplink}
{$modcplink}
{$admincplink}
<a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">
<i class="fas fa-power-off"></i>
<span>{$lang->welcome_logout}</span>
</a>


Edit Template: header_welcomeblock_member_user

Replace with:
<a href="{$mybb->settings['bburl']}/usercp.php">
<i class="fas fa-cog"></i>
<span>{$lang->welcome_usercp}</span>
</a>


Edit Template: header_welcomeblock_member_moderator

Replace with:
<a href="{$mybb->settings['bburl']}/modcp.php">
<i class="fas fa-cog"></i>
<span>{$lang->welcome_modcp}</span>
</a>

Edit Template: header_welcomeblock_member_admin

Replace with:
<a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php">
<i class="fas fa-cog"></i>
<span>{$lang->welcome_admin}</span>
</a>

etc, etc  * (note this is only an example and is meant as general idea of starting off and continuing on with.)

So if you completed those steps for this one in this reply then you can continue editing further for your usages if not yet well here it is  completed also as an example theme file: [attachment=43734]

Best of luck!  Big Grin  ~ V