Top Bar

.top-bar { background-color: #333; color: white; padding: 10px 20px; display: flex; justify-content: center; /* Center items horizontally */ align-items: center; position: relative; /* For positioning menu-toggle and search-bar */ } .menu-toggle { position: absolute; left: 20px; /* Adjust as needed */ } .menu-toggle button { background: none; color: white; border: none; font-size: 1.5em; cursor: pointer; } .logo { /* Center logo is now default because of justify-content: center on .top-bar */ } .logo img { height: 30px; /* Adjust as needed */ } .search-bar { display: flex; position: absolute; right: 20px; /* Adjust as needed */ } .search-bar input[type="text"] { padding: 8px; border: none; border-radius: 5px 0 0 5px; } .search-bar button { background-color: #555; color: white; border: none; padding: 8px 15px; border-radius: 0 5px 5px 0; cursor: pointer; } .side-menu { width: 250px; background-color: #f4f4f4; height: 100%; position: fixed; top: 0; left: -250px; /* Hidden initially */ overflow-x: hidden; padding-top: 60px; transition: 0.5s; } .side-menu.open { left: 0; /* Slide in when open */ } .side-menu ul { list-style: none; padding: 0; } .side-menu ul li a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 20px; color: #818181; display: block; transition: 0.3s; } .side-menu ul li a:hover { color: #111; } document.getElementById('menu-button').addEventListener('click', function() { document.getElementById('sideMenu').classList.toggle('open'); }); document.addEventListener('click', function(event) { const sideMenu = document.getElementById('sideMenu'); const menuButton = document.getElementById('menu-button'); if (sideMenu.classList.contains('open') && !sideMenu.contains(event.target) && !menuButton.contains(event.target)) { sideMenu.classList.remove('open'); } });