MyBB Community Forums

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
(2018-07-22, 04:53 PM)WallBB Wrote: [ -> ]
(2018-07-17, 03:38 PM)Mjniu Wrote: [ -> ]Hello, thanks for the tutorial.
How can I remove the menu that is marked and put it where you leave?
The web is in localhost
Thank you very much.

MyBB 1.8.17 --> default

https://i.imgur.com/bXjSCY8.png

This will require changing the header template and header_welcomeblock_admin template.
Try to change the code yourself, it will be great learning experience Smile

Sorry I had not seen your answer,thanks for answering.
They have already solved me.
(2018-08-16, 08:59 PM)Mjniu Wrote: [ -> ]
(2018-07-22, 04:53 PM)WallBB Wrote: [ -> ]
(2018-07-17, 03:38 PM)Mjniu Wrote: [ -> ]Hello, thanks for the tutorial.
How can I remove the menu that is marked and put it where you leave?
The web is in localhost
Thank you very much.

MyBB 1.8.17 --> default

https://i.imgur.com/bXjSCY8.png

This will require changing the header template and header_welcomeblock_admin template.
Try to change the code yourself, it will be great learning experience Smile

Sorry I had not seen your answer,thanks for answering.
They have already solved me.

Cheers Smile
Hey, WallBB!

First of all, thanks for that tutorial. It's great. Smile I use it on a friends RPG board, but we both are pretty new to all that coding-stuff. That's why I need some help, please.

I wonder if there is any way to get rid of that empty space on the left hand side..?
I'm talking about this one (the red rectangle):
[Image: dropdownv5isr.png]

Or - if that is not possible - is there any way to align the buttons to the center of the page? I tried a lot, but haven't found a solution yet.

(Sorry for the bad english - not a native speaker. )
You can change this by editing this line


@media only screen and (min-width: 769px) {
nav ul {
    margin-left: 8%;
}


This is on line 141 or something in that demo

the margin-left is the bit to adjust to what you want
(2018-09-24, 03:55 PM)Schnitzel Wrote: [ -> ]Hey, WallBB!

First of all, thanks for that tutorial. It's great. Smile I use it on a friends RPG board, but we both are pretty new to all that coding-stuff. That's why I need some help, please.

I wonder if there is any way to get rid of that empty space on the left hand side..?
I'm talking about this one (the red rectangle):
[Image: dropdownv5isr.png]

Or - if that is not possible - is there any way to align the buttons to the center of the page? I tried a lot, but haven't found a solution yet.

(Sorry for the bad english - not a native speaker. )

Check the response by @fishntassie above Smile
Thank you very much for the quick answer! Smile
Hello!

I'm using the Dark1.8 theme with the latest MyBB version with the latest version of fontawesome.

After following your tutorial,i am able to see the navigation menu but like this:

[attachment=40909]

Because i added it like this in my header template:

<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']}"height="100" width="505" 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>
				
				 <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>
<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="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 id="content">
			<div class="wrapper">
				{$pm_notice}{$pms_fulls}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
				<navigation>
				<br />

If i add it to the top,it will look like this but on the top of my forum logo and i don't like it:


[attachment=40910]

So,how can i solve this issue?

Please help me.
(2018-09-30, 09:48 AM)kbilly Wrote: [ -> ]Hello!

I'm using the Dark1.8 theme with the latest MyBB version with the latest version of fontawesome.

After following your tutorial,i am able to see the navigation menu but like this:



Because i added it like this in my header template:

<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']}"height="100" width="505" 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>
				
				 <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>
<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="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 id="content">
			<div class="wrapper">
				{$pm_notice}{$pms_fulls}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
				<navigation>
				<br />

If i add it to the top,it will look like this but on the top of my forum logo and i don't like it:




So,how can i solve this issue?

Please help me.
That's quite simple actually, you need to make modifications in the css not HTML.
You can put the HTML in any template, it won't matter. Only thing is you need to modify(align) CSS based on the position.
(2018-09-30, 09:48 AM)kbilly Wrote: [ -> ]Hello!

I'm using the Dark1.8 theme with the latest MyBB version with the latest version of fontawesome.

After following your tutorial,i am able to see the navigation menu but like this:



Because i added it like this in my header template:

<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']}"height="100" width="505" 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>
				
				 <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>
<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="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 id="content">
			<div class="wrapper">
				{$pm_notice}{$pms_fulls}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
				<navigation>
				<br />

If i add it to the top,it will look like this but on the top of my forum logo and i don't like it:




So,how can i solve this issue?

Please help me.

I assume you mean something like this?
yes,exactly
Pages: 1 2 3 4