_includes/appscms/navbars/toolbar.html in appscms-tools-theme-4.7.5 vs _includes/appscms/navbars/toolbar.html in appscms-tools-theme-4.7.6
- old
+ new
@@ -1,66 +1,70 @@
-
<style>
- .mobile-search-bar{
+ .mobile-search-bar {
position: relative;
height: 100px;
width: 100%;
- display: none;
+ display: none;
}
+
.mobile-search-container {
display: flex;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
height: 38px;
- margin:20px 0px 20px 0px;
+ margin: 20px 0px 20px 0px;
background-color: white;
position: relative;
-}
+ }
-.mobile-search-input {
+ .mobile-search-input {
flex: 1;
border: none;
padding: 12px 16px;
font-size: 16px;
outline: none;
-}
+ }
-.mobile-search-input::placeholder {
+ .mobile-search-input::placeholder {
color: #888;
-}
+ }
-.mobile-search-button {
+ .mobile-search-button {
background-color: #000;
border: none;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
-}
+ }
-.mobile-search-button svg {
+ .mobile-search-button svg {
/* fill: #fff; */
height: 20px;
-}
+ }
-.mobile-search-button:active {
+ .mobile-search-button:active {
background-color: #555;
-}
-.mobile-nav-search{
- position: relative;
-}
-.mobile-result-item{
- padding: 9px 12px;
-}
-.mobile-result-item a{
- color: #222325;
-}
-.mobile-searchbarResults{
- background-color: #fff;
+ }
+
+ .mobile-nav-search {
+ position: relative;
+ }
+
+ .mobile-result-item {
+ padding: 9px 12px;
+ }
+
+ .mobile-result-item a {
+ color: #222325;
+ }
+
+ .mobile-searchbarResults {
+ background-color: #fff;
border: 1px solid #e4e5e7;
border-radius: 6px;
-webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
-webkit-box-sizing: border-box;
@@ -70,55 +74,51 @@
margin-top: 8px;
padding: 12px;
position: fixed;
margin-top: 42px;
width: 244px;
- height: 400px;
- overflow-y: scroll;
+ height: 400px;
+ overflow-y: scroll;
z-index: 101;
display: none;
-}
+ }
</style>
{%- if site.newToolBar and page.lang == 'en' -%}
-<div class="appscms-toolbar">
+<div class="appscms-toolbar">
<div class="row">
<div class="col-11 mx-auto">
-
<div class="appscms-toolbar-list">
<button class="scroll-left">❮</button>
<div id="close-nav-ham" data-open="1" class="close-nav-ham">
- <img
- class="mt-3"
- style="cursor: pointer"
- height="30px"
- width="30px"
- src="/assets/images/close-button.svg"
- alt="close-button"
- />
+ <img class="mt-3" style="cursor: pointer" height="30px" width="30px" src="/assets/images/close-button.svg"
+ alt="close-button" />
</div>
{%- if site.navigationSearch -%}
<div class="mobile-search-bar">
-
<div class="mobile-search-container">
<input type="text" class="mobile-search-input" placeholder="Search Tools">
-
<button class="mobile-search-button">
- <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff">
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+ <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+ <g id="SVGRepo_iconCarrier">
+ <path
+ d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
+ stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+ </g>
+ </svg>
</button>
-
-
- <div id="mobile-results" class="mobile-searchbarResults"></div>
+ <div id="mobile-results" class="mobile-searchbarResults"></div>
+ </div>
</div>
- </div>
{%- endif -%}
-
- {%- if Data.megaMenu -%} {%- for item in Data.megaMenu.dropdown -%}
+
+ {%- if Data.megaMenu -%}
+ {%- for item in Data.megaMenu.dropdown -%}
<li class="appscms-toolbar-list-item">
- <span
- class="appscms-toolbar-list-item-span d-flex justify-content-between"
- >
+ <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
{{ item.categoryName }}
</span>
<div class="list-item-dropdown">
<div class="row">
{% if item.featuredLinks.size > 0 %}
@@ -146,54 +146,53 @@
<div class="appscms-other-tools">
<div class="expand_menu-name-categiry">OTHER TOOLS</div>
{% assign array_size = item.links | size %}
{% assign half_size = array_size | divided_by: 2 %}
-
+
{% assign first_half = item.links | slice: 0, half_size %}
{% assign second_half = item.links | slice: half_size, array_size %}
<div class="row">
<div class="col-md-6">
<ul class="mega_menu">
{%- for i in first_half | slice: 0, half -%}
<li>
<a href="{{ i.url }}">{{ i.name }}</a>
-
+
</li>
- {%- endfor -%}
-
+ {%- endfor -%}
+
</ul>
</div>
<div class="col-md-6">
<ul class="mega_menu">
{%- for i in second_half -%}
<li>
<a href="{{ i.url }}">{{ i.name }}</a>
-
+
</li>
{%- endfor -%}
</ul>
</div>
-
-
+
+
</div>
-
+
</div>
</div>
{%- endif -%}
-
</div>
</div>
</li>
- {%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
- -%}
+ {%- endfor -%}
+ {%- endif -%}
+
+ {%- for item in siteData.megaMenu.dropdown -%}
<li class="appscms-toolbar-list-item">
- <span
- class="appscms-toolbar-list-item-span d-flex justify-content-between"
- >
+ <span class="appscms-toolbar-list-item-span d-flex justify-content-between">
{{ item.categoryName }}
</span>
<div class="list-item-dropdown">
<div class="row">
{%- if item.featuredLinks.size > 0 -%}
@@ -214,51 +213,51 @@
{%- endfor -%}
</div>
</div>
</div>
{%- endif -%}
- {%- if item.links.size > 0 -%}
- <div class="col-lg-6">
- <div class="appscms-other-tools">
- <div class="expand_menu-name-categiry">OTHER TOOLS</div>
- {% assign array_size = item.links | size %}
- {% assign half_size = array_size | divided_by: 2 %}
-
- {% assign first_half = item.links | slice: 0, half_size %}
- {% assign second_half = item.links | slice: half_size, array_size %}
-
- <div class="row">
- <div class="col-md-6">
- <ul class="mega_menu">
- {%- for i in first_half | slice: 0, half -%}
- <li>
- <a href="{{ i.url }}">{{ i.name }}</a>
-
- </li>
- {%- endfor -%}
- </ul>
+ {%- if item.links.size > 0 -%}
+ <div class="col-lg-6">
+ <div class="appscms-other-tools">
+ <div class="expand_menu-name-categiry">OTHER TOOLS</div>
+ {% assign array_size = item.links | size %}
+ {% assign half_size = array_size | divided_by: 2 %}
+
+ {% assign first_half = item.links | slice: 0, half_size %}
+ {% assign second_half = item.links | slice: half_size, array_size %}
+
+ <div class="row">
+ <div class="col-md-6">
+ <ul class="mega_menu">
+ {%- for i in first_half | slice: 0, half -%}
+ <li>
+ <a href="{{ i.url }}">{{ i.name }}</a>
+
+ </li>
+ {%- endfor -%}
+ </ul>
+ </div>
+ <div class="col-md-6">
+ <ul class="mega_menu">
+
+ {%- for i in second_half -%}
+ <li>
+ <a href="{{ i.url }}">{{ i.name }}</a>
+
+ </li>
+ {%- endfor -%}
+ </ul>
+ </div>
+
+
+ </div>
</div>
- <div class="col-md-6">
- <ul class="mega_menu">
-
- {%- for i in second_half -%}
- <li>
- <a href="{{ i.url }}">{{ i.name }}</a>
-
- </li>
- {%- endfor -%}
- </ul>
- </div>
-
-
</div>
+ {%- endif -%}
+
</div>
</div>
- {%- endif -%}
-
- </div>
- </div>
</li>
{%- endfor -%}
<button class="scroll-right">❯</button>
</div>
@@ -270,11 +269,12 @@
<div class="row">
<div class="col-11 mx-auto">
<div class="appscms-toolbar-list">
<button class="scroll-left">❮</button>
<div id="close-nav-ham" data-open="1" class="close-nav-ham">
- <img class="mt-3" style="cursor: pointer;" height="30px" width="30px" src="/assets/images/close-button.svg" alt="close-button">
+ <img class="mt-3" style="cursor: pointer;" height="30px" width="30px" src="/assets/images/close-button.svg"
+ alt="close-button">
</div>
{%- if Data.megaMenu -%}
{%- for item in Data.megaMenu.dropdown -%}
<li class="appscms-toolbar-list-item">
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
@@ -283,64 +283,64 @@
<div class="list-item-dropdown">
<h4 class="list-item-dropdown-heading">
{{ Data.nav-link-name }}
</h4>
<div class="row">
- {%- assign count = 0 -%}
- {%- for i in item.links -%}
- {%- assign count = count | plus: 1 -%}
+ {%- assign count = 0 -%}
+ {%- for i in item.links -%}
+ {%- assign count = count | plus: 1 -%}
{%- if count == 1 -%}
- {%- if site.name == "olarandoms" -%}
- <div class="col-xl-6">
+ {%- if site.name == "olarandoms" -%}
+ <div class="col-xl-6">
{%- else -%}
<div class="col-md-6 col-lg-4">
- {%- endif -%}
- {%- endif -%}
- {%- if count == 6 -%}
+ {%- endif -%}
+ {%- endif -%}
+ {%- if count == 6 -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
</div>
- {%- assign count = 0 -%}
- {%- else -%}
- <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
- {%- endif -%}
- {%- endfor -%}
+ {%- assign count = 0 -%}
+ {%- else -%}
+ <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
+ {%- endif -%}
+ {%- endfor -%}
+ </div>
</div>
- </div>
</li>
{%- endfor -%}
{%- endif -%}
-
+
{%- for item in siteData.megaMenu.dropdown -%}
<li class="appscms-toolbar-list-item">
<span class="appscms-toolbar-list-item-span d-flex justify-content-between">
{{ item.categoryName }}
</span>
<div class="list-item-dropdown">
<h4 class="list-item-dropdown-heading">
{{ siteData.megaMenu.nav-link-name }}
</h4>
<div class="row">
- {%- assign count = 0 -%}
- {%- for i in item.links -%}
- {%- assign count = count | plus: 1 -%}
+ {%- assign count = 0 -%}
+ {%- for i in item.links -%}
+ {%- assign count = count | plus: 1 -%}
{%- if count == 1 -%}
- {%- if site.name == "olarandoms" -%}
- <div class="col-xl-6">
+ {%- if site.name == "olarandoms" -%}
+ <div class="col-xl-6">
{%- else -%}
<div class="col-md-6 col-lg-4">
- {%- endif -%}
- {%- endif -%}
- {%- if count == 6 -%}
+ {%- endif -%}
+ {%- endif -%}
+ {%- if count == 6 -%}
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
</div>
- {%- assign count = 0 -%}
- {%- else -%}
- <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
- {%- endif -%}
- {%- endfor -%}
+ {%- assign count = 0 -%}
+ {%- else -%}
+ <a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
+ {%- endif -%}
+ {%- endfor -%}
+ </div>
</div>
- </div>
</li>
{%- endfor -%}
<button class="scroll-right">❯</button>
</div>
</div>
@@ -351,99 +351,91 @@
<script>
document.addEventListener("DOMContentLoaded", function () {
- const scrollContainer = document.querySelector(".appscms-toolbar-list");
- const scrollLeft = document.querySelector(".scroll-left");
- const scrollRight = document.querySelector(".scroll-right");
+ const scrollContainer = document.querySelector(".appscms-toolbar-list");
+ const scrollLeft = document.querySelector(".scroll-left");
+ const scrollRight = document.querySelector(".scroll-right");
- function updateScrollButtons() {
- scrollLeft.style.display =
- scrollContainer.scrollLeft > 0 ? "block" : "none";
- scrollRight.style.display =
- scrollContainer.scrollWidth >
- scrollContainer.clientWidth + scrollContainer.scrollLeft
- ? "block"
- : "none";
- }
+ function updateScrollButtons() {
+ scrollLeft.style.display =
+ scrollContainer.scrollLeft > 0 ? "block" : "none";
+ scrollRight.style.display =
+ scrollContainer.scrollWidth >
+ scrollContainer.clientWidth + scrollContainer.scrollLeft
+ ? "block"
+ : "none";
+ }
- scrollLeft.addEventListener("click", function () {
- scrollContainer.scrollLeft -= 120; // Adjust this value as needed
- updateScrollButtons();
- });
+ scrollLeft.addEventListener("click", function () {
+ scrollContainer.scrollLeft -= 120; // Adjust this value as needed
+ updateScrollButtons();
+ });
- scrollRight.addEventListener("click", function () {
- scrollContainer.scrollLeft += 120; // Adjust this value as needed
+ scrollRight.addEventListener("click", function () {
+ scrollContainer.scrollLeft += 120; // Adjust this value as needed
+ updateScrollButtons();
+ });
+
+ scrollContainer.addEventListener("scroll", updateScrollButtons);
+
+ // Initial check to hide buttons if necessary
updateScrollButtons();
});
- scrollContainer.addEventListener("scroll", updateScrollButtons);
-
- // Initial check to hide buttons if necessary
- updateScrollButtons();
-});
-
</script>
<style>
-
+ .scroll-container {
+ display: flex;
+ align-items: center;
+ background-color: #333;
+ position: relative;
+ }
-.scroll-container {
- display: flex;
- align-items: center;
- background-color: #333;
- position: relative;
-}
+ .scroll-left,
+ .scroll-right {
+ background-color: #4456f6f7;
+ color: white;
+ border: none;
+ height: 40px;
+ cursor: pointer;
+ position: absolute;
+ width: 40px;
+ top: 50%;
+ z-index: 100;
+ transform: translateY(-50%);
+ }
-.scroll-left,
-.scroll-right {
- background-color: #4456f6f7;
- color: white;
- border: none;
-height: 40px;
- cursor: pointer;
- position: absolute;
- width: 40px;
- top: 50%;
- z-index: 100;
- transform: translateY(-50%);
-}
+ .scroll-left {
+ left: 0;
+ }
-.scroll-left {
- left: 0;
-}
+ .scroll-right {
+ right: 0;
+ }
-.scroll-right {
- right: 0;
-}
+ .scroll-left:hover,
+ .scroll-right:hover {
+ background-color: #8691f6f7;
+ }
-.scroll-left:hover,
-.scroll-right:hover {
- background-color:#8691f6f7 ;
-}
+ .navbar {
+ /* overflow-x: auto; */
+ white-space: nowrap;
+ flex-grow: 1;
+ scroll-behavior: smooth;
+ display: flex;
+ }
-.navbar {
- overflow-x: auto;
- white-space: nowrap;
- flex-grow: 1;
- scroll-behavior: smooth;
- display: flex;
-}
+ .navbar ul {
+ padding: 0;
+ margin: 0;
+ display: flex;
+ list-style-type: none;
+ }
-.navbar ul {
- padding: 0;
- margin: 0;
- display: flex;
- list-style-type: none;
-}
-
-.navbar li {
- display: inline;
-}
-
-
-
-
-
-
+ .navbar li {
+ display: inline;
+ }
</style>
\ No newline at end of file