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.

Issue with .is-sticky

View previous topic View next topic Go down

Solved Issue with .is-sticky

Post by ANGrey on October 14th 2017, 4:09 am

Technical Details


Forum version : #ModernBB
Position : Founder
Concerned browser(s) : Mozilla Firefox
Who the problem concerns : All members
Forum link : http://ninjascrolls.forumotion.com/

Description of problem

Hi-

I'm trying to remove the sticky navbar from my forum (ModernBB), and regardless of how I go about this, I found that scrolling down from the top of the page even a single pixel causes the entire .headerbar to disappear, except for the background color.

I can use display:none; to get rid of the .is-sticky .navbar, but I cannot seem to find a way to fix the blank issue? I'd like to make it so the headbar is visible if even a single pixel of it is showing, otherwise my members have to scroll all the way to the top to even see the navbar at all.

Any help at all would be appreciated, thanks!
♥ Lexie
avatar
ANGrey
Forumember

Female Posts : 400
Reputation : 39
Language : English
Location : OK

http://ninjascrolls.forumotion.com/

Back to top Go down

Solved Re: Issue with .is-sticky

Post by SLGray on October 14th 2017, 6:46 pm

Are you exactly just referring to the navbar & logo/banner or the whole headerbar?


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40868
Reputation : 2773
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Issue with .is-sticky

Post by ANGrey on October 14th 2017, 9:29 pm

The whole headbar, to an extent. When scrolls to the top of the page, the headerbar is visible entirely, as seen here:



When you scroll down even one pixel, the navbar and logo disappear, leaving you only with the background color, as seen here:



Ideally, I would like the headerbar to be visible at all times (especially the navbar), and I would like the sticky navbar to not exist, or combine with the #fa_toolbar, in that order.

Thanks SLGray,
♥ Lexie
avatar
ANGrey
Forumember

Female Posts : 400
Reputation : 39
Language : English
Location : OK

http://ninjascrolls.forumotion.com/

Back to top Go down

Solved Re: Issue with .is-sticky

Post by SLGray on October 14th 2017, 10:18 pm

One solution for the banner/logo is to add it to a background-image.


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40868
Reputation : 2773
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Issue with .is-sticky

Post by ANGrey on October 16th 2017, 1:18 am

That does seem to help in regards to the image, but it does not help with the Navbar unfortunately. The Navbar is the more important aspect of the two.
avatar
ANGrey
Forumember

Female Posts : 400
Reputation : 39
Language : English
Location : OK

http://ninjascrolls.forumotion.com/

Back to top Go down

Solved Re: Issue with .is-sticky

Post by SLGray on October 16th 2017, 3:06 am

The reason for the sticky navbar is that you would be able to see the main menu when you scroll down the page. What exactly do you not like about it?


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40868
Reputation : 2773
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Issue with .is-sticky

Post by ANGrey on October 16th 2017, 3:28 am

Honestly, that it takes up space. Plus a few of my members have commented disliking it for their own reasons.
avatar
ANGrey
Forumember

Female Posts : 400
Reputation : 39
Language : English
Location : OK

http://ninjascrolls.forumotion.com/

Back to top Go down

Solved Re: Issue with .is-sticky

Post by Ace 1 on October 16th 2017, 2:26 pm

@Calιbuяn

If you have access to the founder account, go to Display > Templates > General > overall_footer_end and find this script tag:

Code:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   $(window).scroll(function() {
      var header_top = $('#headerbar-top');

      if (header_top.hasClass('w-toolbar')) {
         if ($(window).scrollTop() >= 42) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      } else {
         if ($(window).scrollTop() >= 1) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      }
   });
});
//]]>
</script>

Remove it, save and publish.



If you don't, then remove this from your CSS:

Code:
.is-sticky { display: none !important; }

And add this:

Code:
#headerbar-top.w-toolbar.is-sticky {
    top: auto;
    left: auto;
    right: auto;
    height: 81px;
    background-color: initial;
    position: static;
    padding: 0;
    box-shadow: none;
}

#headerbar-top.is-sticky #logo {
    display: inline-block;
    height: auto;
    width: auto;
    opacity: 1;
    transform: none;
    margin-top: 13px;
}

#headerbar-top.is-sticky .navbar li { margin: 25px 0 0; }
avatar
Ace 1
Helper
Helper

Male Posts : 826
Reputation : 62
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Solved Re: Issue with .is-sticky

Post by ANGrey on October 16th 2017, 7:09 pm

Ahhh! Thank you @Ace 1! ♥♥♥

You should write a tutorial on that one!
avatar
ANGrey
Forumember

Female Posts : 400
Reputation : 39
Language : English
Location : OK

http://ninjascrolls.forumotion.com/

Back to top Go down

Solved Re: Issue with .is-sticky

Post by Draxion on October 16th 2017, 7:16 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1834
Reputation : 230
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

View previous topic View next topic Back to top


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