I want the website to fullscreen on iOS 26 so there’s no background behind de search bar so it’s floating over the website like the foto from appleparts.nl the other is mine.
I want that the searchbar is transparent. I did try to make the color transparent but it didn’t work.
If I’m on the top of the page there’s nothing but if I scroll and the navbar goes away it comes
[website where the bar is under the searchbar]
image where it isnt this is what i want
this is the code of the navbar i thought it was the theme color but it inst i dont know how i get the section behind
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Bart Fiddelaers Bouwwerken</title>
<meta name="theme-color" content="transparent">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" href="assets/index.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
</head>
<body>
<button id="scrollTopBtn" title="Terug naar boven">↑</button>
<header class="navbar">
<div class="container">
<!-- Hamburger rechts -->
<button class="menu" id="hamburger" aria-label="Main Menu" aria-expanded="false">
<svg width="40" height="40" viewBox="0 0 100 100">
<path class="line line1"
d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331
94.543142,77.980673 90.966081,81.670246 85.259173,81.668997
79.552261,81.667751 75.000211,74.999942 75.000211,74.999942
L 25.000021,25.000058" />
<path class="line line2" d="M 20,50 H 80" />
<path class="line line3"
d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669
94.543142,22.019327 90.966081,18.329754 85.259173,18.331003
79.552261,18.332249 75.000211,25.000058 75.000211,25.000058
L 25.000021,74.999942" />
</svg>
</button>
<!-- Logo gecentreerd -->
<div class="logo-wrapper">
<img class="logo" src="assets/logobf.png" alt="Logo">
</div>
<!-- Desktop navigatie -->
<div class="nav-wrapper">
<nav class="nav-links">
<a href="index.html" data-index="0" class="active">Home</a>
<a href="overons.html" data-index="1">Over ons</a>
<a href="Diensten.html" data-index="2">Diensten</a>
<a href="realisatie.html" data-index="3">Realisaties</a>
<a href="#contact" data-index="4">Contact</a>
</nav>
<div class="ruler-container">
<div class="ruler" id="ruler"></div>
<div class="indicator" id="indicator"></div>
</div>
</div>
</div>
<!-- Mobiel menu buiten .container -->
<nav class="mobile-menu" id="mobileMenu">
<a href="index.html" data-index="0" class="active">Home</a>
<a href="overons.html" data-index="1">Over ons</a>
<a href="Diensten.html" data-index="2">Diensten</a>
<a href="realisatie.html" data-index="3">Realisaties</a>
<a href="#contact" data-index="4">Contact</a>
</nav>
</header>
</pre>
const ruler = document.getElementById('ruler');
const indicator = document.getElementById('indicator');
// Genereer ticks zoals bij een meetlat (elke 10e langer)
const totalTicks = 150;
for (let i = 0; i < totalTicks; i++) {
const tick = document.createElement('div');
tick.classList.add('tick');
if (i % 10 === 0) tick.classList.add('long');
ruler.appendChild(tick);
}
let activeIndex = 0;
function moveTo(index) {
const link = links[index];
const linkRect = link.getBoundingClientRect();
const parentRect = link.parentElement.getBoundingClientRect();
const centerOffset = linkRect.left - parentRect.left + linkRect.width / 2;
ruler.style.transform = `translateX(${centerOffset - ruler.offsetWidth / 2}px)`;
indicator.style.left = `${centerOffset}px`;
links.forEach(a => a.classList.remove('active'));
link.classList.add('active');
}
// Hover functionaliteit
links.forEach((link, index) => {
link.addEventListener('mouseenter', () => moveTo(index));
link.addEventListener('click', () => {
activeIndex = index;
moveTo(index);
});
});
document.querySelector('.nav-links').addEventListener('mouseleave', () => {
moveTo(activeIndex);
});
// Init bij laden van pagina
window.addEventListener('load', () => {
const path = window.location.pathname;
links.forEach((link, index) => {
const href = link.getAttribute('href');
if (path.endsWith(href)) activeIndex = index;
});
moveTo(activeIndex);
});
// Hamburger & mobiel menu
const hamburger = document.getElementById('hamburger');
const mobileMenu = document.getElementById('mobileMenu');
const mobileLinks = mobileMenu.querySelectorAll('a');
const desktopLinks = document.querySelectorAll('.nav-links a');
let scrollPosition = 0;
function openMobileMenu() {
hamburger.classList.add('opened');
hamburger.setAttribute('aria-expanded', 'true');
mobileMenu.classList.add('open');
// Body scroll blokkeren
scrollPosition = window.scrollY;
document.body.style.position = 'fixed';
document.body.style.top = `-${scrollPosition}px`;
document.body.style.left = '0';
document.body.style.right = '0';
document.body.style.overflow = 'hidden';
}
function closeMobileMenu() {
hamburger.classList.remove('opened');
hamburger.setAttribute('aria-expanded', 'false');
mobileMenu.classList.remove('open');
// Body scroll weer toestaan
document.body.style.position = '';
document.body.style.top = '';
document.body.style.left = '';
document.body.style.right = '';
document.body.style.overflow = '';
// Scroll terugzetten naar vorige positie
window.scrollTo(0, scrollPosition);
}
hamburger.addEventListener('click', () => {
if (hamburger.classList.contains('opened')) {
closeMobileMenu();
} else {
openMobileMenu();
}
});
// Menu sluiten bij klikken op link in mobiel menu + active class bijhouden
mobileLinks.forEach((link, index) => {
link.dataset.index = index;
link.addEventListener('click', () => {
closeMobileMenu();
// Active class mobiel
mobileLinks.forEach(l => l.classList.remove('active'));
link.classList.add('active');
// Active class desktop
desktopLinks.forEach(dl => dl.classList.remove('active'));
desktopLinks[index].classList.add('active');
// Update activeIndex
activeIndex = index;
moveTo(activeIndex);
});
});
// Bij resize: sluit mobiel menu bij desktop & zet scroll aan
window.addEventListener('resize', () => {
if (window.innerWidth > 900) {
closeMobileMenu();
}
});
/* =========================
Navbar
========================= */
.navbar {
background: #fff;
position: fixed;
top: 0;
width: 100%;
padding: 10px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
z-index: 9999;
transition: transform 0.3s ease-in-out;
}
.navbar .container {
max-width: 1600px;
padding: 0 150px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10500;
}
.logo-wrapper {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.logo {
height: 60px;
}
/* --- Nav links --- */
.nav-wrapper {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.nav-links {
display: flex;
gap: 40px;
position: relative;
z-index: 2;
}
.nav-links a {
text-decoration: none;
font-size: 21px;
color: #535353;
position: relative;
transition: color 0.3s ease, transform 0.3s ease;
text-shadow: 1px 1px 2px rgba(131, 131, 131, 0.4);
}
.nav-links a:hover,
.nav-links a.active {
transform: scale(1.05);
color: var(--button-hover);
opacity: 0.9;
}
/* --- Hamburger button --- */
.menu {
background: transparent;
border: none;
cursor: pointer;
display: flex;
padding: 0;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 9000;
}
.menu svg {
pointer-events: none;
}
.line {
fill: none;
stroke: #535353;
stroke-width: 6;
transition:
stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1, .line3 {
stroke-dasharray: 60 207;
}
.line2 {
stroke-dasharray: 60 60;
}
.opened .line1,
.opened .line3 {
stroke-dasharray: 90 207;
stroke-dashoffset: -134;
}
.opened .line2 {
stroke-dasharray: 1 60;
stroke-dashoffset: -30;
}
/* --- Ruler styling --- */
.ruler-container {
position: relative;
height: 30px;
width: 100%;
overflow: hidden;
}
.ruler-container::before,
.ruler-container::after {
content: "";
position: absolute;
top: 0;
width: 80px;
height: 100%;
z-index: 3;
pointer-events: none;
}
.ruler-container::before {
left: 0;
background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.ruler-container::after {
right: 0;
background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.ruler {
display: flex;
position: absolute;
height: 100%;
align-items: flex-end;
transition: transform 0.5s ease;
}
.tick {
width: 2px;
height: 12px;
background: #5a595966;
margin-right: 6px;
box-shadow: 0 1px 3px rgba(90, 89, 89, 0.4);
}
.tick.long {
height: 18px;
background: rgba(16, 16, 16, 0.4);
box-shadow: 0 2px 6px rgba(35, 35, 35, 0.4);
}
.indicator {
position: absolute;
top: 5px;
width: 4px;
height: 24px;
background: var(--button-color);
transition: left 0.5s ease;
z-index: 8000;
box-shadow: 0 0 10px rgba(0, 119, 204, 0.5);
/* FIX: forceer aparte layer zodat kleur niet verdwijnt */
transform: translateZ(0);
will-change: left, transform, background;
}
/* --- Mobiel menu --- */
.mobile-menu {
position: fixed;
top: 100px;
left: 0;
width: 100%;
height: calc(100vh - 100px);
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 30px;
opacity: 0;
pointer-events: none;
transform: translateY(100%);
transition: all 0.4s ease;
font-size: 24px;
font-weight: 500;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.mobile-menu.open {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
overflow: hidden
}
.mobile-menu a {
color: var(--button-color);
text-decoration: none;
font-size: 30px;
transition: color 0.3s ease;
}
.mobile-menu a:hover {
background-color: var(--button-hover);
transform: translateY(-2px);
opacity: 0.9;
}
/* --- Navbar responsive --- */
@media (min-width: 1001px) {
.logo-wrapper {
position: static;
transform: none;
}
.navbar .container {
justify-content: space-between;
}
.menu {
display: none;
}
}
@media (max-width: 1000px) {
.nav-links {
display: none;
}
.navbar {
padding: 50px 0;
}
.ruler-container {
display: none;
}
.logo {
z-index: 9000;
}
.navbar .container {
padding: 0 50px;
justify-content: center;
}
.logo-wrapper {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
}
if tried theme color to transparent but it didnt work i want the weird bar onder the searchbar gone
