Search + custom mobil menu

  • Punkt #1
  • Punkt #2
  • Punkt #3

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, vel paulo perpetua et. Unum praesent appellantur vim no, eos utinam graeci in.

Implementerings­guide

1. Kopier kontainerne

Kopier kontainerne “Custom header -adv” og “ab-header-spacer”

Åben din nye hjemmeside, og tryk “Paste from another page”.

Hver opmærksom på at den ikke tager ID’er med i kopieringen, så på “Icon -adv” skal du tilføje ID’et “ab-search-toggle”.

2. Tilføj globalt CSS

Kopier alt CSS Nedenfor

Åben “Tilpas > Additional CSS” På din nye hjemmeside.

Tilføj alt CSS’en dertil.

				
					/* ========================= 
GLOBAL VARIABLES 
========================= */
:root {
  /* Global font-family */
  --g-font: "poppins", sans-serif;

  /* HOVEDMENU Farve på strej under tekst på dropdown */
  --ab-left-bg: #fff;

  /* Burger menu ikon */
  --ab-burger-line: #111; /*Lukket farve*/
  --ab-burger-line-open: #fff; /*Åbnet farve*/

  /* Burger-menu baggrundsfarve */
  --ab-burger-bg: #111;

  /* SEARCH-BAR i burgermenu */
  --ab-search-color: #fff; /*Tekstfarve*/
  --ab-search-size: 1rem; /*Tekststørrelse*/
  --ab-search-placeholder: rgba(255, 255, 255, .5); /*PLaceholder tekstfarve*/
  --ab-search-focus-border: #fff; /*Bundlinje farve i formen*/
  --ab-search-icon: #fff; /*Farve på søgeikon*/

  /* NAV LINKS i burgermenu */
  --ab-nav-color: #fff!important; /*Tekstfarve*/
  --ab-nav-size: 1.4rem; /*Tekststørrelse*/
  --ab-nav-weight: 400;/*Tekst tykkelse*/

  /* SUBMENU LINKS i burgermenu */
  --ab-subnav-size: 1.25rem; /*Tekstfarve*/

  /* Plus ikon til submenuer */
  --ab-subtoggle-color: #fff;/*Farve*/
  --ab-subtoggle-size: 1.5rem; /*Størrelse*/
}

/* ========================= 
HEADER + BODY OFFSET 
========================= */
.ab-custom-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform .2s ease-in-out;
  z-index: 1000;
  font-family: var(--g-font);
}

.ab-custom-header.ab-hidden {
  transform: translate3d(0, calc(-1 * var(--header-total, 80px)), 0);
}

.ab-header-spacer {
  width: 100%;
  height: 80px;
  pointer-events: none;
}

body.elementor-editor-active .ab-header-spacer {
  display: none !important;
}

body.ab-menu-open .ab-logo-switch img {
  filter: invert(1);
  transition: filter .3s ease;
}

/* ========================= 
HOVEDMENU (ab-left-pointer) 
========================= */
@media (min-width: 1024px) {
  .ab-left-pointer .elementor-nav-menu > li > a.elementor-item,
  .ab-left-pointer .elementor-nav-menu--dropdown .elementor-sub-item {
    position: relative;
    display: flex;
    text-decoration: none;
    font-family: var(--g-font);
    font-size: var(--ab-left-pointer-elementor-nav-a-font-size);
    font-weight: var(--ab-left-pointer-elementor-nav-a-font-weight);
  }

  .ab-left-pointer .elementor-nav-menu > li > a.elementor-item {
    align-items: center;
  }

  .ab-left-pointer .elementor-nav-menu > li > a.elementor-item::after,
  .ab-left-pointer .elementor-nav-menu--dropdown .elementor-sub-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--ab-left-bg);
    transition: width .3s ease-out;
  }

  .ab-left-pointer .elementor-nav-menu > li > a.elementor-item:hover::after,
  .ab-left-pointer .elementor-nav-menu--dropdown .elementor-sub-item:hover::after {
    width: 100%;
  }

  .ab-left-pointer .elementor-nav-menu--dropdown > .menu-item:first-child > .elementor-sub-item {
    padding-top: 16px !important;
  }

  .ab-left-pointer .elementor-nav-menu--dropdown > .menu-item:last-child > .elementor-sub-item {
    padding-bottom: 16px !important;
  }
}

/* ========================= 
SUB-ARROW ROTATION 
========================= */
.elementor-item.has-submenu .sub-arrow > svg {
  transform-origin: center !important;
  transform: rotate(0);
  transition: transform .3s ease;
}

.elementor-item.has-submenu.highlighted .sub-arrow > svg {
  transform: rotate(-90deg);
}

/* ========================= 
SEARCH + NAV TOGGLE 
========================= */
.ab-header-search {
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width .3s ease, opacity .3s ease;
}

.ab-header-search.ab-open {
  width: 250px;
  opacity: 1;
  overflow: visible;
}

.ab-nav-menu.ab-hidden {
  display: none !important;
}

#ab-search-toggle {
  line-height: 0;
  cursor: pointer;
}

/* ========================= 
MOBILE MENU TOGGLE (burger) 
========================= */
.ab-custom-mobile-menu .ab-menu-toggle {
  position: fixed !important;
  z-index: 2147483647 !important;
  border: 0 !important;
  padding: 0 !important;
}

.ab-custom-mobile-menu .ab-menu-toggle svg .ab-line {
  stroke: var(--ab-burger-line) !important;
  stroke-linecap: round;
  stroke-width: 6;
  transform-origin: 44% 50%;
  transition: transform .3s ease, opacity .3s ease, stroke .3s ease;
}

.ab-custom-mobile-menu .ab-menu-toggle svg .ab-line1,
.ab-custom-mobile-menu .ab-menu-toggle svg .ab-line3 {
  transform: none;
}

.ab-custom-mobile-menu .ab-menu-toggle svg .ab-line2 {
  opacity: 1;
}

.ab-custom-mobile-menu.ab-open .ab-menu-toggle svg .ab-line1 {
  transform: translateY(10px) rotate(45deg);
}

.ab-custom-mobile-menu.ab-open .ab-menu-toggle svg .ab-line2 {
  opacity: 0;
}

.ab-custom-mobile-menu.ab-open .ab-menu-toggle svg .ab-line3 {
  transform: translateY(-10px) rotate(-45deg);
}

.ab-custom-mobile-menu.ab-open .ab-menu-toggle svg .ab-line {
  stroke: var(--ab-burger-line-open) !important;
}

/* Elementor Kit overrides */
.elementor-kit-8 .ab-custom-mobile-menu .ab-menu-toggle,
.elementor-kit-8 .ab-custom-mobile-menu .ab-menu-toggle:hover,
.elementor-kit-8 .ab-custom-mobile-menu .ab-menu-toggle:focus,
.elementor-kit-8 .ab-custom-mobile-menu .ab-search-form button,
.elementor-kit-8 .ab-custom-mobile-menu .ab-search-form button:hover,
.elementor-kit-8 .ab-custom-mobile-menu .ab-search-form button:focus {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ========================= 
OVERLAY PANEL 
========================= */
.ab-custom-mobile-menu .ab-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 1000px;
  background: var(--ab-burger-bg);
  padding: 7rem 1.875vw;
  opacity: 0;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 999998 !important;
}

.ab-custom-mobile-menu.ab-open .ab-overlay {
  opacity: 1;
  visibility: visible;
}

.ab-custom-mobile-menu .ab-overlay .ab-search-form {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
}

.ab-custom-mobile-menu .ab-overlay .ab-search-form input {
  width: 100%;
  padding: .75rem 2.5rem .75rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .4);
  border-radius: 0;
  color: var(--ab-search-color);
  font-size: var(--ab-search-size);
  transition: border-color .3s;
  font-family: var(--g-font);
}

.ab-custom-mobile-menu .ab-overlay .ab-search-form input::placeholder {
  color: var(--ab-search-placeholder);
}

.ab-custom-mobile-menu .ab-overlay .ab-search-form input:focus {
  outline: none;
  border-bottom-color: var(--ab-search-focus-border);
}

.ab-custom-mobile-menu .ab-overlay .ab-search-form button {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.ab-custom-mobile-menu .ab-overlay .ab-search-form button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: var(--ab-search-icon);
}

.ab-custom-mobile-menu .ab-overlay nav ul {
  list-style: none;
  padding: 0;
}

.ab-custom-mobile-menu .ab-overlay nav li + li {
  margin-top: 1.5rem;
}

.ab-custom-mobile-menu .ab-overlay nav a {
  display: block;
  font-size: var(--ab-nav-size);
  line-height: 1.2;
  color: var(--ab-nav-color);
  font-family: var(--g-font);
  font-weight: var(--ab-nav-weight);
}

/* ========================= 
BREAKPOINTS 
========================= */
@media (max-width: 767px) {
  .ab-custom-mobile-menu .ab-overlay {
    padding: 7rem 20px;
  }
}

@media (max-width: 1024px) {
  .ab-nav-menu {
    display: none !important;
  }

  .ab-header-search {
    display: none !important;
  }

  #ab-search-toggle {
    display: none !important;
  }

  .ab-custom-mobile-menu .ab-overlay nav .menu-item-has-children {
    position: relative;
  }

  .ab-custom-mobile-menu .ab-overlay nav .sub-menu {
    max-height: 0;
    overflow: hidden;
    padding-left: 16px;
    transition: max-height .3s ease-out;
  }

  .ab-custom-mobile-menu .ab-overlay nav .sub-menu > li:first-child {
    padding-top: 16px;
  }

  .ab-custom-mobile-menu .ab-overlay nav .sub-menu > li a {
    font-size: var(--ab-subnav-size);
    font-family: var(--g-font);
  }

  .ab-custom-mobile-menu .ab-overlay nav .menu-item-has-children.ab-open > .sub-menu {
    max-height: 1000px;
    transition: max-height .3s ease-in;
  }

  .ab-custom-mobile-menu .ab-overlay nav .menu-item-has-children .ab-submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: none;
    border: 0;
    color: var(--ab-subtoggle-color);
    font-size: var(--ab-subtoggle-size);
    display: flex;
    align-items: start;
    justify-content: start;
    cursor: pointer;
    padding: 0;
    z-index: 1;
  }

  .ab-custom-mobile-menu .ab-overlay nav .menu-item-has-children > .ab-submenu-toggle::after {
    content: '+';
    transition: transform .3s ease;
  }

  .ab-custom-mobile-menu .ab-overlay nav .menu-item-has-children.ab-open > .ab-submenu-toggle::after {
    content: '-';
  }

  .ab-custom-mobile-menu .ab-overlay nav .menu-item-has-children > a {
    display: block;
  }
}

@media (min-width: 1025px) {
  .ab-custom-mobile-menu .ab-overlay nav .menu-item-has-children .ab-submenu-toggle {
    display: none !important;
  }

  .ab-custom-mobile-menu .ab-overlay nav .sub-menu {
    max-height: none !important;
    overflow: visible !important;
    padding-left: 0 !important;
  }

  .ab-custom-mobile-menu .ab-overlay nav .menu-item-has-children > a {
    padding-right: normal !important;
  }
}

3. Tilføj script

For at få headeren til at virke, skal du tilføje dette script til “Elementor > Custom Code”.

Tilføj en ny kode, og kald den “Search + custom mobil menu”.

Sæt Location til “</body> – End”.

Tilføj hele scriptet dertil.

				
					<script>
(function () {
  if (window.__abHeaderInit) return;
  window.__abHeaderInit = true;

  // Kør init så tidligt som muligt
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init, { once: true });
  } else {
    init();
  }

  function init() {
    const header = document.querySelector('.ab-custom-header');
    const mobileHeader = document.querySelector('.ab-mobile-header');
    const inElementor = document.body.classList.contains('elementor-editor-active');

    if (header) {
      setupHeaderOffsets(header, inElementor);
    }

    setupMobileMenu();
    window.addEventListener('resize', debounce(setupMobileMenu, 120), { passive: true });

    setupSearchToggles();

    setupAutoHideHeaders([header, mobileHeader].filter(Boolean), inElementor);
  }

  // =======================
  // Header offsets (spacer + adminbar)
  // =======================
  function setupHeaderOffsets(header, inElementor) {
    // Vi forventer nu, at spaceren allerede findes i DOM lige efter headeren
    const spacer = header.nextElementSibling && header.nextElementSibling.classList.contains('ab-header-spacer')
      ? header.nextElementSibling
      : null;

    const adminBar = document.getElementById('wpadminbar');

    const updateOffsets = () => {
      // requestAnimationFrame for at måle efter layout
      requestAnimationFrame(() => {
        const adminH = (!inElementor && adminBar) ? adminBar.offsetHeight : 0;
        const headerH = header.getBoundingClientRect().height;

        // Sæt top og spacer-højde
        header.style.top = inElementor ? '0px' : (adminH + 'px');
        if (spacer) spacer.style.height = headerH + 'px';

        // Bruges til din hide/translate logik
        header.style.setProperty('--header-total', (headerH + adminH) + 'px');

        // Aktiver transitions først nu for at undgå FOUC/layout hop
        document.body.classList.add('ab-header-ready');
      });
    };

    if (!inElementor) {
      // Opdater på load og resize
      if (document.readyState === 'complete') {
        updateOffsets();
      } else {
        window.addEventListener('load', updateOffsets, { once: true });
      }
      window.addEventListener('resize', debounce(updateOffsets, 120), { passive: true });

      // Observer ændringer i headerens indhold/klasser (f.eks. font swap, logo mv.)
      if ('MutationObserver' in window) {
        const mo = new MutationObserver(updateOffsets);
        mo.observe(header, { childList: true, subtree: true, attributes: true });

        const classMo = new MutationObserver(updateOffsets);
        classMo.observe(header, { attributes: true, attributeFilter: ['class'] });
      }

      // Kør én gang straks (så tidligt som muligt)
      updateOffsets();
    } else {
      // I Elementor: ingen spacer/offset
      header.style.top = '0px';
      if (spacer) spacer.style.display = 'none';
      document.body.classList.add('ab-header-ready');
    }
  }

  // =======================
  // Mobilmenu
  // =======================
  function setupMobileMenu() {
    const menuRoot = document.querySelector('.ab-custom-mobile-menu');
    if (!menuRoot) return;

    const toggleBtn = menuRoot.querySelector('.ab-menu-toggle');
    if (toggleBtn && !toggleBtn.__bound) {
      toggleBtn.addEventListener('click', () => {
        menuRoot.classList.toggle('ab-open');
        document.body.classList.toggle('ab-menu-open', menuRoot.classList.contains('ab-open'));
      });
      toggleBtn.__bound = true;
    }

    const isMobile = window.innerWidth <= 1024;
    const parents = menuRoot.querySelectorAll('.menu-item-has-children');

    parents.forEach((item) => {
      let btn = item.querySelector(':scope > .ab-submenu-toggle');

      if (isMobile) {
        if (!btn) {
          btn = document.createElement('button');
          btn.className = 'ab-submenu-toggle';
          btn.setAttribute('aria-label', 'Toggle submenu');
          item.appendChild(btn);
        }
        if (!btn.__bound) {
          btn.addEventListener('click', function (e) {
            e.stopPropagation();
            item.classList.toggle('ab-open');
          });
          btn.__bound = true;
        }
      } else {
        if (btn) btn.remove();
        item.classList.remove('ab-open');
      }
    });
  }

  // =======================
  // Search toggles (ny + gammel)
  // =======================
  function setupSearchToggles() {
    const newBtn = document.getElementById('ab-search-toggle');
    const newSearch = document.querySelector('.ab-header-search');
    if (newBtn && newSearch && !newBtn.__bound) {
      newBtn.addEventListener('click', () => {
        newSearch.classList.toggle('ab-open');
        if (newSearch.classList.contains('ab-open')) {
          const input = newSearch.querySelector('input, [type="search"], textarea');
          if (input) input.focus();
        }
      });
      newBtn.__bound = true;
    }

    const oldBtn = document.getElementById('search-toggle');
    const oldSearch = document.querySelector('.header-search');
    const oldMenu = document.querySelector('.nav-menu');

    if (oldBtn && oldSearch && !oldBtn.__bound) {
      oldBtn.addEventListener('click', function (e) {
        e.preventDefault();
        oldSearch.classList.toggle('open');
        if (oldMenu) oldMenu.classList.toggle('hidden');
        if (oldSearch.classList.contains('open')) {
          const input = oldSearch.querySelector('input, [type="search"], textarea');
          if (input) input.focus();
        }
      });
      oldBtn.__bound = true;
    }
  }

  // =======================
  // Auto-hide headers ved scroll
  // =======================
  function setupAutoHideHeaders(headers, inElementor) {
    if (!headers.length) return;

    if (inElementor) {
      headers.forEach(h => h.classList.remove('ab-hidden'));
      return;
    }

    let lastY = window.scrollY;
    let revealTO = null;
    const delay = 2000;
    const threshold = 80;

    function showAll() {
      headers.forEach(h => h.classList.remove('ab-hidden'));
      clearTimeout(revealTO);
    }

    function onScrollOrTouch() {
      const currentY = window.scrollY;

      if (currentY <= threshold) {
        lastY = currentY;
        return showAll();
      }

      const delta = currentY - lastY;

      if (delta > 0) {
        headers.forEach(h => h.classList.add('ab-hidden'));
        clearTimeout(revealTO);
        revealTO = setTimeout(showAll, delay);
      } else if (delta < 0) {
        showAll();
      }

      lastY = currentY;
    }

    window.addEventListener('scroll', onScrollOrTouch, { passive: true });
    window.addEventListener('touchend', onScrollOrTouch, { passive: true });
    window.addEventListener('touchcancel', onScrollOrTouch, { passive: true });
  }

  // ==== Utilities ====
  function debounce(fn, wait) {
    let t;
    return function () {
      clearTimeout(t);
      t = setTimeout(() => fn.apply(this, arguments), wait);
    };
  }
})();
</script>

3. Tilføj PHP

For at få WordPress menuen til at virke i koden som en shortcode, skal du tilføje PHP i et code snippet. Gå til “Snippets > Custom Code”.

Tilføj en ny kode, og kald den “WordPress Menu”.

Tilføj hele PHP koden dertil.

Tryk “Save and activate”.

				
					// Expose your “NavMenu” menu via a <ul><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2020"><a href="#">Forside</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2021"><a href="#">Vi tilbyder</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2022"><a href="#">Tilbud 1</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2023"><a href="#">Tilbud 2</a></li>
	<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2024"><a href="#">Tilbud 3</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2025"><a href="#">Om os</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2026"><a href="#">Galleri</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2027"><a href="#">Kontakt os</a></li>
</ul> shortcode
add_shortcode('navmenu', function(){
  return wp_nav_menu([
    'menu'        => 'NavMenu',       // your menu’s slug or name
    'container'   => false,           // no extra wrapper
    'items_wrap'  => '<ul>%3$s</ul>', // preserve only the <ul>
    'depth'       => 0,               // 0 = unlimited levels
    'echo'        => false,           // return as string
    'fallback_cb' => false,           // nothing if menu not set
  ]);
});