How To Fix Logo Bar & How To Collapse Menu on Scroll

SonicSystems · May 8, 2018, 3:20am

Hi There,

Thank you in advance. You guys always do your best to help and we all appreciate it!

Please help me out here. I need to have my logobar stay fixed when scrolling, similar to how the menu currently stays fixed when scrolling.

Additionally, I need to have the menu collapse on Tablet/Mobile when I scroll down the screen.

I have a bit of custom JS and CSS already, so if you could please help me modify it to include these functions that would be great. I will put the website in a secure note.

Thank you!

paul.r · May 8, 2018, 4:45am

Hi,

Thanks for writing in!

To achieve that, you can add the code below in Theme Options > JS


jQuery(function($) {    
 $(window).scroll(function(){            
        if ($(window).scrollTop() > 0){
            $('.x-logobar').addClass('x-logobar-fixed-top');
        } else {
            $('.x-logobar').removeClass('x-logobar-fixed-top');
        }
    });
});

Then add this in Theme Options > CSS


.x-logobar.x-logobar-fixed-top {
    position:fixed;
    z-index: 1030; 
     top: 0;
    left: 0;
    right: 0;
}

.x-navbar.x-navbar-fixed-top {
  top:77px;
}

Hope that helps.

SonicSystems · May 8, 2018, 11:38pm

Hi There. Thank you for the response and help so far!

Unfortunately, neither of those are doing the trick.

With regards to the CSS, the space for the logo bar is created when scrolling. However, the logobar itself does not remain there. It creates a gap between the menu button and the top of the screen, showing the website scrolling behind it.

Also, the JS is not working as hoped. I need when we scroll down the website/screen that the menu collapses. Adding the code you recommend doesn’t seem to achieve this or change anything.

Additionally, something I realized after submitting the first ticket is that my menu has dropdown features in the “Services” item. When on mobile or tablet, if this selection is expanded it is not possible to see all the items. It is also not possible to scroll the menu or screen down to view items below it.

I have since removed the code you put here as it is not working. I will leave login credentials in a secure note if you could please look into it.

Thank you

paul.r · May 9, 2018, 4:16am

Hi,

The login provided doesn’t seem to work. Please check again and let us know.

For the mean time, please change the js code to this.

jQuery(function($) {    
 $(window).scroll(function(){            
        if ($(window).scrollTop() > 0){
            if(!$('.x-btn-navbar').hasClass('collapsed')) {  	      
                $('.x-btn-navbar').click();              
             }
            $('.x-logobar').addClass('x-logobar-fixed-top');
        } else {
            $('.x-logobar').removeClass('x-logobar-fixed-top');
        }
    });
});

CSS Code should still be the same.

.x-logobar.x-logobar-fixed-top {
    position:fixed;
    z-index: 1030; 
     top: 0;
    left: 0;
    right: 0;
}

.x-navbar.x-navbar-fixed-top {
  top:77px;
}

I have tested this code in your site and it works.

See Video - https://www.screencast.com/t/uEsiR00Trymp

Thanks

SonicSystems · May 11, 2018, 3:57am

Hi There. Thanks. WHen I check out your video it seems to worrk by manually entering the code into your inspector. However, it does not work when entering the code in the Customize>Custom> Edit Global CSS or Javascript

I have put screen shots of what is happening. I have cleared caches and everything routine to figure this out.

Please log into my site and see if you can find the solution. I have updated the password and it should work now. I have left my site in the “broken” way it is from adding that code. Please fix and replace it when you log in or delete it completely. I do not want to leave it like that for too long.

THanks for your help! It is much appreciated.

paul.r · May 11, 2018, 8:53am

Hi,

In that case, would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

Link to your site
WordPress Admin username / password

All the best!

SonicSystems · May 11, 2018, 10:29pm

I just reattached. There is one attached to the previous comments too – I have updated the login credentials. And, I have removed the above code that was suggested because I don’t want the site acting buggy while we sort this out.

Thank you!

ruenel · May 12, 2018, 1:24am

Hey SonicSystems,

You might want to check out this related thread: https://theme.co/apex/forum/t/how-to-make-both-the-logo-and-the-nav-bar-fixed-sticky-in-the-header-on-both-mobile-and-desktop/28240/6

Please let us know if this has work out for you.

paul.r · May 14, 2018, 5:35am

Hi,

I checked your site and I can see why the code I provided is not working.

There are syntax erros in your js and css code.

In your js code you added comment without enclosing it in /*..*/

eg. This is incorrect

collapses hamburger menu when clicking menu item
(function($){
  $('.x-navbar .x-nav a').click(function(){
    $('.x-nav-collapse').toggleClass('in').css('height', 0);
    $('.x-btn-navbar').toggleClass('collapsed');
  });
})(jQuery);

It should be

/* collapses hamburger menu when clicking menu item */
(function($){
  $('.x-navbar .x-nav a').click(function(){
    $('.x-nav-collapse').toggleClass('in').css('height', 0);
    $('.x-btn-navbar').toggleClass('collapsed');
  });
})(jQuery);

I can also see this in your css codes.


  Removes Title & Minimizes Spacing in Blog Posts
.single header.entry-header {
    display: none;
}

.single .entry-content.content {
    margin-top: -20px;
}

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}

Please change this to


/*  Removes Title & Minimizes Spacing in Blog Posts */
.single header.entry-header {
    display: none;
}

.single .entry-content.content {
    margin-top: -20px;
}

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
} /* <- this bracket was missing */

Thanks

SonicSystems · May 15, 2018, 1:54am

Hello. Thank you. I made those changes and it is almost all set. THere are still a few issues.

The Navbar now covers some of the page on Mobile (a portion of the images are permanently covered)
When the “Services” menu is expanded, not all selections can be seen and there is no way to scroll to see these selections. The menu takes up the whole screen.
When scrolling, the navbar and logobar jump and show a gap in between the two. It looks glitchy and the navbar disappears sometimes.
Navbar is not visible some pages and all blogposts when scrolling in mobile or tablet (i.e. https://www.sonicsystems.ca/contact-2 & https://www.sonicsystems.ca/news-notes/)

Please let me know your suggestions. Thank you.

Kevin

paul.r · May 15, 2018, 5:28am

Hi Kevin,

Please change Navbar Position to Fixed Top

For #2 You can add the code below in Theme Options > CSS

@media(max-width:979px) {
.x-navbar-inner {
    max-height: 350px;   
    overflow-y: scroll;
}
}

Hope that helps.

system · May 25, 2018, 5:28am

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.