Please check CSS code?

From my fork of your workspace I can see that only the menu scrolls with the page staying in its position which I think is what you want?

Actually, forget that. I was able to get both the logo and the menu to scroll by fixing the media query in your CSS file.

@media screen (max-width: 1024px) {


}

It needs the screen identifier and to be closed out even if it's an empty media query :-)

This seems to fix the problem for you, at my end at least. Float left on .name and position:relative and float:right one .menu.

.name {
  font-size: 1.75em;
  margin: 0;
  color: black;
  float: left; /*set float to left*/
}

.menu {
  font-size: 30px;
  cursor: pointer;
  position: relative; /* position to relative */
  top:0;
  right: 0px;
  margin-top: 5px;
  float: right; /*set float to right*/
}

To set the social icons under the span you could throw in a "</br>" tag, like so:

    <footer class="main-footer">
         <span>&copy;2016 T-Ravel</span> </br> <!-- break tag -->
         <a href="http://facebook.com/T-Ravel"><img class="social-icon" src="img/Facebook-01.svg" alt:"Facebook"></a>
         <a href="http://twitter.com/T-Ravel"><img class="social-icon" src="img/Twitter-01.svg" alt:"Twitter"></a>
         <a href="http://rss.com/T-Ravel"><img class="social-icon" src="img/RSS-01.svg" alt:"RSS"></a>s
    </footer>

or you could set your span to display:inherit. ;

span {
  display: inherit;
}

Hope this helped.

As for suggestions to make your page better, this might be a little subjective. But on larger screens it looks better with a a little space between the menu-button and logo and the end of the page. It makes the page look less crowded.

Well i am trying to stick the header to the top of the page. I don't want the menu or the logo to scroll down with the page. Is there a way to do that?

Thanks for all the help and detailed information Kent !!!