מכיון שאף אחד לא ענה לי אני יעשה מהלימון למינודה והכנתי לכם מדריך איך ליצור תפריט נגלל ב css, באלמנטור:
ראשית הוסיפו את אלמנט תפריט הוורדפרס,
הגדירו אותו כך שאף פעם הוא לא יהיה כפתור המבורגר, אלא תמיד תפריט
בתחילה הוא יראה כך שימלא את כל רוחב המסך וזה יראה נורא במסכים קטנים של מובייל או טבלאט, אבל שניה...
אחר כך קבעו את סדר הפריטים כממורכזים.
תנו קלאס ייעודי בשם: my-nav
הוסיפו את קוד ה css הבא ב css מותאם:
כעת יהיה לכם תפריט לחצנים יפהפה, שניתן לגלילה ימינה ושמאלה, וכאשר אתם בעמוד מסויים ישתנה הצבע שלו, שימו לב שאתם כמובן יכולים לשנות את עיגול הפינות והצבע בקלות:
.my-nav .elementor-nav-menu li .elementor-item {
color:#000!important;
text-align: center;
background-color: #DBB385;
border-radius: 15px;
}
/*Hover Background color*/
.my-nav .elementor-nav-menu li:last-of-type .elementor-item:hover{
background-color:#000;
}
selector .elementor-nav-menu {
display: flex;
flex-wrap: nowrap;
white-space: nowrap;
overflow-x: auto; -webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.my-nav .elementor-nav-menu li.current-menu-item .elementor-item {
color:#DBB385!important;
text-align: center;
background-color: #000;
border: 2px solid #DBB385;
}
.my-nav .elementor-nav-menu {
display: flex;
gap: 10px;
}
לפני:
[image: 1704922988055-e13ad831-6291-4e80-8c6a-99d9a5ffc558-image.png]
אחרי:
[image: 1704923041525-c0378a15-4521-4e6e-bd3e-66d9f8b4faa2-image.png]
{זה הנגלל הצידה]
עם אפשרות גלילה אופקית, ללא תוספים מיותרים!!!
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}