Having a few issues with IE8.
This is what the navigation looks like on all the browsers so far:
http://puu.sh/5Jdw8.png

<nav id="site-navigation" class="main-navigation" role="navigation">
  <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
  <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
  <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}

.main-navigation li {
    /* margin-top: 24px;
    margin-top: 1.714285714rem; */
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}
.main-navigation a {
    color: #5e5e5e;
}
.main-navigation a:hover {
    color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
    display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
    display: block;
}

I have tried:

<!--[if lt IE 9]>
  <script>
    document.createElement('nav');
  </script>
<![endif]-->

The URL for reference is : http://www.profiledt.co.uk/SetTraining

I'm not sure but the first thing that comes to my mind is that IE8 is not ready to interpret HTML5 tags like <nav>. Maybe you could find out more about that?

Nope I did not know about that, thank you for the info :). Another solution for this problem hasn't crossed my mind yet, though, unfortunately. Pretty weird that it isn't working as you seem to be doing exactly what the link you just provided describes :o. Have you checked if the script really is included and executed? E.g. maybe you could issue an alert('Wow, this really is IE < 9'); after the createElement() function?