Top Navigational Links

Ashley
Offline
Administrator
Posts: 17
Threads: 9
Joined: Jul 2019
Reputation: 0
Real name: Ashley
Gender: Male
Location: Cape Town, SA

Ashley
Offline
Administrator

Posts: 17
Threads: 9
Joined: Jul 2019
Reputation: 0
Real name: Ashley
Gender: Male
Location: Cape Town, SA
Since many people have difficulty in editing these, here is a tip on how to replace the stock MyBB menu links and replace them with ones which are easier to edit and customise.

1) Add to the bottom of global.css
Code:
.toplinks {
  color: #6c757d !important;
}

a.toplinks:hover, a.toplinks:focus {
  color: #494f54 !important;
}

.menu_links {
    display: -ms-flexbox !important;
    display: flex !important;
    margin-top: auto !important;
}

.logo_container {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
    padding-right: .5rem;
}

.mybb-margin-left-1rem {
    margin-left: 1rem;    
}

2) Replace the header template with:
Code:
<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <div id="logo">            
                <div class="wrapper">
                    <div class="logo_container">
                        <div>
                            <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}"></a>
                        </div>                
                        <div class="menu_links">
                            {$menu_portal}
                            {$menu_search}
                            {$menu_memberlist}
                            {$menu_calendar}
                            <div class="mybb-margin-left-1rem"><a class="toplinks" href="{$mybb->settings['bburl']}/misc.php?action=help">{$lang->toplinks_help}</a></div>            
                        </div>
                    </div>    
                </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>
        <div id="content">
            <div class="wrapper">
                {$pm_notice}
                {$remote_avatar_notice}
                {$bannedwarning}
                {$bbclosedwarning}
                {$modnotice}
                {$pending_joinrequests}
                {$awaitingusers}
                <navigation>
                <br />

3) Replace the header_menu_calendar template with:
Code:
<div class="mybb-margin-left-1rem"><a class="toplinks" href="{$mybb->settings['bburl']}/calendar.php">{$lang->toplinks_calendar}</a></div>

4) Replace the header_menu_memberlist template with:
Code:
<div class="mybb-margin-left-1rem"><a class="toplinks" href="{$mybb->settings['bburl']}/memberlist.php">{$lang->toplinks_memberlist}</a></div>

5) Replace the header_menu_portal template with:
Code:
<div class="mybb-margin-left-1rem"><a class="toplinks" href="{$mybb->settings['bburl']}/portal.php">{$lang->toplinks_portal}</a></div>

6) Replace the header_menu_search template with:
Code:
<div class="mybb-margin-left-1rem"><a class="toplinks" href="{$mybb->settings['bburl']}/search.php">{$lang->toplinks_search}</a></div>

If you want to add Font Awesome, then you need to link to it in the headerinclude template. Then, as an example: header_menu_portal template would be:

Code:
<div class="mybb-margin-left-1rem"><span class="fas fa-bell fa-fw toplinks" aria-hidden="true"></span> <a class="toplinks" href="{$mybb->settings['bburl']}/portal.php">{$lang->toplinks_portal}</a></div>

The Results:
[Image: Screenshot-from-2019-07-12-23-57-41.png]

[Image: Screenshot-from-2019-07-13-00-03-11.png]
Users browsing this thread: 1 Guest(s)