Topic: Adding 200px to bottom of top navigation: should fade out from top to bottom

ultracello
September 26, 2024 at 2:52 am

Is it possible to give the top navigation an extra space (adding extra height of 200px) at the bottom? The goal is to have a linear gradient from 100% visibility and hide the blur to 100% transparency with 0% blur. For the Desktop version only, ignoring mobile devices.
Currently it looks a bit harsh to me, which is why I would like to have the top navigation fade out smoothly.

I did a sketch (with poor photoshop skills and a bad gap) here: https://ibb.co/pLh9wLs
David
September 26, 2024 at 5:59 am
Hi there,

instead of your current CSS for blurring the main-navigation, try this:
```
.main-navigation:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    bottom: -120px;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    mask: linear-gradient(black, black 30%, transparent);
    z-index: -1;
}
```
It adds the blur to a pseudo element which can then be made taller then the navigation, blurred and masked with a gradient.

Note the bottom: -120px; is what makes the pseudo element 120px taller then the navigation.

ultracello

September 26, 2024 at 7:02 am

Thank you, David! So far it looks good!

Is there a solution to avoid displaying the background of the top navigation when stay in the mobile menu?

My current CSS code is:

/* Inhalt auf 100% Breite setzen */
body .grid-container {
    width: 100% !important;
    min-width: 100% !important;
}

/* Seitentitel nicht anzeigen */
.page .entry-title {
    display: none;
}

.elementor-widget-text-editor p:last-child {
    margin-bottom: 0px;
}

/* Top-Navigationspunkt der aktiven Seite fett schreiben */
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    font-weight: 900;
    color: #FFFFFF;
}

/* Top-Navigation */
.main-nav a, .main-navigation .main-nav ul ul li a {
    font-size: 13px;
        font-weight: 600;
        color: #FFFFFF;
}

/* Top-Navigation text shadow (Desktop)*/
@media only screen and (min-width: 769px) {
.main-nav a, .main-navigation .main-nav ul ul li a {
	    text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
}

.main-navigation {
    padding-right: 20px;
}

/* blurry fade background top navi (Desktop) */
@media only screen and (min-width: 769px) {
.main-navigation:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    bottom: -200px;
    background-color: rgba(0, 0, 0, 0.0);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    mask: linear-gradient(black, black 10%, transparent);
    z-index: -1;
}
}

/* blurry fade background top navi (mobile) */
@media only screen and (max-width: 768px) {
.main-navigation:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    bottom: -120px;
    background-color: rgba(0, 0, 0, 0.0);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    mask: linear-gradient(black, black 30%, transparent);
    z-index: -1;
}
}

/* Hero Seiten-Untertitel (mobil) */
@media only screen and (min-width: 769px) {
.main-navigation {
    background-color: rgba(0,0,0,0.);
	}}

.main-navigation ul ul {
    background-color: rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

a.cart-contents.shopping-cart {
    color: #FFFFFF;
}

.main-navigation .main-nav ul li a {
    letter-spacing: 2px;
            color: #FFFFFF;
}

.site-logo {
    -webkit-filter: invert(1);
    filter: invert(1);
    float: left;
    padding-left: 10px;
}

/* Anzeigen von Inhalten unter der transparenten Top-Navigationsleiste vermeiden */
.swap-nav .main-navigation {
    background-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.swap-nav .main-navigation .main-nav ul li a {
    color: #000000;
}

.swap-nav .main-navigation ul ul {
    background-color: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.swap-nav a.cart-contents.shopping-cart {
    color: #000000;
}

.swap-nav .site-logo {
    -webkit-filter: invert(0);
    filter: invert(0);
}

/* Location: Umschaltpunkt für Design > Elements */
.find-me {
    max-height: 0px;
}

/* Hero Seitentitel */
.hero_page_title {
    font-family: Montserrat;
    font-weight: bold;
    color: #FFFFFF;
    letter-spacing: 2px;
    text-shadow: 4px 4px 15px rgba(0, 0, 0, 1);
    hyphens: auto;
		margin-top: 200px;
		padding-left: 10px;
		padding-right: 10px;
		text-align: center;
}

/* Hero Seitentitel (Desktop) */
@media only screen and (min-width: 769px) {
    .hero_page_title {
        font-size: 80px;
    }
}

/* Hero Seitentitel (mobil) */
@media only screen and (max-width: 768px) {
    .hero_page_title {
        font-size: 43px;
    }
}

/* Hero Seiten-Untertitel */
.hero_page_subtitle {
    font-family: Bebas Neue;
    font-size: 30px;
  color: #FFFFFF;
    letter-spacing: 1px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
		padding-left: 10px;
		padding-right: 10px;
}

/* Hero Seiten-Untertitel (mobil) */
@media only screen and (max-width: 768px) {
    .hero_page_subtitle {
        font-size: 18px;
			padding-top:15px;
    }
}

.hero_page_about {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    background-color: rgba(0,0,0,0.25);
    padding: 10px 10px 10px 10px;
}

/* Hero Hintergrundbild */
.hero_backgroundimage {
    filter: grayscale(0%);
    }

.hero-background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Passt zur fixierten Positionierung und der vollen Höhe des Viewports */
    z-index: -1;
    transition: opacity 0.5s ease-out;
}

.section_about {
    background-color: rgba(255,255,255,0.8);
        border-radius: 5px; 
    margin:5px;
}

.section_video_description {
    background-color: rgba(255,255,255,0.6);
    border-radius: 5px;
}

/* MP3 player settings */
.album-art img {
    border-radius: 5px;
}

.album-art img.hover {
    display: none !important;
}

span.track-number {
    display: none;
}

.mp3playerbutton {
    background: #CC0000;
}

.add_to_cart_button {
    font-size: 20px;
    letter-spacing: 2px;
    background-color: #339900 !important;
    color: #FFFFFF !important;
    padding: 16px 18px 13px 20px;
    box-shadow: 0px 0px 5px 0px #339900 !important;
}

.add_to_cart_button:hover {
    background-color: #336600 !important;
}

.added_to_cart .wc-forward {
    display: none;
}

a.added_to_cart.wc-forward {
    display: none;
}

/* Warenkorb-Symbol in Navigationsleiste ausblenden */
.wc-menu-item {
    display: none !important;
}

/* TABLEPRESS */

.tablepress {
    border-radius: 5px;
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    .tablepress-id-4 .column-1 {
        padding-top: 45px;
    }

    .tablepress-id-4 .column-4 {
        padding-bottom: 45px;
    }

    .tablepress-id-4 tbody td {
        word-break: break-word;
        hyphens: auto;
    }
}

@media only screen and (min-width: 769px) {
    .tablepress-id-4 .column-1 {
        width: 15%;
    }

    .tablepress-id-4 .column-2 {
        width: 45%;
    }

    .tablepress-id-4 .column-3 {
        width: 20%;
    }

    .tablepress-id-4 .column-4 {
        width: 20%;
    }
}

.tablepress-id-4 .column-1 {
}

.tablepress-id-4 .column-2 {
}

.tablepress-id-4 .column-3 {
    font-weight: bold;
}

.tablepress-id-4 .column-4 {
}

.tablepress-id-4 .column-5 {
}

.tablepress-id-4 td {
    text-align: center;
}

.tablepress-id-4 {
    background-color: transparent;
        border-radius: 5px;
}

.tablepress-id-4 .row {
}

.tablepress-id-4 .odd td {
    background: rgba(255,255,255,0.2);
    border: 0;
}

.tablepress-id-4 .even td {
    background: rgba(255,255,255,0.4);
    border: 0;
}

.tablepress-id-5 tbody td {
    word-break: break-word;
    hyphens: auto;
}

@media screen and (max-width: 768px) {
    .tablepress-id-5 .column-1 {
        padding-top: 0;
    }

    .tablepress-id-5 .column-3 {
        padding-bottom: 45px;
    }
}

@media only screen and (min-width: 769px) {
    .tablepress-id-5 .column-1 {
    }

    .tablepress-id-5 .column-2 {
    }

    .tablepress-id-5 .column-3 {
    }
}

.tablepress-id-5 .column-1 {
}

.tablepress-id-5 .column-2 {
}

.tablepress-id-5 .column-3 {
    font-weight: bold;
}

.tablepress-id-5 .column-4 {
}

.tablepress-id-5 .column-5 {
}

.tablepress-id-5 td {
    text-align: center;
}

.tablepress-id-5 {
    background-color: transparent;
}

.tablepress-id-5 .row {
}

.tablepress-id-5 .odd td {
    background: rgba(255,255,255,0.3);
    border: 0;
}

.tablepress-id-5 .even td {
    background: rgba(255,255,255,0.5);
    border: 0;
}

.tablepress .row-hover tr:hover td {
	background-color: rgba(255,255,255,0.5);
}

/* Events öffentlich/privat */
.sc_event_private {
    color: #FFFFFF !important;
    font-weight: bold !important;
    font-size: 12px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 2px 5px;
  margin: 5px;
  border: 0px solid #FFFFFF;
  border-radius: 5px;
  background-color: #FF0000;
  text-align: center;
  text-decoration: none;
    text-shadow: 4px 4px 15px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 5px 0px #FF0000 !important;
}

.sc_event_public {
    color: #FFFFFF !important;
    font-weight: bold !important;
    font-size: 12px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 2px 5px;
  margin: 5px;
  border: 0px solid #FFFFFF;
  border-radius: 5px;
  background-color: #28a745;
  text-align: center;
  text-decoration: none;
    text-shadow: 4px 4px 15px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 5px 0px #28a745 !important;
}

body, HTML {
 overflow-x: hidden;
 overscroll-behavior: none;
}

body.slide-opened {
    overflow: hidden !important;
    max-height: 100vh;
}

/* Social Media Icons horizontal zentrieren */
#generate-slideout-menu.do-overlay .slideout-menu li {
    display: inline-block;
    margin: 0 0px; /* Abstand zwischen den Icons */
}

#generate-slideout-menu.do-overlay .slideout-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
}
#generate-slideout-menu.do-overlay .slideout-menu li .fa-brands {
    font-size: 24px; /* Größe der Icons anpassen */
	padding-top: 30px;
}

#generate-slideout-menu {
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
	    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 769px) {
    .main-navigation .main-nav>ul>li>ul {
        background-color: rgba(0,0,0,0.4) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }
}

ultracello

September 26, 2024 at 7:06 am

Because when stay in the mobile menu it looks this bad: https://ibb.co/T1NjVkV (It’s too dark)

But it should look this way (ignore the background color/transparency): https://ibb.co/5nKQXxq (This looks good but I only can make it working when delete this part of the CSS:

/* Menü black transparent fade out (mobile) */
@media only screen and (max-width: 768px) {
.main-navigation:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    bottom: -50px;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    mask: linear-gradient(black, black 0%, transparent);
    z-index: -1;
}
}

Many thanks!

Ying
September 26, 2024 at 9:30 am

I see that you added a media query to David’s CSS, which limited the effect to apply only on mobile, but you do not want it on mobile, I’m confused!
https://app.screencast.com/Do2kVJQGpixp6

If you want the effect to apply on desktop, then you should change the media query from max-width:768px to min-width:769px

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Adding 200px to bottom of top navigation: should fade out from top to bottom