Need a gradient Nav Bar and A solid Logo Area

Yes of course; however, you may need to create the gradient via css.
Header layout would be logo center – menu below
as you can see here on a demo-page: https://kriesi.at/themes/enfold-medical/

But for your logo I would suggest to divide it into a brand and sub-text – like it is here in the forum.
Then you have the possibility with smaller screen widths (mobile devices etc.) to react to the smaller space. E.g. by placing the slogans below the logo or hiding them like here in the forum.

If you got this layout – the nav background is in a header_main_alternate container – so try:

#top #header_main_alternate {
  background: #ca5fb4;
  background: -webkit-linear-gradient(left,  #fc6267 0%,#ca5fb4 50%,#995dfa 100%);
  background: linear-gradient(to right,  #fc6267 0%,#ca5fb4 50%,#995dfa 100%); 
}

but then you need the font to be white ?
and with such a big first-level menu – i would break the hamburger at 990px

@media only screen and (min-width: 990px) {
  #top #header .av-main-nav > li > a .avia-menu-text,
  #top #header .av-main-nav > li > a {
    color: #fff
  }

  #top #avia-menu {
    display:flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }
}

etc. but it would be better to see the page – to give exact advice

by the way: i guess you have zipped your font-files on mac OSX System – because the hidden files are uploaded too.
…/uploads/avia_fonts/type_fonts/macosx/._codec-pro-bold.ttf etc.

You can avoid this – there is for example in BetterZip an Option : zip for “PC”

2nd: your hamburger icon is white on white ground ! – maybe you change it to:

#top .header_color div .av-hamburger-inner, 
#top .header_color div .av-hamburger-inner::before, 
#top .header_color div .av-hamburger-inner::after {
  background-color: #1a63ae;
}

have you installed an additional plugin? where does the class ci-search comes from?
that might be the reason.