Docs

[Debbie L]

X Theme 4.5.2
Cornerstone 1.2.4
Wordpress 4.5.3
Renew Stack
My website is under development on a HOST file access only, so I am unable to show you the issue first hand.
I have made the header inline and added code so that it is a larger header at the start and when scrolling it shrinks back smaller. When I return to the top of the page it goes back larger. This all works very nicely.
However, since doing this the Section 1 of each page is now hidden up underneath the navbar. I have to add 100px to the padding to have it drop down far enough to see it.(see attached image)
So this becomes an issue when the screen size drops down to mobile view and there is a heap of padding.
Can you assist with any possible solutions. I appreciate your help.
Cheers
Deb

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

Hope that helps.

[Debbie L]

Hi Christopher
Yes, that worked. Thanks very much.
Just another question …. is there another setting that makes that transition from large navbar to small navbar
smoother ? At the moment as soon as I scroll once it is immediate “bang” .. large to small …
there is nothing smooth about it. Not sure if that makes sense. I have attached two images.
Just would like a smoother transition.
I appreciate you assistance once again.
Cheers

[Debbie L]

The images were too big. The previous one I sent was the large logo. This one attached is the smaller version.

[Christopher]

Hi there,

Please share the code that helped you to shrink the header.

Thanks.

[Debbie L]

Thanks for taking a look Christopher.

CUSTOMISER SETTINGS:
The logo header width is set to 280px

.x-navbar {
background: url( http://www.corecider.com.au/wp-content/uploads/2016/07/nvbar-background.jpg)!important ;background-size: cover;
-webkit-box-shadow: 0 5px 5px 0 rgba(0,0,0,0.5);
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.5);
}

.x-navbar-fixed-top {
background-color: #000000;
height: 80px;
}
.x-navbar-fixed-top .x-brand {
font-size: 10px;
}
.x-navbar.x-navbar-fixed-top .x-brand img {
max-width: 70px;
width: 80px;
}
.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 35px;
padding-top: 50px;
}
.x-navbar-fixed-top .x-navbar-inner {
min-height: 88px;

}
.x-navbar-fixed-top, .x-navbar-fixed-top .x-navbar-inner {
height: 85px;
}
.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 61px;
padding-top: 39px;
}

body .x-navbar .x-container {
position: static;
}

body .x-btn-navbar{
color: #fff !important;
background-color:transparent !important;
}

body .x-btn-navbar.collapsed {
color: #b5be34 !important;
background-color: transparent !important;
}
.x-btn-navbar.collapsed:hover {
color: #000000!important;
}

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: none !important;
}

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);
}
});
}
});

[Christopher]

Hi there,

Please add this :

.x-navbar-fixed-top,.x-navbar,.x-navbar-fixed-top .x-brand,.x-navbar-fixed-top .x-navbar-inner{
	transition:all 0.3s linear;
}

If you need further assist, please provide us with URL.

Thanks.

[Debbie L]

Thanks very much.
That code didn’t make any change.
As mentioned at the beginning of thread I am on a new development site that I access through a change in the HOST file on the Windows of my computer. So I am unable at this time to provide a URL for your viewing.

[Christopher]

Hi there,

I’m sorry but we really need to check your site in order to provide you with tailored solution.
Please upload your site in staging URL if it’s possible.

Thanks.

[Debbie L]

Yes, I understand … I know I was asking a difficult task without access to the site.
I will leave it for now and come back when it is live and able to be seen working.
I really appreciate your help.
Cheers

[Thai]

Let us know when your site is live.

Regards!

[Author]

Posts