Menu changes

#top_menu {display:none; background: #88A6C0 url(images/mini_logo.png) no-repeat 2em center; height:40px; border-bottom: 2px solid #33587A;
color:#f5f5f5; padding:5px 0 0 13px; top:0; left: 0; position:fixed; z-index:9999; width:100%; box-shadow:0 3px 5px rgba(0,0,0,0.2)}
#top_menu div {display: inline-block; float: right; margin-right: 2em;}
#top_menu div table td img {width: 30px; height: 30px;}
#top_menu div table td {color: white;}
#top_menu div table td a {color: white;}
#top_menu div table td a:hover {text-decoration: none; text-shadow: 0 0 10px white;}
#top_menu .tdimg {width: 32px; text-align: center;}
@media screen and (min-width: 800px) {.fixed_menu {display:block!important}}

<div id="top_menu">
<a href="', $scripturl, '" style="width: 200px; left: 0; top: 0; padding-right: 300px; padding-bottom: 30px; margin-left: 1em;"></a>
<div>
<table width="100%" cellpadding="2" cellspacing="0">
<tr>
<td class="tdimg">
<img src="', $settings['images_url'], '/edit_w.png" alt=""/>
</td>
<td class="largetext" style="padding-right: 0.5ex;">
<a href="', $scripturl, '?blog=1.0">
Blog
</a>
</td>
<td class="tdimg">
<img src="', $settings['images_url'], '/img_w.png" alt=""/>
</td>
<td class="largetext" style="padding-right: 0.5ex;">
<a href="', $scripturl, '?action=gallery">
Gallery
</a>
</td>
<td class="tdimg">
<img src="', $settings['images_url'], '/dict_w.png" alt=""/>
</td>
<td class="largetext" style="padding-right: 0.5ex;">
<a href="'.$boardurl.'/definitions">
Dictionary
</a>
</td>
</tr>
</table>

</div></div>';

$(window).scroll(function () {
var $this = $(this),
 $head = $("#top_menu");
if ($this.scrollTop() > 300) {
$head.addClass("fixed_menu");
} else {
$head.removeClass("fixed_menu");
}
});