init

static/Vvvebjs/demo/landing/scss/sections/navigation/navigation-3.scss

@@ -0,0 +1,101 @@
+@media screen and (min-width: 767px) {
+	.navigation-3 {
+		.sticky {
+			background:rgba(var(--bs-body-bg-rgb), 0.8);
+			
+			&:after {
+				content: '';
+				display: block;
+				position: absolute;
+				background-image: linear-gradient(180deg,rgba(var(--bs-body-color-rgb),.05) 0%,rgba(var(--bs-body-color-rgb),.025) 20%,rgba(var(--bs-body-bg-rgb),0) 80%);
+				//background-image: linear-gradient(180deg,rgba(var(--bs-body-color-rgb),.05) 0%,rgba(var(--bs-body-color-rgb),.025) 20%,rgba(var(--bs-body-bg-rgb),0) 80%);
+				background-image: linear-gradient(180deg, rgba(var(--bs-body-color-rgb), 0.05) 0%, rgba(var(--bs-body-color-rgb), 0.015) 10%, rgba(var(--bs-body-bg-rgb), 0) 80%);
+				border-top:1px solid rgba(var(--bs-body-color-rgb), 0.07);
+				width: 100%;
+				height: 1.5rem;
+				left: 0;
+				bottom: -1.5rem;	
+			}
+		}
+
+		/*
+		&::before {
+			width: 100%;
+			height: 100%;
+			content: " ";
+			position: absolute;
+			backdrop-filter: blur(14px);
+		}	
+		*/
+		
+		h3 {
+			margin-top: 0;
+			margin-bottom: 0;
+			line-height: 3rem;
+		}
+		
+		.search-area i {
+			color: var(--bs-navbar-active-color);
+		}
+		
+		.navbar {
+			padding: 0 1rem;
+			//background: rgba(var(--bs-body-bg-rgb),.85);
+			
+			.navbar-nav {
+		
+				a.nav-link {
+					font-size: 15px;
+					//font-weight: 500;
+					padding: 2.1rem 1rem 2.1rem;
+					//text-transform:none;
+					//color: var(--bs-navbar-active-color);
+
+					&:hover {
+						//background-color: rgba(var(--bs-body-color-rgb),.015);
+						//color: var(--bs-blue);
+						color: var(--bs-navbar-hover-color);
+					}
+				}	
+				
+				.nav-toggle {
+					a.nav-link {
+						padding: 2.1rem 0.5rem 2.1rem;
+					}
+				}
+				
+				nav.navbar-expand-md {
+					a.nav-link {
+						display: flex;
+						align-items: center;
+						color: rgba(var(--bs-body-color-rgb),.7);
+					}
+				}		
+			
+			}
+
+			.dropdown-toggle::after {
+				font-size:60%;
+			}
+		}
+	}
+}
+
+
+
+@media (min-width: 768px) {
+.navbar-collapse {
+		display: flex !important;
+	}
+}
+
+
+@media screen and (max-width: 767px) {
+	.navbar-dark  .navbar-collapse {
+		background: var(--bs-body-color);
+		padding:1rem;
+	}
+	.navbar-collapse {
+		background: var(--bs-body-bg);
+	}
+}