Docs

[Edg-C1]

Hi !

I would like to know how to do nav bar like this web site.
Actually, my logo and my nav bar reduce when I scrolling, but my tab doesn’t follow the logo like this website:
http://restaurantleduc.com/

My css is:

/*BEGIN resize nav top*/
@media (min-width: 980px) {
.x-navbar .x-navbar-inner,
.x-navbar .x-brand img,
.x-navbar .desktop .x-nav > li > a {
transition: 0.25s all linear;
}

.x-navbar.navScroll .x-navbar-inner {
min-height: 60px;
transition: 0.25s all linear;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.x-navbar .x-brand.img {
margin-bottom:5px;
}

.x-navbar.navScroll .x-brand img {
width: 60px;
}
.x-navbar.navScroll .x-brand{
margin-top:10px;
}

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

/*END resize nav top*/

My jQuery is:
jQuery(function($) {

$(window).scroll(function(){

if($(this).scrollTop()<=0) {
$(‘.x-navbar’).removeClass(‘x-navbar-fixed-top x-container-fluid max width’);
}

});

});

jQuery(document).ready(function($) {

// BEGIN resize nav top
$(window).scroll(function() {
var scrollPos = $(window).scrollTop(),
navbar = $(‘.x-navbar’);

if (scrollPos > 150) {
navbar.addClass(‘navScroll’);
} else {
navbar.removeClass(‘navScroll’);
}
});
//END resize nav top

var $window = $(window);
var $this = $(this);
var $body = $(‘body’);
var $navbar = $(‘.x-navbar’);
var $topbar = $(‘.x-topbar’);
var $logobar = $(‘.x-logobar’);
var $navbarWrap = $(‘.x-navbar-fixed-top-active .masthead’);

if ( ! $body.hasClass(‘page-template-template-blank-3-php’) && ! $body.hasClass(‘page-template-template-blank-6-php’) && ! $body.hasClass(‘page-template-template-blank-7-php’) && ! $body.hasClass(‘page-template-template-blank-8-php’) ) {
if ( $body.hasClass(‘x-boxed-layout-active’) && $body.hasClass(‘x-navbar-fixed-top-active’) && $body.hasClass(‘admin-bar’) ) {
$window.scroll(function() {
var $adminbarHeight = $(‘#wpadminbar’).outerHeight();
var $menuTop = $navbarWrap.offset().top – $adminbarHeight;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass(‘x-navbar-fixed-top x-container-fluid max width’);
$topbar.addClass(‘x-topbar-fixed-top x-container-fluid max width’);
$logobar.addClass(‘x-logobar-fixed-top x-container-fluid max width’);
} else {
$navbar.removeClass(‘x-navbar-fixed-top x-container-fluid max width’);
$topbar.removeClass(‘x-topbar-fixed-top x-container-fluid max width’);
$logobar.removeClass(‘x-logobar-fixed-top x-container-fluid max width’);
}
});
} else if ( $body.hasClass(‘x-navbar-fixed-top-active’) && $body.hasClass(‘admin-bar’) ) {
$window.scroll(function() {
var $adminbarHeight = $(‘#wpadminbar’).outerHeight();
var $menuTop = $navbarWrap.offset().top – $adminbarHeight;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass(‘x-navbar-fixed-top’);
$topbar.addClass(‘x-topbar-fixed-top’);
$logobar.addClass(‘x-logobar-fixed-top’);
} else {
$navbar.removeClass(‘x-navbar-fixed-top’);
$topbar.removeClass(‘x-topbar-fixed-top’);
$logobar.removeClass(‘x-logobar-fixed-top’);
}
});
} else if ( $body.hasClass(‘x-boxed-layout-active’) && $body.hasClass(‘x-navbar-fixed-top-active’) ) {
$window.scroll(function() {
var $menuTop = $navbarWrap.offset().top;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass(‘x-navbar-fixed-top x-container-fluid max width’);
$topbar.addClass(‘x-topbar-fixed-top x-container-fluid max width’);
$logobar.addClass(‘x-logobar-fixed-top x-container-fluid max width’);
} else {
$navbar.removeClass(‘x-navbar-fixed-top x-container-fluid max width’);
$topbar.removeClass(‘x-topbar-fixed-top x-container-fluid max width’);
$logobar.removeClass(‘x-logobar-fixed-top x-container-fluid max width’);
}
});
} else if ( $body.hasClass(‘x-navbar-fixed-top-active’) ) {
$window.scroll(function() {
var $menuTop = $navbarWrap.offset().top;
var $current = $(this).scrollTop();
if ($current > $menuTop) {
$navbar.addClass(‘x-navbar-fixed-top’);
$topbar.addClass(‘x-topbar-fixed-top’);
$logobar.addClass(‘x-logobar-fixed-top’);
} else {
$navbar.removeClass(‘x-navbar-fixed-top’);
$topbar.removeClass(‘x-topbar-fixed-top’);
$logobar.removeClass(‘x-logobar-fixed-top’);
}
});
}
}

});

Thank you

[Joao]

Hi There,

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:

– 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

[Author]

Posts