MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > [Tutorial]Simple Responsive Dropdown Navigation Menu for MyBB
Full Version: [Tutorial]Simple Responsive Dropdown Navigation Menu for MyBB
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4

User 6029

2018-09-30, 07:01 PM
(2018-09-30, 06:19 PM)kbilly Wrote: [ -> ]yes,exactly

This was quickly done on my mobile phone localhost using the default theme, you may need to further tweak it for your specific theme usage.

Replace header with:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div id="logo">
                {$quicksearch}
                <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"><i class="fa fa-question-circle toplinks-help"></i> {$lang->toplinks_help}</a></li>
                    </ul>
                </div>
            </div>
         </div>
<div id="navcontainer">
       <nav>
       <label for="drop" class="toggle"><i class="fa fa-bars" aria-hidden="true"></i> Menu</label>
       <input type="checkbox" id="drop" />
           <ul class="menu">
<li><a href="{$mybb->settings['bburl']}/index.php" class="Home"><span><i class="fa fa-home" aria-hidden="true"></i> Home</span></a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="Members"><span><i class="fa fa-user" aria-hidden="true"></i> Memberlist</span></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="Search"><span><i class="fa fa-search" aria-hidden="true"></i> Search</span></a></li>
               <li><a href="{$mybb->settings['bburl']}/advertise.php"><span><i class="fa fa-globe" aria-hidden="true"></i> Advertise</span></a></li>
               <li>
                   <!-- First Tier Drop Down -->
                   <label for="drop-1" class="toggle">Dropdown <i class="fa fa-sort-desc" aria-hidden="true"></i></label>
                   <a href="#">Dropdown</a>
                   <input type="checkbox" id="drop-1"/>
                   <ul>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                   </ul>
               </li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><span><i class="fa fa-question"></i> {$lang->toplinks_help}</span></a></li>
  </ul>
</nav>
</div>
<div id="container">
<div id="header">
            <div id="panel">
                <div class="upper">
                    <div class="wrapper">
                        <span style="float: right;" class="wbtime">{$lang->welcome_current_time}</span>
                        {$welcomeblock}
                    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
                <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
            </div>
         </div>
        </div><br />
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$remote_avatar_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                {$awaitingusers}
                <navigation>
                <br />


Note: this can be removed if your theme is already using font-awesome:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


Replace header_menu_calendar with:

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

Replace header_menu_memberlist with:

<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist"><i class="fa fa-users toplinks-memberlist"></i> {$lang->toplinks_memberlist}</a></li>

Replace header_menu_portal with:

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

Replace header_menu_search with:

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

Replace header_quicksearch with:

                    <form action="{$mybb->settings['bburl']}/search.php" method="post">
			<fieldset id="search">
                            <input name="keywords" type="text" class="textbox" placeholder="Search..." />
                            <i class="fa fa-search search_icon"></i><input value="" type="submit" class="search_icon" />
							<input type="hidden" name="action" value="do_search" />
							<input type="hidden" name="postthread" value="1" />
						</fieldset>
						</form>

Replace header_welcomeblock_guest 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"><i class="fa fa-sign-in panel-login"></i> {$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fa fa-user-plus panel-register"></i> {$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>

Replace header_welcomeblock_member 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"><i class="fa fa-sign-out panel-logout"></i> {$lang->welcome_logout}</a></span>
	</div>
</div>
<div class="lower">
	<div class="wrapper">
		<ul class="menu panel_links">
			<li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><i class="fa fa-user panel-usercp"></i> {$lang->welcome_usercp}</a></li>
			{$modcplink}
			{$admincplink}
		</ul>
		<ul class="menu user_links">
			<li><a href="javascript:void(0)" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}</a></li>
			{$searchlink}
			{$pmslink}
		</ul>
	</div>
	<br class="clear" />
</div>

Replace header_welcomeblock_member_admin with:

<li><a href="{$mybb->settings['bburl']}/{$admin_dir}/index.php" class="admincp"><i class="fa fa-cog panel-admincp"></i> {$lang->welcome_admin}</a></li>

Replace header_welcomeblock_member_moderator with:

<li><a href="{$mybb->settings['bburl']}/modcp.php" class="modcp"><i class="fa fa-file-text panel-modcp"></i> {$lang->welcome_modcp}</a></li>


In global.css find:


#header ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header ul.menu li {
	margin: 0 7px;
	display: inline;
}

#header ul.menu li a {
	padding-left: 20px;
	background-image: url(images/headerlinks_sprite.png);
	background-repeat: no-repeat;
	display: inline-block;
	line-height: 16px;
}

#logo ul.top_links {
	font-weight: bold;
	text-align: right;
	margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
	background-position: 0 0;
}

#logo ul.top_links a.memberlist {
	background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
	background-position: 0 -40px;
}

#logo ul.top_links a.help {
	background-position: 0 -60px;
}

#logo ul.top_links a.portal {
	background-position: 0 -180px;
}

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
	background: url(images/headerlinks_sprite.png) 0 -100px no-repeat;
	padding-left: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .upper a.register {
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .lower ul.panel_links {
	float: left;
}

#panel .lower ul.panel_links a.usercp {
	background-position: 0 -120px;
}

#panel .lower ul.panel_links a.modcp {
	background-position: 0 -140px;
}

#panel .lower ul.panel_links a.admincp {
	background-position: 0 -160px;
}

#panel .lower ul.user_links {
	float: right;
}

#panel .lower ul.user_links li a {
	padding: 0;
	background-image: none;
}

#panel .upper {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 7px;
	clear: both;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
	color: #fff;
}

#panel .lower {
	background: #efefef;
	color: #999;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	padding: 5px;
}

#panel .lower a:link,
#panel .lower a:visited,
#panel .lower a:hover,
#panel .lower a:active {
	color: #666;
}

#search {
	border: 0;
	padding: 0;
	margin: 0;
	float: right;
	vertical-align: middle;
}

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

#search input.button {
	background: #0066a2 url(images/thead.png) top left repeat-x;
	color: #fff;
}

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


Replace with:

#navcontainer {
	color: #fff;
	margin: 0;
}
#navcontainer a:link {
	color: #ffffff;
	text-decoration: none;
}
#navcontainer a:visited {
	color: #ffffff;
	text-decoration: none;
}
#navcontainer a:hover {
	color: #0072BC;
        text-decoration: none;
}
#navcontainer a:active {
	color: #ffffff;
        text-decoration: none;
}
.toggle, [id^="drop"] {
   display: none;
}
nav {
   background: #212121;
   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 #333333;
   display: inline-block;
   float: left;
   margin: 0;
}
nav a {
   background: #222222;
   color: #fff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
nav ul li ul li:hover {
   background: #444444 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 {
   left: 170px;
   position: relative;
   top: -60px;
}
nav ul li > a::after {
   content: " ";
   display: inline;
   font-family: fontawesome;
}
nav ul li > a:only-child::after {
   content: "";
}
@media all and (max-width: 768px) {
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: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
.toggle:hover {
   background-color: #000000;
}
[id^="drop"]:checked + ul {
   display: block;
}
nav ul li {
   display: block;
   width: 100%;
}
nav ul ul .toggle, nav ul ul a {
   padding: 0 40px;
}
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;
}
nav ul li ul li .toggle, 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 all and (max-width: 668px) {
#panel .lower {
   display: none;
}
#logo ul.top_links {
   display: none;
}
.wbtime {
   display: none;
}
}
@media only screen and (min-width: 769px) {
nav ul {
   margin-left: 8%;
}
nav ul ul {
   margin-left: 0;
}
}
#header ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
#header ul.menu li {
	display: inline;
	margin: 0 5px;
}
#header ul.menu li a {
	background-repeat: no-repeat;
	display: inline-block;
}
#logo ul.top_links {
	font-weight: bold;
	text-align: right;
	margin: -10px 5px 0 0;
}
#panel .upper a.logout {
	font-weight: bold;
	padding-right: 10px;
	margin-left: 5px;
}
#panel .upper a.login, #panel .upper a.lost_password {
	padding-left: 10px;
	margin-left: 5px;
	font-weight: bold;
}
#panel .upper a.register {
	padding-right: 10px;
	margin-left: 5px;
	font-weight: bold;
}
#panel .upper a.login i:before {
        color: #0072BC
}
#panel .upper a.register i:before {
        color: #0072BC
}
#panel .upper a.logout i:before {
        color: #0072BC
}
#panel .lower ul.panel_links {
	float: left;
}
#panel .lower ul.panel_links a.usercp  i:before {
        color: #0072BC
}
#panel .lower ul.panel_links a.modcp  i:before {
        color: #0072BC
}
#panel .lower ul.panel_links a.admincp i:before {
        color: #0072BC;
}
#panel .lower ul.user_links {
	float: right;
}
#panel .lower ul.user_links li a {
	padding: 0;
	background-image: none;
}
#panel .upper {
	background: #333333;
	color: #FFF;
	border-top: 2px solid #0072BC;
	padding: 7px;
	clear: both;
}
#panel .upper a:link, #panel .upper a:visited, #panel .upper a:hover, #panel .upper a:active {
	color: #FFF;
}
#panel .lower {
	background: #333333;
	color: #FFF;
	border-bottom: 1px solid #212121;
	padding: 5px;
}
#panel .lower a:link, #panel .lower a:visited, #panel .lower a:hover, #panel .lower a:active {
	color: #FFF;
}
.search_icon {
	background: none;
	cursor: pointer;
	margin-left: -104px;
	padding: 0;
	border: 0;
	display: inline-block;
	color: #747474;
}
#search {
	border: 0;
	padding: 0;
	margin: 0;
	float: right;
	display: block;
	margin-bottom: 8px
}
#search input.textbox {
	background: #efefef;
	color: #a0a0a0;
	border: 1px solid #dddddd;
        margin-right: 80px;
}
#search input.button {
	background: #0072BC;
        color: #FFF;
}
#search input {
	margin: -3px 0;
}
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 browsrr 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.

After that some of these may be of interest:

Scalable FontAwesome postbit buttons

Basic calendar responsiveness

Etc, etc. Best of luck!

kbilly

2018-10-01, 08:25 PM
Hi!

I followed your tutorial and i am very close to the results i need.

For the moment,i am getting one problem with dropdown icon.

[attachment=40918]

I'm using the latest version of fontawesome in my header include template.


link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


So,i also tried changing the "fa" to "fas" but the result doesn't change.


<i class="fas fa-sort-down"></i>



In the global.css i added also the unidoce Glyph from that icon but no success.

Can you perhaps have a look?

Thankyou for your time.

User 6029

2018-10-01, 11:43 PM
(2018-10-01, 08:25 PM)kbilly Wrote: [ -> ]Hi!

I followed your tutorial and i am very close to the results i need.

For the moment,i am getting one problem with dropdown icon.



I'm using the latest version of fontawesome in my header include template.


link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


So,i also tried changing the "fa" to "fas" but the result doesn't change.


<i class="fas fa-sort-down"></i>



In the global.css i added also the unidoce Glyph from that icon but no success.

Can you perhaps have a look?

Thankyou for your time.

Have not had the time to look at this and a few icons would need to be changed and all changed from fa to fas...., when I get the free time I will post fa5 version of previous instructions.

Ok on to your specific problem..., have you tried this:

Find:

nav ul li > a::after {
  content: " ";
  display: inline;
  font-family: fontawesome;
}


Change to this:

nav ul li > a::after {
   content: " ";
   display: inline;
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
}



Let me know if that sorts out your issue.

The attached screen show it fully working on fa5 with a handful ofminor modifications
Here is the same instructions previously shared but slightly modified to use Font Awesome 5

This was quickly done on my mobile phone localhost using the default theme, you may need to further tweak it for your specific theme usage.

Replace header with:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div id="logo">
                {$quicksearch}
                <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"><i class="fa fa-question-circle toplinks-help"></i> {$lang->toplinks_help}</a></li>
                    </ul>
                </div>
            </div>
         </div>
<div id="navcontainer">
       <nav>
       <label for="drop" class="toggle"><i class="fas fa-bars" aria-hidden="true"></i> Menu</label>
       <input type="checkbox" id="drop" />
           <ul class="menu">
<li><a href="{$mybb->settings['bburl']}/index.php" class="Home"><span><i class="fas fa-home home" aria-hidden="true"></i> Home</span></a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="Members"><span><i class="fas fa-user members" aria-hidden="true"></i> Memberlist</span></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="Search"><span><i class="fas fa-search search" aria-hidden="true"></i> Search</span></a></li>
               <li><a href="{$mybb->settings['bburl']}/advertise.php"><span><i class="fas fa-globe advertise" aria-hidden="true"></i> Advertise</span></a></li>
               <li>
                   <!-- First Tier Drop Down -->
                   <label for="drop-1" class="toggle">Dropdown <i class="fas fa-sort-down" > </i> </label>
                   <a href="#">Dropdown </a>
                   <input type="checkbox" id="drop-1"/>
                   <ul>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                   </ul>
               </li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><span><i class="fa fa-question"></i>  {$lang->toplinks_help}</span></a></li>
  </ul>
</nav>
</div>
<div id="container">
<div id="header">
            <div id="panel">
                <div class="upper">
                    <div class="wrapper">
                        <span style="float: right;" class="wbtime">{$lang->welcome_current_time}</span>
                        {$welcomeblock}
                    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
                <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
            </div>
         </div>
        </div><br />
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$remote_avatar_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                {$awaitingusers}
                <navigation>
                <br />


Note: this can be removed if your theme is already using font-awesome:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">


Replace header_menu_calendar with:

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

Replace header_menu_memberlist with:

<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist"><i class="fas fa-users toplinks-memberlist"></i> {$lang->toplinks_memberlist}</a></li>

Replace header_menu_portal with:

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

Replace header_menu_search with:

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

Replace header_quicksearch with:

                    <form action="{$mybb->settings['bburl']}/search.php" method="post">
			<fieldset id="search">
                            <input name="keywords" type="text" class="textbox" placeholder="Search..." />
                            <i class="fas fa-search search_icon"></i><input value="" type="submit" class="search_icon" />
							<input type="hidden" name="action" value="do_search" />
							<input type="hidden" name="postthread" value="1" />
						</fieldset>
						</form>

Replace header_welcomeblock_guest 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"><i class="fas fa-sign-in-alt panel-login"></i> {$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fas fa-user-plus panel-register"></i> {$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>

Replace header_welcomeblock_member 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"><i class="fas fa-sign-out-alt panel-logout"></i> {$lang->welcome_logout}</a></span>
	</div>
</div>
<div class="lower">
	<div class="wrapper">
		<ul class="menu panel_links">
			<li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><i class="fas fa-user panel-usercp"></i> {$lang->welcome_usercp}</a></li>
			{$modcplink}
			{$admincplink}
		</ul>
		<ul class="menu user_links">
			<li><a href="javascript:void(0)" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}</a></li>
			{$searchlink}
			{$pmslink}
		</ul>
	</div>
	<br class="clear" />
</div>

Replace header_welcomeblock_member_admin with:

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

Replace header_welcomeblock_member_moderator with:

<li><a href="{$mybb->settings['bburl']}/modcp.php" class="modcp"><i class="fas fa-file-alt panel-modcp"></i> {$lang->welcome_modcp}</a></li>


In global.css find:


#header ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header ul.menu li {
	margin: 0 7px;
	display: inline;
}

#header ul.menu li a {
	padding-left: 20px;
	background-image: url(images/headerlinks_sprite.png);
	background-repeat: no-repeat;
	display: inline-block;
	line-height: 16px;
}

#logo ul.top_links {
	font-weight: bold;
	text-align: right;
	margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
	background-position: 0 0;
}

#logo ul.top_links a.memberlist {
	background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
	background-position: 0 -40px;
}

#logo ul.top_links a.help {
	background-position: 0 -60px;
}

#logo ul.top_links a.portal {
	background-position: 0 -180px;
}

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
	background: url(images/headerlinks_sprite.png) 0 -100px no-repeat;
	padding-left: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .upper a.register {
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .lower ul.panel_links {
	float: left;
}

#panel .lower ul.panel_links a.usercp {
	background-position: 0 -120px;
}

#panel .lower ul.panel_links a.modcp {
	background-position: 0 -140px;
}

#panel .lower ul.panel_links a.admincp {
	background-position: 0 -160px;
}

#panel .lower ul.user_links {
	float: right;
}

#panel .lower ul.user_links li a {
	padding: 0;
	background-image: none;
}

#panel .upper {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #444;
	border-bottom: 1px solid #000;
	padding: 7px;
	clear: both;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
	color: #fff;
}

#panel .lower {
	background: #efefef;
	color: #999;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
	padding: 5px;
}

#panel .lower a:link,
#panel .lower a:visited,
#panel .lower a:hover,
#panel .lower a:active {
	color: #666;
}

#search {
	border: 0;
	padding: 0;
	margin: 0;
	float: right;
	vertical-align: middle;
}

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

#search input.button {
	background: #0066a2 url(images/thead.png) top left repeat-x;
	color: #fff;
}

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


Replace with:

#navcontainer {
	color: #fff;
	margin: 0;
}
#navcontainer a:link {
	color: #ffffff;
	text-decoration: none;
}
#navcontainer a:visited {
	color: #ffffff;
	text-decoration: none;
}
#navcontainer a:hover {
	color: #0072BC;
        text-decoration: none;
}
#navcontainer a:active {
	color: #ffffff;
        text-decoration: none;
}
.toggle, [id^="drop"] {
   display: none; 
}
nav {
   background: #212121;
   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 #333333;
   display: inline-block;
   float: left;
   margin: 0;
}
nav a {
   background: #222222;
   color: #fff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
nav ul li ul li:hover {
   background: #444444 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 {
   left: 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: 668px) {
#panel .lower {
   display: none;
}
#logo ul.top_links {
   display: none;
}
.wbtime {
   display: none;
}
}
@media all and (max-width: 768px) {
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: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
.toggle:hover {
   background-color: #000000;
}
[id^="drop"]:checked + ul {
   display: block;
}
nav ul li {
   display: block;
   width: 100%;
}
nav ul ul .toggle, nav ul ul a {
   padding: 0 40px;
}
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;
}
nav ul li ul li .toggle, 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;
}
}
#header ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
#header ul.menu li {
	display: inline;
	margin: 0 5px;
}
#header ul.menu li a {
	background-repeat: no-repeat;
	display: inline-block;
}
#logo ul.top_links {
	font-weight: bold;
	text-align: right;
	margin: -10px 5px 0 0;
}
#panel .upper a.logout {
	font-weight: bold;
	padding-right: 10px;
	margin-left: 5px;
}
#panel .upper a.login, #panel .upper a.lost_password {
	padding-left: 10px;
	margin-left: 5px;
	font-weight: bold;
}
#panel .upper a.register {
	padding-right: 10px;
	margin-left: 5px;
	font-weight: bold;
}
#panel .upper a.login i:before {
        color: #0072BC
}
#panel .upper a.register i:before {
        color: #0072BC
}
#panel .upper a.logout i:before {
        color: #0072BC
}
#panel .lower ul.panel_links {
	float: left;
}
#panel .lower ul.panel_links a.usercp  i:before {
        color: #0072BC
}
#panel .lower ul.panel_links a.modcp  i:before {
        color: #0072BC
}
#panel .lower ul.panel_links a.admincp i:before {
        color: #0072BC;
}
#panel .lower ul.user_links {
	float: right;
}
#panel .lower ul.user_links li a {
	padding: 0;
	background-image: none;
}
#panel .upper {
	background: #333333;
	color: #FFF;
	border-top: 2px solid #0072BC;
	padding: 7px;
	clear: both;
}
#panel .upper a:link, #panel .upper a:visited, #panel .upper a:hover, #panel .upper a:active {
	color: #FFF;
}
#panel .lower {
	background: #333333;
	color: #FFF;
	border-bottom: 1px solid #212121;
	padding: 5px;
}
#panel .lower a:link, #panel .lower a:visited, #panel .lower a:hover, #panel .lower a:active {
	color: #FFF;
}
.search_icon {
	background: none;
	cursor: pointer;
	margin-left: -104px;
	padding: 0;
	border: 0;
	display: inline-block;
	color: #747474;
}
#search {
	border: 0;
	padding: 0;
	margin: 0;
	float: right;
	display: block;
	margin-bottom: 8px
}
#search input.textbox {
	background: #efefef;
	color: #a0a0a0;
	border: 1px solid #dddddd;
        margin-right: 80px;
}
#search input.button {
	background: #0072BC;
        color: #FFF;
}
#search input {
	margin: -3px 0;
}
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 browsrr 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.

After that some of these may be of interest:

Scalable FontAwesome postbit buttons

Basic calendar responsiveness

Etc, etc. Best of luck!

kbilly

2018-10-02, 03:02 PM
Hello and many thanks for your time and dedication.

I got it working.

Regards.

User 6029

2018-10-02, 05:08 PM
(2018-10-02, 03:02 PM)kbilly Wrote: [ -> ]Hello and many thanks for your time and dedication.

I got it working.

Regards.
Cool beans and no worries. Glad you got it all sorted out. Smile

kbilly

2018-10-03, 04:25 PM
Hello!

How is it possiible to make the following?

[attachment=40942]

I tried moving the guest welcome block in header but it will also change the welcome member block then as the welcome member block,after loggin in,i would like to have as it is.

[attachment=40943]

Thankyou.

User 6029

2018-10-03, 05:27 PM
(2018-10-03, 04:25 PM)kbilly Wrote: [ -> ]Hello!

How is it possiible to make the following?



I tried moving the guest welcome block in header but it will also change the welcome member block then as the welcome member block,after loggin in,i would like to have as it is.



Thankyou.

I assume you mean like?

kbilly

2018-10-03, 06:36 PM
Yes,exactly!

Thanks

User 6029

2018-10-03, 07:02 PM
(2018-10-03, 06:36 PM)kbilly Wrote: [ -> ]Yes,exactly!

Thanks

Ok, well, I did not havd much time to look at this as I was sitting on the side of the road on my bicycle in the rain on a mobile phone not trying to get my phone too wet, but this approach should work. There might be other ways to do it like for example creating a template just for the menu like "responav" and then calling it in the 2 files like {$responav} so that you only include 1 menu but I do not currently have the time to look at it much further today.


* the plus side of doing it the way shown below is that now you can have a guest menu and a member menu!
Replace header with:


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div id="logo">
                {$quicksearch}
                <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"><i class="fa fa-question-circle toplinks-help"></i> {$lang->toplinks_help}</a></li>
                    </ul>
                </div>
            </div>
                 </div>
                        {$welcomeblock}
                    <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
                <!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
            </div>
         </div>
        </div><br />
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$remote_avatar_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$unreadreports}
                {$pending_joinrequests}
                {$awaitingusers}
                <navigation>
                <br />



Replace header_welcomeblock_guest with:


         <div id="panel">
                <div class="upper">
                    <div class="wrapper">
                        <span style="float: right;" class="wbtime">{$lang->welcome_current_time}</span>
                <!-- 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"><i class="fas fa-sign-in-alt panel-login"></i> {$lang->welcome_login}</a> <a href="{$mybb->settings['bburl']}/member.php?action=register" class="register"><i class="fas fa-user-plus panel-register"></i> {$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 id="navcontainer">
       <nav>
       <label for="drop" class="toggle"><i class="fas fa-bars" aria-hidden="true"></i> Menu</label>
       <input type="checkbox" id="drop" />
           <ul class="menu">
<li><a href="{$mybb->settings['bburl']}/index.php" class="Home"><span><i class="fas fa-home home" aria-hidden="true"></i> Home</span></a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="Members"><span><i class="fas fa-user members" aria-hidden="true"></i> Memberlist</span></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="Search"><span><i class="fas fa-search search" aria-hidden="true"></i> Search</span></a></li>
               <li><a href="{$mybb->settings['bburl']}/advertise.php"><span><i class="fas fa-globe advertise" aria-hidden="true"></i> Advertise</span></a></li>
               <li>
                   <!-- First Tier Drop Down -->
                   <label for="drop-1" class="toggle">Dropdown <i class="fas fa-sort-down" > </i> </label>
                   <a href="#">Dropdown </a>
                   <input type="checkbox" id="drop-1"/>
                   <ul>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                   </ul>
               </li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><span><i class="fa fa-question"></i>  {$lang->toplinks_help}</span></a></li>
  </ul>
</nav>
</div>
<div id="container">
   <div id="header">


Replacd header_welcomeblock_member with:

<div id="navcontainer">
       <nav>
       <label for="drop" class="toggle"><i class="fas fa-bars" aria-hidden="true"></i> Menu</label>
       <input type="checkbox" id="drop" />
           <ul class="menu">
<li><a href="{$mybb->settings['bburl']}/index.php" class="Home"><span><i class="fas fa-home home" aria-hidden="true"></i> Home</span></a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="Members"><span><i class="fas fa-user members" aria-hidden="true"></i> Memberlist</span></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="Search"><span><i class="fas fa-search search" aria-hidden="true"></i> Search</span></a></li>
               <li><a href="{$mybb->settings['bburl']}/advertise.php"><span><i class="fas fa-globe advertise" aria-hidden="true"></i> Advertise</span></a></li>
               <li>
                   <!-- First Tier Drop Down -->
                   <label for="drop-1" class="toggle">Dropdown <i class="fas fa-sort-down" > </i> </label>
                   <a href="#">Dropdown </a>
                   <input type="checkbox" id="drop-1"/>
                   <ul>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                   </ul>
               </li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><span><i class="fa fa-question"></i>  {$lang->toplinks_help}</span></a></li>
  </ul>
</nav>
</div>
    <div id="container">
         <div id="header">
            <div id="panel">
                <div class="upper">
                    <div class="wrapper">
                        <span style="float: right;" class="wbtime">{$lang->welcome_current_time}</span>
<!-- 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"><i class="fas fa-sign-out-alt panel-logout"></i> {$lang->welcome_logout}</a></span>
    </div>
</div>
<div class="lower">
    <div class="wrapper">
        <ul class="menu panel_links">
            <li><a href="{$mybb->settings['bburl']}/usercp.php" class="usercp"><i class="fas fa-user panel-usercp"></i> {$lang->welcome_usercp}</a></li>
            {$modcplink}
            {$admincplink}
        </ul>
        <ul class="menu user_links">
            <li><a href="javascript:void(0)" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;">{$lang->welcome_open_buddy_list}</a></li>
            {$searchlink}
            {$pmslink}
        </ul>
    </div>
    <br class="clear" />
</div>

Now, you may need to tweak it slightly for your usages, I dunno, as I did this rather fast in a rush due to standing in the rain on my mobile phone, lol.

kbilly

2018-10-04, 04:47 PM
Thanks a lot.

Regards.
Pages: 1 2 3 4
MyBB Community Forums > Resources > Tutorials > [Tutorial]Simple Responsive Dropdown Navigation Menu for MyBB