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

[WallBB]

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

1. 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;}
2. Now we add the secondary menu on right.
   Go To Admin CP > Templates And Styles > Template > Orange Templates > header
   
3. 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>
4. 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>
5. 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