Changes in update to 1.2.2 (#site-navigation.fixed)

Hello there,

I have mentioned before how much I like you theme. I do have a question regarding the update to 1.2.2:

It seems like you have eliminated the class “.fixed” for the nav (#site-navigation). This is a little bit of a problem for me, since I have used it in such a way, that the background color of the menu site-navigation changed, when the page is scrolled down. This nbrought in a nice effect which I really would miss, if it would be gone forever.

Any ideas how that can be adjusted?

Thank you so much for getting back on this issue!

Martin

Hi there

Martin Hope you are having a good day and thank you loving our theme
Can you tell me more about your problem? I need URL of your website
I’m not sure what the .fixed class was doing in the theme but maybe I can help you differently?
Thanks!
Colorlib Support Team

Dear Noda,

I am using the theme on two sites, that are under development, so they are not really live.
I had to go back to version 1.2.1 because of the change I have mentioned.

You can find the sites here:

http://events.cgdu.de
https://www.poimen.de

You can see, that the main menu will disappear when you scroll down and then an alternative menu appears, that has a different background color.

In the code of 1.2.1 the second menu had the classes .fixed and .scrolled. I used these classes to define the different layout in my vustom css…
With 1.2.2 the custom css does not work anymore and when looking at the code i can not find the classes . fixed and.scrolled so I am assuming this is the reason why…

Sorry, the second url is http only as well, so it is:

http://www.poimen.de

Hello there,

I hope you are doing well today.

Please go to Appearance > Customize > Theme Options > Main Options > Sticky Header and enable the sticky header there.

This will ensure the header remains fixed.

Best Regards,
Support

Hello again,

thank you so much for trying to help, but this doesn’t turn out to help… I already had sticky header turned on but unfortunately the effect I was able to create with Version 1.2.1 doesn’t’t work anymore. So I am still going back to 1.2.1.

Have you checked the sites I gave you ( http://events.cgdu.de and http://www.poimen.de )? Actually with the old version (1.2.1) the were different classes. When the nav #site-navigation was on top after the page loaded without scrolling it down at all it only has the class .main-navigation
When you scroll down the classes change and then it has: .main-navigation.outOfSight.fixed.scrolled

These different classes helped to to some nice customization using custom css. With the new version (1.2.2) these additional classes do not show up any more, when I look at the code.

Is there a way to get them back or do I have to stick with the old version of the theme?

Best regards and thank you for your willingness to help!

Martin

Hi Martin,
Thanks for writing back.
In this case, would it be possible for you to create a staging site for one of those sites and on it upload that theme version you are suggesting so that we can check on the discrepancies here. You can use this plugin (WP STAGING – Backup Duplicator & Migration – WordPress plugin | WordPress.org) to have one set up.

I look forward to your reply.
Best Regards,
Support.

Hello again,

Thank you for your willingness to help. I will set up the staging site, but since I am traveling now I will do this when I am back, so it will probably be next Monday. Will let you know as soon as I am done …

Best regards

Martin

Hi Martin,
Thanks for the update.
In the meantime, you can also try out this code under the Appearance>Customize>Additional CSS section and check whether it helps:

header#masthead {
position: fixed;
z-index: 999;
}

Best Regards,
Support.

Hello again,

I found some time to set up the staging site. The url for admin login would be this:
http://events.cgdu.de/open-fire/wp-admin/

your credentials are:
user: colorlib
pw: eGb@y37idFnZMEnW#gvnjUbY

I have tried the code you gave me in your last reply. Unfortunately it does not work. But actually I thought it would not, because I think the issue is a different one. I have the staging site now rolled back to shapely 1.2.1 right now. If you load any page and do not scroll down, you will find this code in the html (using the inspector tools of the webbrowser):
<nav id=“site-navigation” class=“main-navigation” role="navigation“>

If you scroll down the page this line of code will change to:
<nav id=“site-navigation” class=“main-navigation outOfSight” role=“navigation”>

With version 1.2.2 the line remains unchanged, it does not matter if you scroll down or not, it just will be:
<nav id=“site-navigation” class=“main-navigation” role=“navigation”>

It probably is a simplification, but I am loosing a great opportunity to use custom css to have different styles for the navigation bar when the page is on top versus when it is scrolled down. This makes total sense especially when using transparency as you can see, when you look at the site. You maybe able to understand what I have been doing if you look into my custom css (I am using the plugin “Simple Custom CSS”, but there is a lot of code in there.
If you click on Design>Benutzerdefiniertes CSS you can see what I did. The interesting part may start at line 495 but especially 509 to 511 and 540 to 543 (sorry that it is not in perfect order, but this was written when I worked on the site and I did not yet to find time to clean it up a bit).

So I guess my question would be: can we have the classes (class=“main-navigation outOfSight”) back, or do I have to stay with 1.2.1?

Once again, thank you for looking into this. We will see how it goes.

Best regards

Martin

Sorry, I have to correct myself.

When scrolling down the page the code first changes to:
<nav id=”site-navigation” class=”main-navigation outOfSight” role=”navigation”>

and then to
<nav id=”site-navigation” class=”main-navigation outOfSight fixed scrolled” role=”navigation”>

So the classes that are missing are not longer available after the update are: class=”main-navigation outOfSight fixed scrolled”

I am especially using .fixed and .scrolled to adapt the style of the sticke nav-bar …

I have been trying to find an answer as why the whole issue occurs. Now it seems too me, that actually this wasn’t planned from your end at all. I found the lines of code in shapely_1.2.2/assets/js/shapely-scripts.js

It starts at line 489 to line 511. The code is:


/* Function To

  • keep menu fixed
    **/
    function updateNav() {
    let scroll = $( window ).scrollTop();
    let windowW = jQuery( window ).width();
if ( windowW &lt; 992 ) {
  return;
}

if ( scroll &gt; clNavOuterHeight ) {
  clNav.addClass( 'outOfSight' );
}

if ( $( window ).scrollTop() &gt; ( clNavOuterHeight + 65 ) ) {//If href = #element id
  clNav.addClass( 'fixed scrolled' );
}

if ( 0 === $( window ).scrollTop() ) {
  clNav.removeClass( 'fixed scrolled outOfSight' );
}

}


As I read it it should be exactly the same as in version 1.2.1 but for some reason it does not add the classes (at least in my installation) and this is why the issue concurs I believe. Is that possible?

Best regards

Martin

hi Martin

To be honest, I’m lost in your messages :smiley: its really not necessary to provide such a big amount of details, what we only need is to know, “i have this problem… 2-3 words” we will check everything, when customer posts so many things this makes ticket, even more, complicated to understand, we know everything in the theme what and where to check it and its not necessary to provide so many details :wink:

now, you created staging site here:
http://events.cgdu.de/open-fire/
where theme version is till not updated, i tried and i cant update your theme, can you please update the theme and let us replicate the problem on the site? at this moment sticky menu is working normally,
Also, one important thing, please deactivate all your third-party plugins on the website where you have this problem and check again, this is necessary step to check, let me know results

Hi Noda,

I am sorry, I did not want to confuse you - my apologies.

Problem: my custom css code for the nav-bar (nav id=”site-navigation”) does not work anymore with the update. It is based on the classes .fixed .scrolled which seem to have disappeared with the upgrade to version 1.2.2

  • The staging site now is updates to 1.2.2
  • if you compare the behavior of the staging site to the live site you see the difference when you scroll a page
  • I have deactivated all plugins and it still is the same problem

I hope this is less confusing and again, thank you very much for helping!

Best regards
Martin

Same problem after update with header menu. Not fixed whle scrolling :frowning:

Hello there,

I just want to cover my bases here, have you added any new CSS or other code to the theme?

Best Regards,
Support

Greetings from my end!

All CSS Code I have used for the website is only written inside the plugin (simple custom css), nothing changed in the theme. All other files are unchanged as well.

But I have found the line of code that changed the behavior and would like to share it with you. Not sure if it is the right thing to do so, Would you want me to post it here?

Best regards!

Martin

Martin are you sure this theme is not modified? from what i see it is, parallax sections is above the navigation menu?? can i delete this theme and install one from the wordpress.org?

Hello Noda,

like I said before: all changes are inside the “Simple Custom CSS” - plugin. Also I am not quite sure, what you mean, when you say the parallax section is above the navigation menu (I have attached two screenshots and wonder if you see anything different)?
Since you have access to the staging site of course you could also install the theme fresh from wordpress.org. My suggestion would be to first deactivate the “Simple Custom CSS” - plugin and see, if the theme behaves like you would expect it. If it does not you could reinstall the theme?

Also: as mentioned before I have found the change from version 1.2.1 to 1.2.2 that seemingly makes all of the difference. I am running two sites with shapely and for both this is true. I would love to share it, but don’t want to confuse you with too much info … It actually seems to be a quite simple thing …
Let me know if I can share …

Best regards!!!

Howdy

Well, if you already found a solution and you know how to use then its ok for me :slight_smile: