About This Ticket

Menu bar moving to right on page scroll

by Technozest / August 24, 2015, 11:57 am

Hi Team,

Basically the navbar is aligned to page center. When i scroll down the page and again scroll up to top. The center alignment for navbar is missing. 

The navbar is slightly moving to right side.

Attached screenshot of the navbar position before scrolling 

Staff

Hi,

 

Please open the file 'main.js' located in SCRIPT folder of the theme folder and find the following lines of code (should be located near line no. 244) : 

function desktopmenu(){
        if ($(window).width() >= 768){ 
            $(window).on('scroll', function() {
                var topheight = ($('.header').innerHeight());
                var secndHeight = ($('.content').innerHeight());
                var total = topheight +  secndHeight ;
                   if ($(window).scrollTop() > total) {
                       $('.menu-wrapper').addClass('sticky-menu');
                       $('.sticky-logo').css('display' ,'inline-block');
                       $('.sticky-logo').css('opacity' ,1);
                   }
                   else {
                       $('.menu-wrapper').removeClass('sticky-menu');
                       $('.sticky-logo').css('opacity',0);
                       $('.sticky-logo').css('display' ,'none');
                   }
                   if ($(window).scrollTop() > total) {
                       $('.sticky-menu-wrap').addClass('sticky-menu-layout2');                       
                   }
                   else {
                       $('.sticky-menu-wrap').removeClass('sticky-menu-layout2');
                   }
                   var cHeight=($('.second-layout').innerHeight());
                   if ($(window).scrollTop() > cHeight) {
                       $('.sticky-menu-wrap2').addClass('sticky-menu-layout2');
                       $('.logo-altr-new').css('display' , 'block');
                       $('.logo-altr').css('display' , 'none');

                   }
                   else {
                       $('.sticky-menu-wrap2').removeClass('sticky-menu-layout2');
                       $('.logo-altr-new').css('display' , 'none');
                       $('.logo-altr').css('display' , 'block');
                   }
               });
        }
    }

Note that there is one extra line of code added in bold in the above code. That line of code is writeen below. Please add that line in your file in the same location as in the above code.

$('.sticky-logo').css('display' ,'none');

 

This should fix the allignment issue.

 

 

 

Hi

This worked perfectly,

Thanks

Hi,

The right moving got fixed. But it started new issue.

During scroll down, the navbar on sticky menu is moving to left. The alignment difference is shown in attached pics

Staff

Hello,

Yes the navigation is moving to the left when unsticking, but that's actually to make the nav center in accordance with the container. 

The logo gets hidden when unsticked, the nav is aligning to the center.

If you think otherwise, please let us know, and also please provide theme URL so that we can have a closer look.

Thanks,

Hi Prabhash,

In normal mode the navbar is center aligned. The issue only with navbar on sticky menu. The navbar is moving towards the logo. In general the navbar should be placed where it is right, center aligned. Please check the below provided link. 

Before scroll, the navbar is center aligned. After scroll, the navbar on sticky menu moving to left. It should be center aligned just like its on normal screen.

http://technozs.com/tzs/index.html

Thanks

Staff

Hi,

I understand the issue, by looking at your link. 

You can do the following:

go to #7519 of your styles/main.css and update with the following code:

header .content.menu-wrapper.sticky-menu ul.nav {
    border: none;
    margin: 15px 0;
}

that is, remove: 

float: right;
width: 75%;

Also, add the following at bottom of your styles/main.css:

a.sticky-logo {
    position : absolute;
    top : 0;
    left: 0;
    margin-top: 0 !important;
}

 

Let me know, if that works.

Thanks,

Hi

This worked.

Thanks