GPP / Portfolio Template / Header / z index

You're welcome

Hi David,

I was hoping to apply the same CSS-Code snipped...

.site-header, .mobile-header-logo, .menu-toggle {
    z-index: 2;
}

...to a different site and to achieve the same effect. Unfortunately elements like .site-header are being highlighted in red text color (see screenshot).

What kind of error does the red color indicate?

Thanks,
Jan

--- Copy of the entire Additional CSS section ---

/* generateblocks button transition */

.gb-button-wrapper a.gb-button {
	transition: all 0.5s ease 0s;
}

/* global post date and author styling */

.entry-meta, .wp-show-posts-entry-meta {
	font-size: 14px;
}

/* post comment button round corners */

button, input[type=submit] {
	border-radius: 50px;
}

/* rounded corners on images */

.round-corners img {
border-radius: 20px;
}

/* rounded corners on WPSP images */

.wp-show-posts-image img {
border-radius: 20px;
}

/* rounded corners on post images */

.post-image img {
border-radius: 20px;
}

/* center align all footer widgets on mobile */

@media (max-width:768px) {
	.inside-footer-widgets {
		text-align: center;
	}
}

/* lightweight social icons */

.lsi-social-icons li a, .lsi-social-icons li a:hover {
padding: 0px !important;
margin: 10px 8px 0px 0px !important;
}

@media (max-width:768px) {
	.lsi-social-icons {
		text-align: center !important;
	}
} /* End GeneratePress Site CSS */

/* Animated Header Menu */

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 0px;
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0);

        display: block;
        width: 0;
        height: 2px;

        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

/* GPP Custom background color sticky header */

.main-navigation.navigation-stick .main-nav ul li a {
  color: #ffffff;
}

.sticky-enabled .main-navigation.is_stuck {
    background-color: #2f3b1c;}

/* CF7 footer styles */

.footer-widgets .footer-widget-4 {
    text-align: left;
}

/* CF7 checkbox styles */

.betreff span.wpcf7-list-item {width: 100%;max-width: 500px;}

/* Pre-loader */

#wcd-pageloader .pageloader-container img {
    max-width: 50%;
}

.page .wcd-page-loader, 
.single .wcd-page-loader {
  display: none; 
}

.home .wcd-page-loader { 
  display: block; 
}

/* Blockquote styles  */

ite, dfn, em, i {
  font-size: 15px;  
	font-style: italic;
}

blockquote {
    border-left: 5px solid #f49f00;
}

/* Keep the space for uneven text length  */

@media(min-width: 769px) {
  .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
  }

  .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container>*:first-child {
    flex-basis: 80px;
  }

  .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container>*:nth-child(2) {
    flex: 1;
  }
}

/* Accordion css classes */

.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}

/* Fontawesome - External link followed by standard icon */

a:not([href*='b2sbdu4u.myraidbox.de']):not([href^='#']):not([href^='/']):not([href^='mailto']):not([href^='tel']):after {
         font-family: 'FontAwesome';
         content: " \f08e";

/* GPP header */ 
/* Reorder layer to display header */

.site-header, .mobile-header-logo, .menu-toggle {
    z-index: 2;
} 

It's not this CSS code itself that has a problem, it's the CSS above which is missing a close bracket }at the end.
https://www.screencast.com/t/VobBu5yeMJE

Wow. I should have really thought of this myself ;-(

Many thanks Ying for pointing me in the right direction.

One more thing: There is a minor gap between the secondary and the main header.

Can you spot where this is coming from?

Many thanks,
Jan

Dear Ying,

may I kindly ask again for your advise regarding the above question?

Many thanks in advance.

Kind regards,
Jan

Hi there,

sorry that your last reply was overlooked.
Try adding this CSS:

.secondary-navigation {
    position: relative;
}

Awesome, thanks David.

You're welcome