Possible to add fullscreen slider between the Header and outside the main div id

On the homepage I have a fullscreen slider and when I view the page, I have the left sticky header and then the fullscreen slider is displayed inside the main div id along with rest of the page content like below

<header id="header" class="all_colors header_color light_bg_color  av_header_left av_header_sidebar av_always_sticky" role="banner" itemscope="itemscope" itemtype="https://schema.org/WPHeader">
  displays the logo and navigation
</header>

<div id="main" class="all_colors" data-scroll-offset="0">
 <div id="fullscreen_slider_1" class="avia-fullscreen-slider main_color   avia-builder-el-0  el_before_av_section  avia-builder-el-first  hp-slider container_wrap fullsize" style=" "> display full slider</div>

display rest of the content
</div>

I am trying to display the fullscreen slider above the main div id like below

<header id="header" class="all_colors header_color light_bg_color  av_header_left av_header_sidebar av_always_sticky" role="banner" itemscope="itemscope" itemtype="https://schema.org/WPHeader">
  displays the logo and navigation
</header>
 <div id="fullscreen_slider_1" class="avia-fullscreen-slider main_color   avia-builder-el-0  el_before_av_section  avia-builder-el-first  hp-slider container_wrap fullsize" style=" "> display full slider</div>

<div id="main" class="all_colors" data-scroll-offset="0">
 displays the rest of the page content
</div>

Any advice is appreciated
Thanks