Menu behavior on individual blog posts

Support
#1

See here: https://traduxa.com/

I have this css:

.x-alert-success, .wpcf7-mail-sent-ok, .buddypress #message.updated, .bbp-template-notice.updated {
    background-color: #fff;
    border-color: #282560;
    color: #282560;
}
@media (max-width: 1024px) {
.prod .x-column {
      width: 29% !important;
      float: left;
  text-align: center;
  padding: 30px;
  padding-left: 5%;
  padding-right:auto;
}
}@media (max-width: 767px) {
.prod .x-column {
      width: 50% !important;
      float: left;
  padding: 20px
}
}
@media (max-width: 40px) {
.prod .x-column {
      width: 100% !important;
text-align: center;
  padding: 20px
}
}
.x-scroll-top {
    position: fixed;
    z-index: 10000;
    bottom: 10px;
    width: 70px;
    height: 70px;
    margin-bottom: -75px;
    border: 2px solid #272727;
    font-size: 50px;
    line-height: 60px!important;
    text-align: center;
    color: #272727;
    border-radius: 100%;
    -webkit-transition: margin-bottom 0.6s ease,opacity 0.3s ease;
    transition: margin-bottom 0.6s ease,opacity 0.3s ease;
}
.x-navbar .x-nav-wrap .x-nav > li > a {
    font-family: "Poppins",sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-transform: uppercase;
  padding-left:20px!important;
}
.x-btn-navbar {
    padding: 0.458em 0.625em;
    text-shadow: none;
    color: #282560;
    background-color: #ffffffb8;
    border-radius: 4px;
    box-shadow: none;

}
.x-navbar .mobile .x-nav li>a {
    margin: 0 0 -1px;
    border: 1px solid #f2f2f2;
    border-left: 0;
    border-right: 0;
    padding: 1em 0;
    color: #282560;
    background-color: #ffffffb8;
}
.x-btn-navbar.collapsed:hover {
    color: #282560;
    background-color: transparent;
    box-shadow: none;
  text-shadow: none;
}
.x-btn-navbar:hover {
    color: #282560;
    background-color: transparent;
    box-shadow: none;
  text-shadow: none;
}
.x-btn-navbar.collapsed {
    color: #282560;
    background-color: transparent;
    box-shadow: none;
  text-shadow: none;
}
.x-colophon .x-container.max.width {
max-width:800px;
}
.x-colophon .widget {
margin-top: 0em;
}
.footermenu {
    letter-spacing: 2px;
    text-align: center!important;
    line-height: 1.2;
    color: #fff!important;
    font-size: 15px!important;
    text-decoration: none!important
}
.button-green {
   text-shadow: none;
     z-index: 11;
    background-color: rgba(0, 0, 0, 0);
    font-family: Poppins;
    visibility: visible;
    text-align: left;
    line-height: 25px;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 19px;
    border-color: rgba(255, 255, 255, 0.35);
    border-style: solid;
    border-width: 2px;
    margin: 0px;
    border-radius: 25px;
    padding: 0px 20px;
    height: auto;
    width: auto;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
}
.button-green:hover {
	background-color:#282560;
  
}
@media(min-width: 40px) {
.masthead  {
            position:absolute;
            width:100%;            
       }

.x-topbar,
.x-navbar {
   background-color:transparent;
  border-bottom: none;
box-shadow: none;

} 

.x-navbar .desktop .x-nav > li > a {
      color:#fff;  
}

.x-topbar,
.x-topbar a {
   color:#fff;
}


.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .current-menu-item > a,
{
    color: #4682b4 !important;
 }

.x-topbar.x-topbar-fixed-top,
.x-navbar.x-navbar-fixed-top {
    background:#fff;
  
}

.x-topbar.x-topbar-fixed-top,
.x-topbar.x-topbar-fixed-top a {
   color:#000;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
   color:#000;  
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
     z-index: 99999;
    top: 0px;
    position: fixed;
    clear: both;   
    width: 100%;
    background-color: #fff;
  border-bottom: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
}
.scroll-nav a.x-brand {
    width: 250px;
    height: 105px;
    display: block;
    background-size: cover;
}

.scroll-nav a.x-brand img {
    display: none;
}
.x-colophon {
    position: relative;
    border-top: none!important;
    background-color: #282560!important;
    box-shadow: none!important;
  text-align: center;
  padding-bottom: 20px!important;
  }
.footermenu {
    letter-spacing: 1px;
    text-align: center!important;
    line-height: 1.2;
    color: #fff!important;
    font-size: 18px!important;
    text-decoration: none!important
}
.x-colophon.top {
    padding: 20;
}
.x-colophon.bottom .x-colophon-content {
    margin: 30px 0 10px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.3;
  color:#fff;
}
@media screen and (max-width:480px){
	.x-brand img{
	    width: 250px;
		max-width:60%;
	}

And this javascript:

jQuery(function($){
  $(window).scroll(function(){
  if ( $(this).scrollTop() ==0) {
$('.x-navbar').removeClass('x-navbar-fixed-top');
   }
      if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
$('.x-topbar').addClass('x-topbar-fixed-top');
      }else {
$('.x-topbar').removeClass('x-topbar-fixed-top');
}
  });
});

jQuery(function($) {
 $(window).scroll(function() {
   if($('.x-navbar').hasClass('x-navbar-fixed-top')) {
     $('.x-navbar-fixed-top .x-brand img').attr('src','https://traduxa.com/wp-content/uploads/2020/04/logo-dark-min.png');
   }else{
     $('.x-navbar .x-brand img').attr('src','https://traduxa.com/wp-content/uploads/2020/04/logo-white-min.png');
   }
 });
});

Its working great!, however, on individual blog posts, (https://traduxa.com/3-reasons-why-website-localization-is-important/) it does work, as I cant have a header as per the other pages…nor do I want a header…

Is there a way to make the menu appear in its permanent 2nd state on post pages? ie disable the appear on scroll down just for posts?

Thanks.

#2

Hello @logoglo,

Thanks for the very detailed post information. I have check your css code with the CSS Formatter and it contains several broken css codes. The correct code should be updated into this code:

.x-alert-success, .wpcf7-mail-sent-ok, .buddypress #message.updated, .bbp-template-notice.updated {
     background-color: #fff;
     border-color: #282560;
     color: #282560;
}
 @media (max-width: 1024px) {
     .prod .x-column {
         width: 29% !important;
         float: left;
         text-align: center;
         padding: 30px;
         padding-left: 5%;
         padding-right:auto;
    }
}
@media (max-width: 767px) {
     .prod .x-column {
         width: 50% !important;
         float: left;
         padding: 20px 
    }
}
 @media (max-width: 40px) {
     .prod .x-column {
         width: 100% !important;
         text-align: center;
         padding: 20px 
    }
}
 .x-scroll-top {
     position: fixed;
     z-index: 10000;
     bottom: 10px;
     width: 70px;
     height: 70px;
     margin-bottom: -75px;
     border: 2px solid #272727;
     font-size: 50px;
     line-height: 60px!important;
     text-align: center;
     color: #272727;
     border-radius: 100%;
     -webkit-transition: margin-bottom 0.6s ease,opacity 0.3s ease;
     transition: margin-bottom 0.6s ease,opacity 0.3s ease;
}
 .x-navbar .x-nav-wrap .x-nav > li > a {
     font-family: "Poppins",sans-serif;
     font-style: normal;
     font-weight: 700;
     letter-spacing: 0.085em;
     text-transform: uppercase;
     padding-left:20px!important;
}
 .x-btn-navbar {
     padding: 0.458em 0.625em;
     text-shadow: none;
     color: #282560;
     background-color: #ffffffb8;
     border-radius: 4px;
     box-shadow: none;
}
 .x-navbar .mobile .x-nav li>a {
     margin: 0 0 -1px;
     border: 1px solid #f2f2f2;
     border-left: 0;
     border-right: 0;
     padding: 1em 0;
     color: #282560;
     background-color: #ffffffb8;
}
 .x-btn-navbar.collapsed:hover {
     color: #282560;
     background-color: transparent;
     box-shadow: none;
     text-shadow: none;
}
 .x-btn-navbar:hover {
     color: #282560;
     background-color: transparent;
     box-shadow: none;
     text-shadow: none;
}
 .x-btn-navbar.collapsed {
     color: #282560;
     background-color: transparent;
     box-shadow: none;
     text-shadow: none;
}
 .x-colophon .x-container.max.width {
     max-width:800px;
}
 .x-colophon .widget {
     margin-top: 0em;
}
 .footermenu {
     letter-spacing: 2px;
     text-align: center!important;
     line-height: 1.2;
     color: #fff!important;
     font-size: 15px!important;
     text-decoration: none!important 
}
 .button-green {
     text-shadow: none;
     z-index: 11;
     background-color: rgba(0, 0, 0, 0);
     font-family: Poppins;
     visibility: visible;
     text-align: left;
     line-height: 25px;
     letter-spacing: 2px;
     font-weight: 700;
     font-size: 19px;
     border-color: rgba(255, 255, 255, 0.35);
     border-style: solid;
     border-width: 2px;
     margin: 0px;
     border-radius: 25px;
     padding: 0px 20px;
     height: auto;
     width: auto;
     color: #fff;
     text-decoration: none;
     white-space: nowrap;
     min-height: 0px;
     min-width: 0px;
     max-height: none;
     max-width: none;
     transform-origin: 50% 50%;
     opacity: 1;
     transform: translate(0px, 0px);
}
 .button-green:hover {
     background-color:#282560;
}
 @media(min-width: 40px) {
     .masthead {
         position:absolute;
         width:100%;
    }
     .x-topbar, .x-navbar {
         background-color:transparent;
         border-bottom: none;
         box-shadow: none;
    }
     .x-navbar .desktop .x-nav > li > a {
         color:#fff;
    }
     .x-topbar, .x-topbar a {
         color:#fff;
    }
     .x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .current-menu-item > a {
         color: #4682b4 !important;
    }
     .x-topbar.x-topbar-fixed-top, .x-navbar.x-navbar-fixed-top {
         background:#fff;
    }
     .x-topbar.x-topbar-fixed-top, .x-topbar.x-topbar-fixed-top a {
         color:#000;
    }
     .x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
         color:#000;
    }
     .x-navbar.x-navbar-fixed-top .x-navbar-inner {
         z-index: 99999;
         top: 0px;
         position: fixed;
         clear: both;
         width: 100%;
         background-color: #fff;
         border-bottom: 1px solid #ccc;
         background-color: #fff;
         box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
    }
}
 .scroll-nav a.x-brand {
     width: 250px;
     height: 105px;
     display: block;
     background-size: cover;
}
 .scroll-nav a.x-brand img {
     display: none;
}
 .x-colophon {
     position: relative;
     border-top: none!important;
     background-color: #282560!important;
     box-shadow: none!important;
     text-align: center;
     padding-bottom: 20px!important;
}
 .footermenu {
     letter-spacing: 1px;
     text-align: center!important;
     line-height: 1.2;
     color: #fff!important;
     font-size: 18px!important;
     text-decoration: none!important 
}
 .x-colophon.top {
     padding: 20;
}
 .x-colophon.bottom .x-colophon-content {
     margin: 30px 0 10px;
     font-weight: 300;
     letter-spacing: 2px;
     line-height: 1.3;
     color:#fff;
}
 @media screen and (max-width:480px){
     .x-brand img{
         width: 250px;
         max-width:60%;
    }
 }

You are having this complicated issue because you were designing heavily for the selected pages and it has now been applied globally. You should have designed the header globally and then customize only for the selected pages or the pages with a blue banner header to avoid any further issues.

Best Regards.

#3

I have a work around by adding a slider to the header in the childs funcitons.php, but is there a more elegant way to do this in css? I just really need a background of that gradient behind the menu, so like you see with the slider.

Thanks.

#4

Hello @logoglo,

Please be advised that CSS cannot be use to add a slider in your header. CSS is just a formatting code while the slider has a complete element structure and styling in it.

You are most welcome.

#5

Thanks for your help.

#6

You are most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.