The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

A problem in your navbar sticky

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Solved A problem in your navbar sticky

Post by hamesashek on March 25th 2017, 10:29 pm

A problem in your navbar sticky
There are errors I do not know what to solve but this happens in Firefox just for previews

https://i58.servimg.com/u/f58/19/13/48/56/untitl10.png
PhpBB2 version
Forum Link: http: http://yattasat.yoo7.com/


Last edited by hamesashek on March 27th 2017, 11:31 pm; edited 1 time in total
avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 26th 2017, 5:42 am

What is the issue? Is it that link does not work or the text is in the wrong place?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by APE on March 26th 2017, 3:04 pm

Oh do you mean that it don't go right across the the page when you preview a topic before posting it ?



avatar
APE
Manager
Manager

Male Posts : 11286
Reputation : 1080
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 8:22 pm

This problem occurs only in Firefox
As for Chrome it works well
avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 26th 2017, 8:28 pm

What issue? I am using Firefox.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 8:49 pm


This problem occurs when I browse the forum in Firefox

avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 26th 2017, 8:54 pm




When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 9:10 pm


This image has now been taken from Firefox
All the members tell me the same thing
The tape did not close completely

avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 26th 2017, 9:18 pm

I am using Firefox. Does it only do it when you are logged in?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 9:27 pm


This happens when I get out and get out
I do not know how to show you well but this problem suffers from members
Look


avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by APE on March 26th 2017, 9:38 pm

We are finding it hard to understand you.

when we look at your forum we don't see the same problem you need to try and make it more clear on what you are doing at the time of this going wrong.

I have looked over your forum 3 times looking at threads and posts and scrolling down and I don't see a problem it comes up when I scroll down and it hides when i go up like it should do.

it maybe you have other codes that is messing it up try and turn off any other codes you have running in the JavaScript and just leaving that one on and see if the problem still shows.



avatar
APE
Manager
Manager

Male Posts : 11286
Reputation : 1080
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 26th 2017, 9:38 pm

I do not see that issue when I visit your forum.

Make sure that Firefox is up to date: 52.1.0 (32 or 64-bit).


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by APE on March 26th 2017, 9:52 pm

ok i now see the problem
if you look at the video the member is saying when they click to close the sticky navbar it don't close


You need @Ange Tuteur the maker of that code to help here really



avatar
APE
Manager
Manager

Male Posts : 11286
Reputation : 1080
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 9:54 pm


I have no other software in IE
I have the latest version of Firefox browser




avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 9:58 pm

@APE wrote:ok i now see the problem
if you look at the video the member is saying when they click to close the sticky navbar it don't close


You need @Ange Tuteur the maker of that code to help here really


Yes that's what I'm talking about .. Is there a mistake?
avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 26th 2017, 10:04 pm

Ok. I do see that issue.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by APE on March 26th 2017, 10:06 pm

did you change the code like it has told you to on the tutorial?

3. Modifications

This plugin has 5 settings that you can modify at the top of the script. I'll go over each one so you can have a good understanding of what you can do.

targetNode : targetNode is the target element that will be turned into a sticky item. ( the navbar in this case ) Depending on your version, you should replace #page-header .navlinks by :

phpbb2 : .bodyline > table + table
phpbb3 : Leave it as is. Wink
punbb : #pun-navlinks
invision : #submenu

if you have not done this right it will have bugs

This is how it should be i think:
Code:
 (function() {
          if (!window.FA) window.FA = {};
          if (FA.Nav) {
            if (window.console && console.warn) console.warn('FA.Nav has already been defined');
            return;
          }
       
          FA.Nav = {
         
            // TARGET NODES BY VERSION
            // PHPBB2  : .bodyline > table + table
            // PHPBB3  : #page-header .navlinks
            // PUNBB    : #pun-navlinks
            // INVISION : #submenu
            targetNode : '.bodyline > table + table',
         
            customNav : '', // custom navlinks
         
            keepDefault : true, // keep the default navlinks
            collapsible : true, // show hide button
         
         
            // offset states
            offsets : {
              tbVisible : {
                bottom : 30,
                top : '30px'
              },
           
              tbHidden : {
                bottom : 0,
                top : '0px'
              },
           
              toggler : '30px'
            },
         
            activeOffset : {}, // active offset for the sticky nav
         
            visible : false, // sticky nav is visible
         
            // check the state of the static nav
            checkState : function() {
              if (!FA.Nav.animating) {
                var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
           
                if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
                  if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
                  FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
                  FA.Nav.visible = true;
                } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
                  if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
                  FA.Nav.barSticky.style.top = '-30px';
                  FA.Nav.visible = false;
                }
              }
            },
         
            animating : false, // sticky nav is animating
         
            // animate the sticky nav when the toolbar is toggled
            animate : function() {
              if (FA.Nav.visible) {
                FA.Nav.animating = true;
                FA.Nav.barSticky.style.transition = 'none';
           
                $(FA.Nav.barSticky).animate({
                  top : FA.Nav.activeOffset.top
                }, function() {
                  FA.Nav.barSticky.style.transition = '';
                  FA.Nav.animating = false;
                  FA.Nav.checkState();
                });
              }
            },
         
            // toggle sticky navigation and remember preference via cookies
            toggle : function() {
              if (FA.Nav.barSticky.style.width == '100%') {
                my_setcookie('fa_sticky_nav', 'hidden');
                FA.Nav.barSticky.style.width = '0%';
              } else {
                my_setcookie('fa_sticky_nav', 'shown');
                FA.Nav.barSticky.style.width = '100%';
              }
              return false;
            }
         
          };
       
          $(function() {
            // set default offsets based on toolbar state
            FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
            if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
         
            // find the static nav
            FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
         
            if (FA.Nav.barStatic) {
              FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
              if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
              FA.Nav.barSticky.id = 'fa_sticky_nav';
              FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
              FA.Nav.barSticky.style.top = '-30px';
               
              document.body.appendChild(FA.Nav.barSticky); // append the sticky one
               
              // sticky nav toggler
              if (FA.Nav.collapsible) {
                FA.Nav.toggler = document.createElement('A');
                FA.Nav.toggler.id = 'fa_sticky_toggle';
                FA.Nav.toggler.href = '#';
                FA.Nav.toggler.style.top = '-30px';
                FA.Nav.toggler.onclick = FA.Nav.toggle;
               
                document.body.appendChild(FA.Nav.toggler);
              };
             
              window.onscroll = FA.Nav.checkState; // check state on scroll
              FA.Nav.checkState(); // startup check
           
              // toolbar modifications
              $(function() {
                // animate sticky nav and change offsets when the toolbar is toggled
                $('#fa_hide').click(function() {
                  FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
                  FA.Nav.animate();
                });
             
                $('#fa_show').click(function() {
                  FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
                  FA.Nav.animate();
                });
              });
            }
          });
        }());



avatar
APE
Manager
Manager

Male Posts : 11286
Reputation : 1080
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 10:31 pm

You have already made adjustments
avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 10:36 pm


I think there is something simple that needs to be configured to all browsers like a particular thing or something like that
I've made some adjustments in the Pix to make all the elements work on all browsers like
Code:

/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
    -webkit-border-radius:0 !important;
    -moz-border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  -webkit-border-right:0;
  -moz-border-right:0;
  border-top:0;
  -webkit-border-top:0;
  -moz-border-top:0;
}


Code:

/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
 -webkit-transition:top 200ms linear, width 600ms ease-in-out;
-moz-transition:top 200ms linear, width 600ms ease-in-out;
}
 
#fa_sticky_nav li { display:inline } /* navlist adjustment */
 
 
/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
  -webkit-transition:200ms;
-moz-transition:200ms;
}
 
#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}
 
 
/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
    -webkit-border-right:none;
    -moz-border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
  -webkit-transition:top 200ms linear;
  -moz-transition:top 200ms linear;
}
 
#fa_sticky_toggle:hover { background-position:-30px 0 }
 
 
/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
    -webkit-border-radius:0 !important;
    -moz-border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  -webkit-border-right:0;
  -moz-border-right:0;
  border-top:0;
  -webkit-border-top:0;
  -moz-border-top:0;
}
 
 
/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 26th 2017, 10:42 pm

Have you tried APE's code?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by APE on March 26th 2017, 10:42 pm

I don't think you needed to make that change as it would have been done when it was made

try to put it back how we gave the the codes and see if the problem still shows.



avatar
APE
Manager
Manager

Male Posts : 11286
Reputation : 1080
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 10:50 pm

I have tried the code above but it did not work
I tried the modifications and did not work. I think we need the code maker itself to make it work on all browsers
avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 26th 2017, 11:05 pm

It does work on all browsers.

Either you have another code conflicting with it, or something is wrong with the code you added. Maybe it could be the language of your forum, too.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 26th 2017, 11:14 pm

The language of the forum does not cause any conflict with any code in a final way other than the direction of the element itself if it is left or right
I do not put any other software other than this code only and I think it is a problem
Do not you see it in the illustration?
avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by APE on March 26th 2017, 11:22 pm

you do not need to change any of the CSS files at all the tool will work in all browsers so you don't need to change any of that part remove the CSS files you have changed and add the main ones again.

There is NO need to add to that code it's all browser friendly as it is



avatar
APE
Manager
Manager

Male Posts : 11286
Reputation : 1080
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 27th 2017, 10:05 pm


I will not change anything until I enter
@Ange Tuteur
avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by Ange Tuteur on March 27th 2017, 10:30 pm

Hi @hamesashek,

Add the following CSS rules to your stylesheet.
PA > Display > Colors > CSS
Code:
table#fa_sticky_nav, table#fa_sticky_nav tbody, table#fa_sticky_nav tr, table#fa_sticky_nav td {
  display:block;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13179
Reputation : 2884
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 27th 2017, 11:26 pm

@hamesashek wrote:

I will not change anything until I enter
@Ange Tuteur
To tag an username with spaces, you have to place quotations around the username.
Code:
@"Ange Tuteur"


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by hamesashek on March 27th 2017, 11:29 pm

Well done, designer
avatar
hamesashek
Forumember

Male Posts : 103
Reputation : 1
Language : hamesashek

http://bestk.forumegypt.net

Back to top Go down

Solved Re: A problem in your navbar sticky

Post by SLGray on March 27th 2017, 11:29 pm

If this is solved, please click the green solved button.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 41151
Reputation : 2811
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum