Docs

[Kenrick C]

URL: http://www.ploquickpro.com/v1/brandviva/

QUESTION #1: I have the following set up for the CSS of the last menu item

#menu-item-10 {
    background-color: #cc3b38;
    margin-left: 10px;
    background-size: 125px 25px;
}

I’m trying to adjust the background size so it looks more like the “Start Here” button under the featured section, but the background-size is being ignored.

QUESTION #2: I would like to create a scroll effect similar to this SquareSpace mockup (https://goo.gl/PJ7R66 sign in as guest) where when the user scrolls the nav bar background becomes a solid color rather than being transparent. Adjusting the Navbar top height and logo size on scroll would also be cool, but not strictly necessary at this point.

How can I achieve this?

[Joao]

Hi There,

Please use this code bellow at your Appereance > Customizer > Custom > CSS for the button:

li#menu-item-10> a {
    padding-top: 18px;
}
li#menu-item-10 > a:hover > span {
    box-shadow: none;
}
li#menu-item-10 > a > span {
    background-color: #cc3b38;
    padding: 8px 10px;
    
}

Changing navbar color on scrolling :

Appereance > Customizer > Custom > CSS

.x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color:white;
}

Add to Appereance > Customizer > Custom > Javascript

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });

Change Navbar and logo size:

CSS:

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height12 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: 0;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

Javascript:

jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});

Note that all those settings will require a little adjusting in order to sit perfectly on your website.

Let us know how it goes.

Hope that helps,

Joao

[Kenrick C]

Thanks for the help Joao.

The menu item styling worked perfectly.

However, neither of those JS functions seem to work quite like I need. I added both the CSS and JS snippets to the cornerstone specific custom CSS/JS instead of the global ones because this page is a mockup and I don’t want it to affect the styling across the rest of the site at the moment.

The one that is supposed to add a solid background doesn’t seem to fire (I changed “white” to #000 to see if that was the problem but it didn’t work).

The one that is supposed to resize the logo I’d like to set the starting size to 100 pixels wide and then on scroll set it to 75px wide. I see what you did was to reference a specific image on the Squarespace site, which unfortunately won’t work as that site will be taken down. I’d rather have it resize using the uploaded image already on my WP site.

[Kenrick C]

Not exactly sure what happened but before your reply had the following JS:

jQuery(function($) {
  $(window).scroll(function() {
 var scrollPos = $(window).scrollTop();
   if($(".x-navbar").hasClass("x-navbar-fixed-top") && scrollPos > 100) {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png");
   } else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png");
   }
  });
});

Now that it has changed, the sizing is partly working (I just need to tweak), but the background color is still an issue.

This is what my CSS looks like based on what you gave me:

/*ADD TO GLOBAL LATER*/
li#menu-item-10> a {
    padding-top: 38px;
}
li#menu-item-10 > a:hover > span {
    box-shadow: none;
}
li#menu-item-10 > a > span {
    background-color: #cc3b38;
    padding: 12px 10px;
    
}
.x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color:#000;
}
.x-navbar.x-navbar-fixed-top .x-brand img {
    width: auto;
    margin-top: 10px;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 0.5s ease, padding-top 0.5s ease;
    transition: height12 0.5s ease, padding-top 0.5s ease;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 0.5s ease;
    transition: min-height 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 25px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 150px;
margin-top: 0;
}

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
min-height: 60px;
}

/*END ADD TO GLOBAL LATER*/

And this is my current JS:

//ADD TO GLOBAL LATER
jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
  

  jQuery(function($) {
  var $body   = $('body');
  var $navbar = $('.x-navbar');
  if ( $body.hasClass('x-navbar-fixed-top-active') && $navbar.length > 0 ) {
    var boxedClasses = '';
    if ( $body.hasClass('x-boxed-layout-active') ) {
      boxedClasses = ' x-container max width';
    }

    $(window).scroll(function() {
      if ( $(this).scrollTop() >= 60 ) {
        $navbar.addClass('x-navbar-fixed-top' + boxedClasses);
      } else {
        $navbar.removeClass('x-navbar-fixed-top' + boxedClasses);
      }
    });
  }
});
  
//END ADD TO GLOBAL LATER

Are those correct?

Part of the problem is also that the menu bar doesn’t reset to its load state when the page is all the way back at the top.

What would I change if I want the logo to start at 100px wide then go to 70px when scrolling and back to 100px when at the top?

How do I make the “PLO Blueprint” menu-item-10 align with the rest of the menu at all times?

[Joao]

Hi Kevin,

You were fast, as you noticed my message changed, I changed the code regarding the logo sizing, I had actually pasted you a code for logo swapping and I changed 20seconds later for the code that just resizes your logo, but you were fast enough 🙂

The size is not changing back because this is what the javascript does.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info so I can do some testing to provide you the correct code where everything will look balanced 🙂

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[Kenrick C]

This reply has been marked as private.

[Joao]

@RAD Hi Rad, Regarding his wanting to switch the logo that was my mistake, I gave him initially a JS code for logo switching and I realized he was looking for something else and I corrected but he was fast enough to pick the first JS.

He also did corrected it as you can se on his message, so ignore the first part of his JS posted and attached to the third code block that is the one he is apparently using now.

@Kenrick, Hi kenrick I can confirm I also could not login on the page you want to edit using the credentials given. I could access your old site but could not find this page.

Let us know the right credentials so we are able to help you.

Joao

[Kenrick C]

This reply has been marked as private.

[Christopher]

Hi there,

Please update you JS code to :

jQuery(document).ready(function($){
			$('.x-navbar-fixed-top').addClass("transparent-navbar");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 70) {
			$(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/32x32.png");
		} else {
      $(".x-navbar-fixed-top .x-brand img").attr("src","//nvision.work-planning.com/wp-content/uploads/2016/05/nVision_red_med_strak.png");
		}
	});
});

Hope it helps.

[Kenrick C]

Hello Christopher. Please refer to the posts from Joao and myself above yours.

I don’t want to switch to different logos (even if I did the links you used aren’t on my server and wouldn’t work because they are Squarespace) what I need is for the logo to start at 100px wide then go to 70px when scrolling and back to 100px when at the top.

I’d also like the starting nav bar to be 110px high with a transparent background and change to 75px high with the background-color: #212121 when scrolling, but go back to the original height and a transparent background when the page is back at the top.

I also don’t understand what exactly you mean by “update your JS code”. Are you saying to erase the code from Joao and replace it with yours or to add yours below his?

[Rue Nel]

Hello There,

Sorry for the confusion. The logo at the moment is set to 70 pixels only. Please change your setting in the customizer, Appearance > Customize > Header > Logo – Image and set the “Logo Width (px)” to 200. When it is display on the frontend, it will be 100 pixels. And using Joao custom JS, you can achieve a 70 pixels logo when you scroll on the page. By having a js code like this:

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

And with this custom css, you can control the size of the logo:

.site .x-navbar .x-brand {
  width: 100px;
}

.site .x-navbar.x-navbar-solid .x-brand {
  width: 70px;
}

I wanted to test this code in your site but there are codes already present which would complicate thing. I would recommend that you can do a reset or set aside the other codes that you may have before testing the suggested code above.

Hope this helps.

[Kenrick C]

@Rue Nel AWESOME! It is almost perfect now.

This is what my CSS looks like:

/*ADD TO GLOBAL LATER*/
#menu-item-10 {margin-top:-11px;}
#menu-item-10 > a:hover > span {
    box-shadow: none;
}
#menu-item-10 > a > span {
    background-color: #cc3b38;
    padding: 12px 10px;
    
}
.site .x-navbar .x-brand {
  width: 100px;
}

.site .x-navbar.x-navbar-solid .x-brand {
  height: 70px !important;
}
.x-navbar-wrap {
     height: auto !important;
}

 .x-navbar {
     background-color:transparent;
     border:0;
     box-shadow:none;
     position: fixed;
     width:100%;
}

 .x-navbar-solid {
     background-color:#212121;
}
/*END ADD TO GLOBAL LATER*/

This is my JS now:

//ADD TO GLOBAL LATER
jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});
  
//END ADD TO GLOBAL LATER

The only thing that doesn’t seem to work is the logo resize on scroll and the only thing I would need to add is:

1) Some padding to the logo for when it resizes so it is still in the right spot
2) For the navbar to go from 110px in height to 75px in height
3) To adjust the location of the menu items so they align with the logo in the center of the new height navbar

I will try to play around with it, but JS is beyond me so any help would be greatly appreciated.

[Christopher]

Hi there,

Please add this :

.x-navbar.x-navbar-fixed-top.x-navbar-solid .x-brand img {
    width: 50%;
    transition: all 0.1s linear;
}
.x-navbar.x-navbar-fixed-top .x-brand img, .x-navbar.x-navbar-fixed-top li a {
    transition: all 0.2s linear;
}
.x-navbar.x-navbar-fixed-top.x-navbar-solid {
    height: 75px;
}
.x-navbar.x-navbar-fixed-top.x-navbar-solid .desktop .x-nav > li > a {
    padding-top: 34px;
}

Hope it helps.

[Kenrick C]

Awesome! Now I just need to play with the numbers! Thanks for all the help support team, you guys are what make X theme great.

[Christopher]

Thanks for you kind words and you’re welcome.

[Author]

Posts