ok i've been more actively learning about css / html etc.
so i came back to this thread now i understand more about what Wires was saying
going to post the final solution here
for the css
#logo {
background: url("https://i.imgur.com/cdGkI35.png");
background-repeat: no-repeat;
background-position: left;
padding: 10px 0;
border-bottom: 1px solid #263c30;
height: 142px;
}
.my_header{
margin-top: 90px;
}
and then edit the header template from
<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">{$lang->toplinks_help}</a></li>
</ul>
to
<div class="my_header"><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">{$lang->toplinks_help}</a></li>
</ul></div>
feel free to check it out on my site on how it looks
blackmarke7.com
NOT the link in my sig since i haven't update that one yet