#top-navigation-menu
{
    width: 100%;
    background-color: #ff0000;
    clear:both;
}


ul.profile_navigation_menu_class {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #be0d0d;
}

/* Float the list items side by side */
ul.profile_navigation_menu_class li {float: left;}

/* Style the links inside the list items */
ul.profile_navigation_menu_class li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.profile_navigation_menu_class li a:hover 
{
    background-color: #f3d980;
    color: #fd0a11;
}

/* Hide the list item that contains the link that should open and close the profile_navigation_menu_class on small screens */
ul.profile_navigation_menu_class li.icon {display: none;}



@media screen and (max-width:1366px) {
  ul.profile_navigation_menu_class li:not(:first-child) {display: none;}
  ul.profile_navigation_menu_class li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the profile_navigation_menu_class with JavaScript when the user clicks on the icon. This class makes the profile_navigation_menu_class look good on small screens */
@media screen and (max-width:1366px) {
  ul.profile_navigation_menu_class.responsive {position: relative;}
  ul.profile_navigation_menu_class.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.profile_navigation_menu_class.responsive li {
    float: none;
    display: inline;
  }
  ul.profile_navigation_menu_class.responsive li a {
    display: block;
    text-align: left;
  }
}