make your Navbar and Menu mobile friendly and attractive.

Guys, if you want to make your PHPRunner Navbar and Menu visually attractive & mobile friendly as left drawer menu, just copy-paste following codes at 'Custom_CSS' and 'Custom_functions.js' respectively. Happy tweak at PHPRunner.

code for 'Custom_CSS' in the style section:
/ === BASE === /
body {
font-family: "Segoe UI", sans-serif;
transition: background 0.3s, color 0.3s;
background-color: #fff;
color: #000;
}
/ === NAVBAR === /
.r-topheader, .navbar-default {
background-color: #0056b3 !important;
position: sticky;
top: 0;
z-index: 1000;
border: none !important;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff !important;
font-weight: 500;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li.active > a {
background-color: #cc0000 !important;
border-radius: 6px;
}

/ === MOBILE ONLY === /
@media (max-width: 768px) {
body.drawer-open {
overflow: hidden;
}
.navbar-toggle {
padding: 0px 8px;
background: none;
border: none;
font-size: 1.6em;
position: relative;
z-index: 1102;
}
.navbar-toggle .icon-bar {
display: none !important;
}
.navbar-toggle::before {
content: "\2630";
color: #fff;
font-weight: bold;
font-family: Arial, sans-serif;
transition: color 0.3s ease;
}
.navbar-toggle:hover::before, .navbar-toggle:focus::before {
color: #cc0000;
}
.navbar-collapse {
position: fixed !important;
top: 0;
left: -260px;
width: 260px;
height: 100vh;
background-color: #0056b3 !important;
transition: left 0.3s ease;
padding: 0;
overflow-y: auto;
z-index: 1100;
display: flex;
flex-direction: column;
}
.navbar-collapse.active {
left: 0 !important;
}
.navbar-collapse::before {
content: "";
display: block;
height: 0;
}
.navbar-collapse .drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 20px 10px;
}
.drawer-title {
font-size: 18px;
font-weight: bold;
color: white;
}
.drawer-close-btn button {
background: #cc0000;
color: white;
font-size: 20px;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
cursor: pointer;
transition: background 0.3s ease;
}
.drawer-close-btn button:hover {
background: #ff3333;
}
.navbar-nav {
padding: 5px 5px;
}
.navbar-nav > li > a {
display: block;
padding: 12px 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

function setupMobileMenuToggle() {
const toggleBtn = document.querySelector(".navbar-toggle");
const drawer = document.querySelector(".navbar-collapse");

if (!toggleBtn || !drawer) return;

function toggleDrawer() {
const isOpen = drawer.classList.contains("active");
if (isOpen) {
drawer.classList.remove("active");
document.body.classList.remove("drawer-open");
} else {
void drawer.offsetWidth;
drawer.classList.add("active");
document.body.classList.add("drawer-open");
}
}

toggleBtn.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
toggleDrawer();
});

document.addEventListener("click", function (e) {
const isDrawerOpen = drawer.classList.contains("active");
if (
isDrawerOpen &&
!drawer.contains(e.target) &&
!toggleBtn.contains(e.target)
) {
drawer.classList.remove("active");
document.body.classList.remove("drawer-open");
}

});

// Dropdown click fix (works for desktop and mobile)
document.querySelectorAll(".navbar-nav li.dropdown").forEach(item => {
const trigger = item.querySelector("a[data-menu-link]");
if (!trigger) return;

});

// Allow link navigation unless dropdown
document.querySelectorAll(".navbar-nav a").forEach(link => {
link.addEventListener("click", (e) => {
const parentLi = link.closest("li");
const isDropdown = parentLi && parentLi.classList.contains("dropdown");
const drawerOpen = drawer.classList.contains("active");

});
}

document.addEventListener("DOMContentLoaded", setupMobileMenuToggle);

function setupDrawerHeader() {
const drawer = document.querySelector(".navbar-collapse");
if (!drawer || window.innerWidth >= 769 || document.querySelector(".drawer-header")) return;

const header = document.createElement("div");
header.className = "drawer-header";
header.innerHTML = <div class='drawer-title'> <img src='#' alt='logo' class='drawer-logo'> <span>Corp</span> </div> <button class='drawer-close' aria-label='Close Drawer'>×</button> ;

drawer.prepend(header);

header.querySelector(".drawer-close").addEventListener("click", () => {
drawer.classList.remove("active", "slide-in");
document.body.classList.remove("drawer-open");
});
}

document.addEventListener("DOMContentLoaded", function () {
setTimeout(() => {
setupDrawerHeader();
}, 100);
});

function injectUserMenuToDrawer() {
const drawer = document.querySelector(".navbar-collapse");
const userInfoBlock = document.querySelector('[data-itemid="username_button"]');

if (!drawer || !userInfoBlock || window.innerWidth >= 769 || document.querySelector(".drawer-userinfo")) return;

const wrapper = document.createElement("div");
wrapper.className = "drawer-userinfo";
wrapper.innerHTML = userInfoBlock.innerHTML;

userInfoBlock.style.display = "none";
drawer.appendChild(wrapper);

const dropdownToggle = wrapper.querySelector(".dropdown-toggle");
if (dropdownToggle) {
dropdownToggle.addEventListener("click", function () {
const dropdownMenu = wrapper.querySelector(".dropdown-menu");
dropdownMenu.classList.toggle("show");
});
}

wrapper.querySelectorAll(".dropdown-menu li a").forEach(link => {
link.addEventListener("click", () => {
drawer.classList.remove("active");
document.body.classList.remove("drawer-open");
});
});
}

document.addEventListener("DOMContentLoaded", () => {
setTimeout(() => {
injectUserMenuToDrawer();
}, 150);
});