Mobile Menu hamburger drops to 2nd row when set at 1024 landscape width

Hey Guys,

I’ve looked at the forums and can’t find a solution for this. I have menu items for mobile set for 990, but as you know, that doesn’t work for landscape (1024) and so my desktop menus in 1024 mode end of breaking into a second row in the header and looks really bad…so, I used the custom CSS as outlined here:

@media only screen and (max-width:1024px) {
  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
  }

  .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
    display: block;
  }
}

This does display the menu in 1024 resolution, however, the hamburger menu breaks to the second like and the social media icons also disappear. Now, if I manually size the screen down to 986 width, it displays properly. See attached screenshots below one for 1024, and one for 986. What I need is for the menu display at 986 to show at 1024.

Hope this makes sense:
1024 width: http://www.innovativelight.com/wp-content/uploads/2018/04/width-1024.png
986 width: http://www.innovativelight.com/wp-content/uploads/2018/04/width-986.png

To summarize, I want the menu and social media the way it looks on the 986 width for the 1024 width…