[bibianasilveiraParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Thanks for the login credentials!

The issue is due to the ConvertPlug plugin. When it’s activated, jQuery scroll event doesn’t trigger. This event calculates the navbar position when user scrolls and fixes it to the top. This only seems to be happening on blog or archive pages. That is why you are able to see it on other pages but not on the homepage that is set to display blog posts.

We’ve already submitted this issue to the plugin developer.

Thank you!

[scottkwilsonParticipant]

Hi there. I was able to use the guidance above to create an animated header that shrinks when the user scrolls down the page. This has gotten me very close to what I’m trying to achieve, except I would like the header to disappear first, then drop down onto the page in a smaller version. Here is an example of a site that does what I’m trying to achieve with my header. This is not my site… just sharing for reference.

http://www.rubbish-taxi.com/

[Rue NelModerator]

Hello There,

Thanks for updating this thread! Regretfully this isn’t a feature offered by X that the header will disappear first, then drops down onto the page in a smaller version. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[reelismParticipant]

Hi, was directed here by support.
I’ve added the suggested code (see below) but can’t see any easing, and the only change being that the menu jumps up (after changing heading padding on scroll). I do have other custom CSS – from posts on here that’s likely causing a problem.
Could you please help me?

As someone else said, the eased reduce in size effect on http://www.quaest.net/ is ideal.

Also – can I easily make the background go from transparent to semi-opaque at the same time?
(a perfect example: yet I’d probably break something if I used this code 😛 http://codepen.io/Paulie-D/pen/ekKru )

JS

jQuery(function($) {

$(window).scroll(function(){

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

});

}); 

CSS

.x-logobar {
    border-bottom: medium none;
}

.x-navbar {
    border-bottom: medium none;
}

.x-navbar .desktop .x-nav > li > a {
    border-left: medium none;
}

.x-navbar .desktop .x-nav > li:last-child > a {
    border-right: medium none;
}

.x-navbar {
    background-color: transparent !important;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  /*box-shadow: 0 2px 0 0 #ee0000;*/
  border-bottom: 0px;
  box-shadow: none !important;
} 

/* fixed top */
.x-navbar.x-navbar-fixed-top {
    background-color: white;
    height: 80px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 200px;
}

.x-navbar.x-navbar-fixed-top  .x-nav > li > a {
    padding-top: 30px !important;
}

/* remove header gap */
.home .masthead{

height: 0;
}

/* scroll */

.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: height 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: 5px;
}

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

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

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: min-height 0.5s ease;
-webkit-transition: min-height 0.5s ease;
}
.x-navbar-inner {
transition: min-height 0.5s ease !important;
-webkit-transition: min-height 0.5s ease !important;
} 

[LelyModerator]

Hi There,

Would you mind sharing your site URL so we can the implementation of above code on your site?

Always,
X

[reelismParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

To add a background color to your navbar as soon as you scroll the page, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar {
    background-color: transparent;
}

.x-navbar-fixed-top {
    background-color: rgba(0,0,0,0.35) !important; 
}

Hope this helps.

[reelismParticipant]

Hi, thanks but that was a secondary issue – the main one, as per this thread, is the shrinking header.

I added your CSS and yep – it provides a transparent background, yet it still doesn’t fade-in, the header size doesn’t change and any movement doesn’t ‘ease’ as intended.

The only CSS I’ve used is from these forums, could you please have a look and give me a working version that reduces in size? (Login and URL above).

Thanks,

🙂 Morgan

[LelyModerator]

Hi Morgan,

Please change this:

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

Above CSS cause the jumping of menu. Use this instead:

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 60px;
    padding-top: 20px;
    transition: padding-top 0.25s ease-in;
}

Please also update this:

.x-navbar.x-navbar-fixed-top{
   background-color:white;
   height:80px;
}

To this:

.x-navbar.x-navbar-fixed-top {
    background-color: white !important;
    height: 54px;
    transition: height 0.25s ease-in;
}

Then update this:

.x-navbar{
   background-color:transparent !important;
}

To this:

.x-navbar {
    background-color: transparent !important;
    height: 80px;
}

The transition will be header shrinking from 80px height to 54px height and the moving up of the menu.

Then remove the following custom 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:height 0.5s ease,padding-top 0.5s ease;
}

.x-navbar-inner{ 
   transition:min-height 0.5s ease !important;
   -webkit-transition:min-height 0.5s ease !important;
}

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

The result will be like this:http://screencast-o-matic.com/watch/cDh1QY1NoE

Hope this helps.

[reelismParticipant]

Hi, thanks for your help – wondering why/how you got a working demo of my site for screencast, yet didn’t make the changes live on my site? Is it policy for you guys to not make changes to client sites?

From the screencast I don’t see the requested change, apart from perhaps some easing on the menu as it ‘bumps up’.
– No reduction in size of logo.
– No fading-in of BG colour (as per: http://codepen.io/Paulie-D/pen/ekKru ).

Isn’t the purpose of this thread to show a Menu that ‘shrinks’/eases? I.e. navbar height eases smaller WITH logo. This is a common working menu on many sites, examples already in this thread:

http://www.kriesi.at/ – is ideal

If you guys can’t provide code for the above, can you please advise how to bypass the existing menu to code from scratch (jquery)?

Thanks,

Morgan

[RadModerator]

Hi there,

Some requested changes aren’t applied, I went ahead and fixed it. Please check.

Thanks!

[reelismParticipant]

Hi, thank you, yet noone has replied yet to my previous posts.
Are they appearing ok for you guys – above?
🙂

[ChristopherModerator]

Hi there,

I can see background color changes on scrolling.

Please add this :

a.x-brand.img.resize-logo img {
    width: 29px;
    transition: 0.3s linear;
}
a.x-brand.img img { 
    transition: 0.3s linear;
}

Add this JS as well :

jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 30) {
$('.x-brand').addClass("resize-logo");
} else {
$('.x-brand').removeClass("resize-logo");
}
});
});

Hope that helps.

[reelismParticipant]

Hi, thanks so much for your help.

I added the above on localhost and can see the eased logo shrink – great!

But after some tweaking, which didn’t make the nav text ‘shrink’, I don’t know what I should be changing in CSS to get the menu text displaying correctly.

Trying different height, padding, height on either of the below didn’t seem to make much difference

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

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

Can you tell me what CSS I should change?
Or maybe the new code broke the nav text layout?

See behaviour here (excuse the bad screencast crop and border – seems it’s buggy on hi-dpi screens, but see ‘intro’ text 😉 ):

Also updated on live : http://reelists.co/

.x-logobar {
    border-bottom: medium none;
}

.x-navbar {
    border-bottom: medium none;
}

.x-navbar .desktop .x-nav > li > a {
    border-left: medium none;
}

.x-navbar .desktop .x-nav > li:last-child > a {
    border-right: medium none;
}

.x-navbar {
    background-color: transparent !important;
      -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

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

/* fixed top */
.x-navbar.x-navbar-fixed-top {
    background-color: rgba(36, 39, 41,0.3)!important;
      -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 200px;
}

.x-navbar.x-navbar-fixed-top  .x-nav > li > a {
    padding-top: 30px !important;
}

/* remove header gap */
.home .masthead{

height: 0;
}

/* scroll */

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

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 60px;
padding-top: 20px;
}

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

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

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.x-navbar-inner {
transition: all 0.5s ease !important;
-webkit-transition: all 0.5s ease !important;
}

.x-logobar {
    border-bottom: medium none;
}

.x-navbar {
    border-bottom: medium none;
}

.x-navbar .desktop .x-nav > li > a {
    border-left: medium none;
}

.x-navbar .desktop .x-nav > li:last-child > a {
    border-right: medium none;
}

.x-navbar {
    background-color: transparent !important;
      -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

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

/* fixed top */
.x-navbar.x-navbar-fixed-top {
    background-color: rgba(36, 39, 41,0.3)!important;
      -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 200px;
}

.x-navbar.x-navbar-fixed-top  .x-nav > li > a {
    padding-top: 30px !important;
}

/* remove header gap */
.home .masthead{

height: 0;
}

/* scroll */

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

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
height: 40px;
padding-top: 60px;
}

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

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

.x-navbar.x-navbar-fixed-top .x-navbar-inner {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.x-navbar-inner {
transition: all 0.5s ease !important;
-webkit-transition: all 0.5s ease !important;
}

a.x-brand.img.resize-logo img { width: 88px; transition: 0.3s linear; } a.x-brand.img img { transition: 0.3s linear; } 

JS

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($){
$(window).scroll(function(){
if ($(this).scrollTop() > 30) {
$('.x-brand').addClass("resize-logo");
} else {
$('.x-brand').removeClass("resize-logo");
}

});

});

[Author]

Posts