Sticky Full Screen MENU not in the wright place if I have breakpoints

[VEDRAN]

Hi
I have bought all these menues from you, but Sticky Full Screen MENU has a problem.

Problem 1.
I have a page with breakpoints. If I put Sticky Full screen menu OUTSIDE LayoutGrid, the menu will NOT show at all in mobile preview 480. Didt test it in other breakpoints. Only in Default view it will and it is where it is suppose to be. Middle bottom.

Problem 2.
I have a page with breakpoints. If I put Sticky Full screen menu INSIDE LayoutGrid, the menu will show in mobile preview 480, but it is not in the middle bottom part of the page. It shows in the bottom left position and it looks strange too. You would need to click on the burger button to open it and if you cklick on the circle, nothing ahppenes, which is fine about where to click, but its in the wrong place and does not look right at all. Only in Defaul view and it is where it is suppose to be.

If there are NO breakpoints, then the Sticky Full Screen menu will be in the wright place in Default preview and also in the right place if you turn on mobile preview of the same page.

Can you lease fix these problems please?
The menu looks GREAT, but it leaks some fundementials.

Demo: https://anonfiles.com/X562E4z0w8/Sticky ... n_menu_wbs

[crispy68]

I can confirm that the extension is not working correctly.

@Pablo, it appears that when the breakpoint is reached that the position goes from using display:flex to now using the absolute position of the button on the page and display:inline.

original code:

Code: Select all

#Extension1 {
    box-sizing: border-box;
    width: 100%;
    font-family: "Arial";
    font-weight: normal;
    font-style: normal;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9998;
}

to:

Code: Select all

#Extension1 {
    left: 303px;
    top: 2850px;
    width: 93px;
    height: 92px;
    visibility: visible;
    display: inline;
}
#Extension1 {
    box-sizing: border-box;
    width: 100%;
    font-family: "Arial";
    font-weight: normal;
    font-style: normal;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9998;
}

[Pablo]

Thanks, the problem should be fixed in the latest update of the extension (version 1.0.1)

You can download/update purchased extensions here:
http://www.wysiwygwebbuilder.com/extension_update.html

Note that the menu should not be used inside a layout grid (or any other type of container), because it has a fixed position.

[VEDRAN]

Hi

Now, I have another problem with this Sticky Full Screen menu.

When I add extension: jQuery GoUp! and Sticky Full Screen menu on the same page, the extension jQuery GoUp! does NOT work as it should. It works, but not as it should.
What happens, when you have both extension on the same page, you need to click on the upper part of the jQuery GoUp! extension button so it would take you to the top of the page. And the more stuff I add to the page, as I have added on my website, that "Working CLICK part" of that button, goes to the very top of the button. So, you need to click on the last milimetar of GoUP button eventualy to make it do what it is suppose to do.
I didnt add all stuff I have on my page, but I think you will see the problem on these few things I did add on DEMO project page.

When on the page is only extension: jQuery GoUp!, then jQuery GoUp! will WORK normaly.

I just LOOOVE Sticky Full Screen menu and how it looks etc. and I would like to use it VERY much, so as jQuery GoUp! extension, but one of them needs a few tweeks and corrections here and there to work nicely.

Please try to fix.
Thanks

DEMO: https://anonfiles.com/L7o9f74fw0/Sticky ... y_GoUp_wbs

[crispy68]

There is nothing wrong with them both together on the page. The Sticky menu is overlapping half of your GoUp button. You need to set the z-index of the jquery GoUp higher than 1. If you put 10000, it works just fine.

[VEDRAN]

There is nothing wrong with them both together on the page. The Sticky menu is overlapping half of your GoUp button. You need to set the z-index of the jquery GoUp higher than 1. If you put 10000, it works just fine.

Thanks crispy68, but I could never figure out how to use this z-index. Never. OK, this jQuery GoUp! has that option to change in its properties, so I can do it there. But how do I cahange it with other stuff that doesn't have it so obvious?
Pablo said I can use object manager or arange tools, but I still don't know how.
If I go to object manager and I click move to front or move forvard, nothing much happens.

Can you please expalin this to mee like you would to a 5 Year old? Like, click here, go here etc. Pleasee?
Its starting to drive me nuts when someone says, change z-index. HOW?!

Thanks again for your time

[Pablo]

You can set the z-index of the jQuery Go Up extension in the properties of this extension.

Note that "jQuery Go Up" is third party script so this extension is provided "AS IS".

[VEDRAN]

You can set the z-index of the jQuery Go Up extension in the properties of this extension.

Note that "jQuery Go Up" is third party script so this extension is provided "AS IS".

Ok, jQuery is "AS IS", but...
Pablo, you said I can use object manager or arange tools, but I still don't know how.
If I go to object manager and I click move to front or move forvard, nothing much happens.

Can you please expalin this to mee like you would to a 5 Year old with OTHER object how do I use z-index?

Like, click here, go here etc. Pleasee?

Its starting to drive me nuts when someone says, change z-index. HOW?!

[Pablo]

Pablo, you said I can use object manager or arange tools, but I still don't know how.

Not in this case, because this is a fixed/sticky object. It is not part of the normal document flow.

You can set the z-index of the jQuery Go Up extension in the properties of this extension.

[crispy68]

@Vedran,

Most objects z-order in the workspace can be changed by using the arrange tools moving forward and backward. Keep in mind you may have to hit the forward/backward button several times to move the objects z-order especially if you are moving forwards/backwards thru/past a layer/grid with many objects.

Some extensions/objects have a z-order field (like jQuery GoUp) that allows you to manually enter it. Some do not. In this case, the sticky menu has a fixed position and is placed high in the z-order so that it appears above everything else on the workspace. Unfortunately, there is no way from within the workspace to see what the z-order is but if you preview the page and then use chrome dev tools you can see it in the code. Moving the GoUp extension to the front using the arrange tools has no effect because the z-order is still lower than the set z-index is for the sticky menu.

For example, if you have 100 objects on the page and move the GoUp extension to the front, it will have a z-index of 100. This is still lower than the sticky menus z-index.

On objects that do not have a z-index field and you want to manually control the z-index, you can add a bit of simple CSS code. Open an HTML object or add to the page HTML section and place it between the <head> tags like the following:

Code: Select all

<style>
#ObjectID{z-index:10000;}
</style>

You will just need to change the ObjectID to the ID of your object and set the z-index value to your liking.

[VEDRAN]

@crispy68

THANK YOUUU!

This the explanation I was hoping to get!
Now I understand this z-index and how to work with it. Even aditinal work I have now from you.
Excellent!

Thank you a THOUSAND times!