Embedding - please help

Hello, I am new to this and have tried to edit both the Carbon and Matrix themes to add a navigataion bar like this to my page

I have read the instructions already but am just getting use to CSS and begining to undstand how these templates fit together.

The problem is once I add it everything moves. Also then when I try and login to the gallery this page is affected as well and it's all over the place.

So I reverted to going for a simple menu on the right hand side using this example code

<div id="gsNavBar">
<div class="gbSystemLinks">
<ul>
<li><a href="http://www.example.com">My Other Site</a></li>
<li><a href="http://www.example.com">My Other Site</a></li>
<li><a href="http://www.3in1modelmanagement.com">Home</a></li></ul>
{if !empty($theme.params.extraLink) && !empty($theme.params.extraLinkUrl)}

<a href="{$theme.params.extraLinkUrl}">{$theme.params.extraLink}</a></span>
&laquo;
{/if}
{g->block type="core.SystemLinks"
order="core.SiteAdmin core.YourAccount core.Login core.Logout"
separator="&laquo;"
othersAt=4}
{if $theme.pageType != 'admin'}
<a href="{g->url params=$theme.pageUrl arg1="jsWarning=true"}"
onclick="toggleSidebar('sidebar'); return false;">{g->text text="Sidebar"}</a> </div></div>

BUt this then pushes the page gallery down further than the menu.

Any recommendations for further reading or guidance in what is the easiest way to achieve this would be great

Thanks
A