Orange Theme - Adding a responsive top right menu on Orange Theme

Orange Theme - Adding a responsive top right menu on Orange Theme - Printable Version

+- WallBB Forums (https://wallbb.co.uk/forums)
+-- Forum: Theme Section (https://wallbb.co.uk/forums/forumdisplay.php?fid=5)
+--- Forum: Theme Documentation (https://wallbb.co.uk/forums/forumdisplay.php?fid=9)
+--- Thread: Orange Theme - Adding a responsive top right menu on Orange Theme (/showthread.php?tid=295)

Adding a responsive top right menu on Orange Theme - WallBB - 07-01-2019

This tutorial will show you how to Adding a top right menu on Orange MyBB theme. Make sure to backup theme before following this tutorial

First of all, you need to align the Logo to the Left and after that we add secondary menu to the right.
To do that follow the steps below :-

Go To Admin CP > Templates And Styles > Orange Theme > global.css > Edit Advanced Mode
Find .logo in the global.css and replace .logo code with the below code

Code:
.logo { float: left; display: inline-block; font-size: 55px; font-weight: 600; text-shadow: 1px 1px 3px #111;}
Now we add the secondary menu on right.
Go To Admin CP > Templates And Styles > Template > Orange Templates > header
Replace the below code

Code:
<div class="logo"> <a href="{$mybb->settings['bburl']}/index.php"><span>{$mybb->settings['homename']}</span> <img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a> </div>
with

Code:
<div class="header_row"> <div class="header_lcolumn"> <div class="logo"> <a href="{$mybb->settings['bburl']}/index.php"><span>{$mybb->settings['homename']}</span> <img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a> </div></div> <div class="header_rcolumn"> <ul class="mob_top_menu"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul></div></div>
Add the below code at the bottom of global.css

Code:
ul.mob_top_menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 1000;}.mob_top_menu li { float: left;}.mob_top_menu li a { display: block; font-size: 11px; font-weight: bold; padding: 5px 8px; text-align: center; text-decoration: none;}@media screen and (min-width: 420px ) { .header_lcolumn { margin-right: 50%; } .header_rcolumn { position: absolute; top: 10%; right: 0; width: 40%; } }

Since the header section is hidden on mobile, the above code will perfectly work on mobile as it will be hidden and no formatting is required.

That's it!

Hope this tutorial helps you to add a responsive top right menu on Orange Theme MyBB theme.

Created on request of maritimesbob

Regards
WallBB