[Angus MParticipant]

I’m trying to create a fixed header that resizes the size of the logo and the hight of the navbar when the visitor scrolls. I’ve attempted to implement the code found here. I tried putting the code in the custom javascript section in customize replacing “#header_nav” with “.x-navbar” using a class selector instead of an id selector but it did not work.

i had some success in changing the hight of the nabber by changing the css for x-navbar x-navbar-fixed-top but it does not look that clean. any ideas?

thanks
visualteachingtechnologies.com/

[RadModerator]

Hi there,

Thanks for writing in.

The code will not work, the one that giving height from your navbar are your menu items.

Add this css at your customizer’s custom css,

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 2s, padding-top 2s;
    transition: height 2s, padding-top 2s;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 2s;
    transition: min-height 2s;
}
.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: 100px;
}

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

Then add this code at your customizer’s custom javascript.

jQuery(function($) {

$(window).scroll(function(){

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

});

});

Hope this helps.

[Angus MParticipant]

Very cool! this is exactly what i wanted! thank you

Is there a way to make a smoother transition from the top menu to the scroll menu?
also i would like for the scroll menu to have a different logo image of just the globe.
here is the path to the image i want to use

http://visualteachingtechnologies.com/wp-content/uploads/2015/01/VTT-Logo_without-text.png

thanks
-Angus

[RadModerator]

Hi Angus,

Great to hear that!

But since you already applied those code, I can’t no longer add or modified that existing code. I’d like to quick test some easing animation.

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
– FTP credentials

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

Thanks!

[Angus MParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please try adding this 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-inner {
transition: min-height 0.5s ease !important;
-webkit-transition: min-height 0.5s ease !important;
}

And change this code :

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand, .x-navbar .x-navbar-inner {
    -webkit-transition: height 2s, padding-top 2s;
    transition: height 2s, padding-top 2s;
}

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

To this :

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

Hope it helps.

[Angus MParticipant]

Thank you! this is looking great.
do you have any ideas on the image change

“I would like for the scroll menu to have a different logo image of just the globe.
here is the path to the image i want to use

http://visualteachingtechnologies.com/wp-content/uploads/2015/01/VTT-Logo_without-text.png“

is there a way i can get the image to change at the same speed as the navbar? as of now it just seems to jump between big and small and there is no transition.

I am hoping for something like this
http://www.kriesi.at/support/topic/how-to-change-height-and-opacity-non-fixed-header/

both the actual navbar on the page as well as the solution.

Thank you very much!
Angus

[ChristopherModerator]

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. 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!

[DC_MediaParticipant]

Hi there,

We included the code as suggested and everything works fine so far. Except that we’re experiencing still a “jumping” logo. It would be great if you guys could help us to make it a more smooth transition, like in the same speed as the navbar (the logo should resize to the smaller version when scrolling down similarly).

See: http://www.quaest.net/cms/

Thanks a lot in advance!

Best,
Darius

[DC_MediaParticipant]

Hi Theme.co Support Team,

unfortunately I can’t read your reply, since it was marked as private.

Best
Darius

[ZeshanMember]

Hi Darius,

We’re sorry for that! We’d really love to help you with the customization, however this kind of customization will need more time for coding and it is beyond the scope of support. It’s best to contact developer with dedicated time of this coding or You might want to contact our trusted partners who caters X setup and customization needs. Please see Our Trusted Cuztomization Partners

Thanks for understanding.

[bibianasilveiraParticipant]

Thanks! Used this for my website http://www.bergamotadesign.com and worked like a charm!
Except for the image size transition, which is very abrupt. Tried changing it, but no luck. I would like the size transition to be smoother, is that possible? Thanks

My 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 .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;
}

[LelyModerator]

Hi There,

Upon checking, your site navbar is not fixed top so I can’t see the abrupt change. Please adjust .5s. Try something like 2s. .5s is too quick.

Hope this helps.

[bibianasilveiraParticipant]

Yeah, about the header. It’s set to fixed top, but that only works sometimes, and I can’t figure out why.

For example, the fixed top seems to work in this page http://www.bergamotadesign.com/como-fazer-o-seu-e-book/, but not on the home page…

Can you help with that? I’m attaching my code, maybe I did something wrong there…

CSS

.menu-item,cite,.entry-date,#jp-relatedposts,footer, .x-recent-posts-date, .p-info,.x-btn, .button, [type="submit"],.x-breadcrumbs {font-family:'Roboto Condensed', sans-serif;font-weight:400;}

.x-topbar .p-info,.x-social-global,.x-logobar {border:0;padding:16px 0;}

.x-topbar .x-social-global a {width: 40px;height: 32px;font-size: 28px;}

.x-btn, .button, [type="submit"],.x-btn:hover, .button:hover, [type="submit"]:hover,.x-scroll-top {text-shadow:none;text-transform:uppercase;border-width:2px;}

blockquote{font-family:'Libre Baskerville', serif;border:0;}
.x-scroll-top:hover,{background:#ffdd17;}

.x-colophon.bottom .x-social-global a{font-size:32px;}

.x-navbar .desktop .x-nav>li>a>span,.x-navbar .desktop .x-nav>li>a>span:hover,.x-navbar .desktop .x-nav>li>a>span:active,.x-navbar,.x-topbar,.entry-featured,.x-breadcrumb-wrap,.entry-wrap{border:0;}

.alignleft {margin: 0.35em 2.5em 2em 0;}

.alignright {margin: 0.35em 0 2em 2.5em;}

.wp-caption>.wp-caption-text, .wp-caption>.wp-caption-text:last-child, .gallery-item>.wp-caption-text, .gallery-item>.wp-caption-text:last-child{text-transform:none;line-height:1.8em;}

.single .entry-thumb,.entry-featured .entry-thumb,.single-post .entry-featured,.entry-featured,.more-link{display: none !important;}

h2.entry-title{line-height:1.4em;}

.x-iso-container-posts>.hentry .entry-wrap,.hentry .entry-wrap, .search-results .x-container>.product .entry-wrap{border:0;}

p a{text-decoration:underline;}

.est-time{text-align:center;padding-top:1em;opacity:.6;}

.blog .est-time,.archive .est-time,.category .est-time {display: none !important;}

.cp-newsletter .cp-msg-container, .cp-newsletter .cp-msg-container{font-family:'Roboto Condensed',sans-serif;font-weight:400;padding:20px 0;}

.ib-form-container .cp-email, .ib-form-container .cp-name{border-radius:0;margin-bottom:10px;}

.cp-info-bar input, .cp-info-bar input::-webkit-input-placeholder{font-size:12px;}

.page-id-7201 .form-search .search-query,.page-id-7201 .form-search input[type="search"],.page-id-7201 .widget_product_search form .search-query,.page-id-7201 .widget_product_search form input[type="search"] {border-radius: 0;font-size: 40px;border: #000 solid;padding-left: 70px;}

.page-id-7201 .form-search:before,
.page-id-7201 .widget_product_search form:before {font-size: 30px;line-height: .6;left: 30px;}

.page-id-7201 .x-recent-posts a,.page-id-7201 .x-recent-posts .x-recent-posts-content,.page-id-7201 .x-img-thumbnail,footer.x-colophon.top,footer.x-colophon.bottom,.x-widgetbar{border: 0}

.page-id-7201 .x-recent-posts .x-recent-posts-content {visibility: hidden!important}

.page-id-7201 .x-navbar-wrap {display: none;visibility: hidden;}

.page-id-7201 .x-breadcrumb-wrap,.page-id-7242 .x-breadcrumb-wrap  {display: none;}

@media only screen and (min-width: 1024px) {.page-id-5469 .entry-content.content > h2,.page-id-5469 .entry-content.content > h3,.page-id-5469 .entry-content.content > p,.single-post .entry-content.content > h2,.single-post .entry-content.content > h3,.single-post .entry-content.content > p{margin-left:64px;}.page-id-5469 .entry-content.content > p .single-post .entry-content.content > p{ margin-right:64px;}.page-id-5469  .entry-content.content > p > a > img,.single-post .entry-content.content > p > a > img{margin-left:-64px;}}

.widget_tag_cloud .tagcloud a, .widget_product_tag_cloud .tagcloud a{color:#000000;font-size:60%}

#recentcomments > li,ul > li.cat-item{text-transform:none;font-size:75%}

.widget_recent_comments .url,#recentcomments > li > span{font-size:100%;}

#menu-rodape a,.widget p,.widget span{font-family:'Libre Baskerville', serif;font-size:70%;text-transform:none;}

.widget h4{font-size:120%;}

.widget ul li, .widget ol li,.widget ul, .widget ol,.widget ul li:first-child, .widget ol li:first-child{border:0;}

.x-navbar-fixed-top,.x-widgetbar.collapse.in{box-shadow: 0px 5px 15px rgba(0,0,0,.3);}

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

.x-navbar .desktop .x-nav > li > a, .x-navbar .x-brand {
    -webkit-transition: min-height 2s ease;
    transition: min-height 2s 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

(function($){$('.cfc-h-tx.tt-upper').text('Digita e aperta “ENTER” pra buscar');
})(jQuery)

jQuery(function($) {

$(window).scroll(function(){

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

});

});

[ChristopherModerator]

Hi there,

Please provide us with login credentials so we can take a closer look.

Thanks.

[Author]

Posts