<style>

/*==== Start Underline Grow hover====*/
  .ba-menu6-underline ul li a {
   position: relative;}
  
/*==== Start Underline Center ====*/

  .ba-menu6-underline nav ul li {
   position: relative;}
  .ba-menu6-underline nav ul li a::after {
content: "";
   position: absolute;
   bottom: 12px;
   height: 2px;
   width: 10px;
   left: calc(100% + 20px);
   opacity: 0;
   background-color: #0a0b24;
   z-index: 2;
   display: block;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   -webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
   -o-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
   transition-timing-function: cubic-bezier(.58, .3, .005, 1);}
  .ba-menu6-underline nav ul li:hover a::after {
    width: 100%;
   left: 0;
   opacity: 1;}
  .ba-menu6-underline nav ul.sub-menu li a::after {
 display: none }
.bricks-nav-menu > .current-menu-item > a,  .bricks-nav-menu > .current-menu-ancestor > a,  .bricks-nav-menu > .current-menu-parent > a{
  border:none!important}
/*==== End Underline Center ====*/

  /*==== Start Underline Grow current ====*/

  .ba-menu6-underline  .current-menu-ancestor > a  {
   position: relative;}
  .ba-menu6-underline  .current-menu-ancestor >  a::after {
 content: "";
   position: absolute;
   bottom: 12px;
   height: 2px;
   width: 100%!important;
   left: 0!important;
   opacity:1!important;
   background-color: #0a0b24 ;
   z-index: 2;
   display: block;
   -webkit-transition: .3s;
   -o-transition: .3s;
   transition: .3s;
   -webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
   -o-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
   transition-timing-function: cubic-bezier(.58, .3, .005, 1);}

/*==== End Underline Center ====*/


  /*==== Start Submenu hover background color====*/
  .ba-menu6-submenu ul li.menu-item-has-children ul.sub-menu li{
  display:block;
  padding:0;}
  .ba-menu6-submenu ul li.menu-item-has-children ul.sub-menu li a{
padding: 14px 25px 14px 13px;
    position: relative;
    border-bottom: 1px solid #d3dce8!important;
    display: block;
    text-transform: uppercase;
    width: 100%;
    margin-top: 0px;
width: 100%; 
  transition: all .500s ease-in-out;}


  .ba-menu6-submenu ul li.menu-item-has-children ul.sub-menu li a:hover {
padding: 14px 25px 14px 25px!important;
transition: .3s ease;
background-color: #0a0b24!important;
     opacity: 1!important;
  color: #fff!important}

/*=====================*/

  .ba-menu6-submenu ul.sub-menu li.current-menu-item a {
padding: 14px 25px 14px 25px!important;
transition: .3s ease;
background-color: #0a0b24!important;
     opacity: 1!important;
  color: #fff!important}
  
  
  
  /**============*/
  
  .ba-menu6-submenu  ul.sub-menu {
      min-width: 240px!important;
  padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 6px!important;
  }
  
  .ba-menu6-submenu  .bricks-nav-menu .sub-menu .sub-menu{
  min-width: 240px!important;
  padding-top: 10px;
    padding-bottom: 10px; 
top: 0!important;
    margin-top: -7px!important;}
  .ba-menu6-submenu  nav>ul>li>ul:before {
    position: absolute;
    left: 10%;
    margin-left: 0;
    top: -14px;
    width: 0;
    height: 0;
    content: '';
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #0a0b24;
}
 .bricks-nav-menu .sub-menu > li.menu-item > a{
      overflow: hidden;}
 .bricks-nav-menu > .current-menu-item > a,  .bricks-nav-menu > .current-menu-ancestor > a, .bricks-nav-menu > .current-menu-parent > a{
  border:none!important}
  
  
  
  /*========{{Mobile menu}}=============*/
  /*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
  .ba-menu6-underline .current-menu-ancestor > a::after{
  display: none}
  .ba-menu6-underline nav ul li:hover a::after{
 display: none}  }

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

/*============================
 * //////////////////////////
 * Header 29
 * /////////////////////////
 * ==========================*/
.et-bricks-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}

.et-bricks-sticky-toggle:hover {
  cursor: pointer;
}

.et-bricks-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}

.et-bricks-sticky-header {
  transition: all 400ms !important;
}
.et-bricks-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}

.et-bricks-sticky-toggle .brxe-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}

.et-bricks-sticky-header .et-bricks-sticky-toggle.brxe-icon{
  transform: rotateX(180deg);
      border-top-right-radius: 40px !important;
    border-top-left-radius: 40px !important;
      border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.brxe-icon {
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 40px;
}




</style>

<script>
	//Header 29
jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-bricks-sticky-header");
  $stickyToggle = $(".et-bricks-sticky-toggle");

  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop >= headerHeight &&
      !$stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.addClass("et-show-toggle");
    } else if (
      winScrollTop < headerHeight &&
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });

  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

</script>

Feuerschutz Ockenfels GmbH

Die Firma Feuerschutz Ockenfels GmbH bietet ein weitumfassendes Angebot im Bereich des Brandschutzes an. In des Serviceangebot gehören u.A. Feuerlöscher, Rauchwarnmelder , Brandschutz-Türen /Tore/ Feststellanlagen , Rauchwarnabzüge ( RWA) Anlagen , Wandhydranten / Steigleitungen , usw.

Die neue Firmenwebseite wurde der CI (Corporate Identity) angepasst. Im Headerbereich gibt es diverse Icons und Buttons, die z.B. Popups mit Strassenkarte, Button-Link zur Telefon-App für Direktwahl oder Emailprogramm mit voradressierter Email aufrufen.

Wichtig für den Kunden waren auch die Vermeidung sogenannter Cookies, da vor Allem in der EU die DSGVO (Datenschutzgrundverordnunng) sehr ernst genommen wird. Somit nutzt die Firmenwebseite keine Cookies, die nicht mit der DSGVO konform sind.

Feuerschutz Ockenfels GmbH

Webseite: feuerschutz-ockenfels.de

Alexa Maxrath – Islandpferde & Labrador Retriever

Alexa Maxrath, eine Züchterin für Islandpferde und Labrador Retriever, betreibt seit vielen Jahren eine Webseite mit WordPress. Vor kurzem musste diese quasi „wiederbelebt“ werden, da ihr Webhoster sie zwang auf ein „moderneres“ Webhostingpaket wegen Abschaltung der nicht weitergepflegten PHP Version 5.4 zu wechseln.

Es war eine Mammutaufgabe, nicht wegen des neuen Webhost-Paketes auf dem ihre WordPress-Installation lag, sondern bezüglich der über 14.000 Bilddateien mit nicht konkreter Bildnamensgebung und der leider von WordPress automatisiert angelegten Bildversionen in verschiedenen Größen (z.B. Thumbnail, Medium, Large, etc.).

Es mussten alle Post (Blogbeiträge), Bilder und weitere Texte granular und seperat gesichert werden. Es wurden mehrere Testversionen als Vorbereitung zum finalen Umzug der neuen Webseite benötigt. Man beachte, dass zwischen der PHP-Version 5.4 für die es nur noch bis WordPress-Version 5.1 reichte, und der aktuellen WordPress-Version 6.1 mit neuer PHP-Version 8.0 bzw. 8.1 viele Jahre entsprechender Plugin-Versionen der Webseite liegen. Also kann man behaupten, das dies nahezu reinste Sisyphusarbeit war.

Als Endergebnis kam eine neue Webseite zum Vorschein, die neben ästhetischer Farbgebung, auch im Hintergrund durch das Toolset-Plugin („Custom Post Types“) leicht pflegbar ist, schnelle Ladezeiten der Webseiten hat und ohne Cookies (nervige techn. Krümmelmonster, wegen dem viele Webseiten ein „Cookie Consent Tool“ haben müssen) auskommt.

Ergänzend zu diesem Projekt wurde noch ein schönes Logo mit ihren Lieblingstiergattungen gestaltet.

Logo für Alexa Maxrath

Webseite: alexamaxrath.de