Tabs in the header

see again : https://webers-testseite.de/pureinstall/impressum/

just create a top navigation on dashboard – menus ( do not forget to check on the bottom that field: “Enfold Child Secondary Menu ”
then click on the link “Will be displayed if you selected a header layout that supports a submenu” you will be redirected to the header – header extra elements – Header Secondary Menu.

then this comes to your quick css:

/******** Tabs in top-menu *************/
#header_meta.container_wrap {
    background-color: #000f36 !important;
}

.responsive #header_meta .container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
    margin: 0;
}

#header_meta .sub_menu {
    padding: 0 10px 0 50px !important;
}

ul#avia2-menu {
    margin: 0;
    margin-top: 2px !important;
    padding: 0;
    height: 40px;
    float:left;
}
 
ul#avia2-menu li {
    list-style: none;
    float:left;
    padding: 0 1px !important;
    height: 40px;
    border: none !important;
    text-align: center;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}
 
ul#avia2-menu li a,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li a {
    border-radius:  20px 20px 0 0 !important;
    color: #fff;
    display: block;
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(168,168,168)), to(rgb(69,69,69)));
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
    -webkit-transition-property: background;
    -webkit-transition-duration: 700ms;
    -moz-transition-property: background;
    -moz-transition-duration: 700ms;
}

ul#avia2-menu li a:hover,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li a:hover,
ul#avia2-menu li.current-menu-item a,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a {
    opacity: 1;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

ul#avia2-menu li.current-menu-item a,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a,
ul#avia2-menu li.current-menu-item a:hover,
#top #wrap_all .av_header_transparency .sub_menu ul#avia2-menu li.current-menu-item a:hover  {
    background: #fff;
    color: #000 !important;
}

ul#avia2-menu li a:hover {
    color: #fff !important;
}

@media only screen and (max-width: 767px) {
   #header_meta .sub_menu {
       padding: 0  !important;
   }

    ul#avia2-menu li a {
        padding: 0 10px;
    }

   ul#avia2-menu {
       margin-top: 0 !important;
    }
}

i like this glooming hover effect – but you can change it to a background-color.
that it has that tab feeling the active state ( current item ) should have the same color as header bg-color.
On transparency header it is hard to find a similar effect.