[jordanfreundParticipant]

Hi.

I have a client that I’m about to build a website for.
I WANT to use the X theme, except there are a couple features that are NON-negotiables for the client.

1.
The client wants the header to disappear (non sticky) when you scroll down the page, but then reappear as a sticky nav when scrolling up. Here is the theme the client found that does this so you can see exactly what I mean if it doesn’t make sense:
http://demo.olevmedia.net/amax/

2.
Another feature the client wants that this theme above also includes is what I think is called “polygon” — basically if you look at the theme, you’ll see that red section bleeds down into the white div below in the shape of an obtuse “V” — almost like the red section is pointing down to the white section. I’m sure you’re more familiar with this than I am and know what it’s actually called.

Anyway, please let em know if these things can be done in X theme, otherwise I’ll have to pass on using X theme this time. And I should note that I would need these things to work even when the theme automatically updates — can these be done in child sheet or child functions?

Thank you!

– Jordan

[FriechModerator]

Hi Jordan,

Thanks for writing in! The polygon thing can be achieve with this code on RAW content element

<div class="someclass"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="70" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,-10 0,110 100,110 100,-10" fill="#ffffff"></polygon><polygon points="0,-10 100,-10 100,0 50,100 0,0" fill="#f94f41"></polygon></svg></div>

Basically, its a Section with two or multiple ROWs which the last rows is dedicated for the polygon.

The other feature requires a custom development, though there is a instruction here on how to make the fixed navbar transparent on scroll. Same function with the sample site minus the transition effect.

Hope it helps, Cheers!

[jordanfreundParticipant]

wow,awesome. thank you. Is there a Javascript child sheet where i can add that script for the navigation like i can add the css to the css child sheet? My concern is losing those custom edits on updating the theme.

[jordanfreundParticipant]

Actually, this isn’t what I was asking for. This makes the nav section transparent (or whatever color) on scroll.
What i want is the header to act as normal when NOT sticky as you scroll down, but then if i start to scroll up, the nav header becomes sticky. please see the example here: http://demo.olevmedia.net/amax/ — scroll down and watch the header disappear (as it’s not fixed — not sticky), I’m not saying it’s transparent. Then watch it become a sticky header as you scroll up from wherever you are on the page. It’s actually an amazing feature that I’ve never seen anywhere else. Ans like I said, for this client it’s non negotiable.
Please let me know. thanks.

Side note,

In Appearance > Customize > Custom > Javascript <— does whatevr I put in this section remain regardless if I update the theme or not? thanks.

Same questions for Appearance > Customize > Custom > CSS

[RadModerator]

Hi there,

They will not overwritten by theme and plugin updates. But they can be corrupted if something happen to database. It should be okay.

About the navbar, please add this code at your customizer’s custom javascript.

jQuery ( function($) {

var tempscroll = 0;
$(window).scroll(function(event){
   var scrollTop = $(this).scrollTop();
   if (scrollTop > tempscroll){ //Remove fixed positioning when scrolling down
      if ( $('.x-navbar').hasClass('x-navbar-fixed-top') ) $('.x-navbar').removeClass('x-navbar-fixed-top')
   } 
   tempscroll = scrollTop;
});

} );

Cheers!

[jordanfreundParticipant]

I tried this code and it totally jacked up my site — even after i deleted the script the site is still jacked up

[jordanfreundParticipant]

When I activate the theme instead of the child theme it goes back to normal but when i activate my child theme my site is totally jacked up. again even after i deleted the code you gave me

[Paul RModerator]

Hi,

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.

[jordanfreundParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please navigate to child theme/style.css file and update @import statement to :

@import url( '../x/framework/css/dist/site/stacks/renew.css' );

Thanks.

[jordanfreundParticipant]

Awesome! you rock. that fixed the child sheet issue and that jQuery now works.

Here is my site:
http://www.birthmattersinc.com/

Is there any way to make that header appear with a more subtle transition? It kinda just flashes. I don’t know script. This is the transition I’m trying to go for: http://demo.olevmedia.net/amax/

— It kinda pops down from the top as you begin to scroll up.
Thanks for the help!

[jordanfreundParticipant]

Also, I am interested in (for a different client) doing this same function but only with the topbar instead of the entire header. Could the topbar disappear on scroll down and appear when scrolling up?

This request is of lower importance to me than the previous request of having a subtle transition for the appearance of the header upon scrolling up 🙂 Thanks!

[ChristopherModerator]

Hi there,

#1 Please add the following code in Customize -> Custom -> CSS :

.x-navbar.x-navbar-fixed-top, .x-navbar {
    transition: all 0.5s;
    webkit-transition: all 0.5s;
}

#2 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.

Hope it helps.

[jordanfreundParticipant]

I couldn’t get this transition to css to work. The header just appeared as normal.
But I understand some of this support may not fall under normal x theme support so for #2 I will check with a developer, but as far as #1 If I can just get the transition to work I’d be ready to use this theme for another client. Again here’s my website for reference: http://www.birthmattersinc.com/ —the transition CSS is added to the custom section of the customizer.

[RupokMember]

Hi there,

Thanks for updating. Unfortunately transition won’t work this way by CSS. You need to add this with jQuery but for this jQuery UI is needed too. It would be outside of our support scope. So when you are able to consult a developer, kindly ask him to integrate that.

Thanks for understanding.

[Author]

Posts