Menu is Messing up after Changing Window Resolution

[angelofgod]

Hey i have Changed the size of the window and sized it back to large and this is what i see:

Step 1: http://prntscr.com/jbrmeu

Step 2: http://prntscr.com/jbrmk7

Step 3: http://prntscr.com/jbrmq6

Why is the menu is messed up in step 3?

[nico]

Hi @angelofgod,

Thanks for writing in.

I have checked your site and your menu is working well. I also changed the screen size and it is looking well after resizing it.

I think the problem that is causing here is the error that I could see in your browser console. Script error could disrupt other scripts.

You could test it by removing temporary your custom scripts. Don’t forget to save it for backup.

Let us know how it goes.

Thanks.

[angelofgod]

i have removed all global js and still the problem presists, can you tell me which code to remove the js error?
any advice will be great inorder to fix this

Update: however i manage to fix this by disabling the top nav sticky menu 3rd party plugin and enable fixed top and now i have 2 questions

1. how to i animate the fixed top menu to roll or fade when i scroll down?
2. how can i make the responsive menu of the top nav sticky as well without using the ubermenu3 sticky extension, can i do this with “Superfly” theme x plugin perhaps ? or there are other ways?
3. however after i changed in theme options to “fixed top” the banner seems to go under the menu and some of the top banner not shown and appearing under the top menu, how can this be fixed please?

Thanks!

[paul.r]

Hi,

1. You can try addin this in Theme Options > CSS

.x-navbar {
-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

2. Add this in Theme Options > CSS

@media (max-width: 979px) {
.x-navbar.x-navbar-fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
}
}

3. It’s because you have set your Navbar Top Height to zero.

Please set it to 60

Hope that helps

[angelofgod]

Hey!

Thanks! the nav bar top height tip worked!
how ever the 1) code of transition, does not makes the nav bar animate.
and the 2) code messing up all the website , but i dont think its necessary because the responsive menu is already sticky

[rad]

Hi there,

The transition will only work if the element’s target value is different than its initial value. Like from 40px to 60px, or 0.5 opacity to 1 opacity, or 600px offset to 0px offset. There is nothing to transition on your navbar, that’s why it’s not working, plus, it’s Ubermenu where it has its own styling. Hence, what you need to transition is your Ubermenu and not its container (container stays the same). Unfortunately, Ubermenu has complex structure and CSS which transitioning may not work. The example and talking about is this,

.x-navbar {
    -webkit-transition: all 3s ease-in-out;
    -moz-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
    transition: all 1s ease-in-out;
    opacity: 1;
}
.admin-bar .x-navbar-fixed-top, .admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
    opacity: 0.5;
}

It will transition to different opacity, but that’s just a sample, so if you wish to control Ubermenu then you’ll have to do other customizations which we can’t provide.

And yes, please ignore that CSS, it’s already sticky.

Thanks!

[angelofgod]

Hey rad,
it makes the nav bar opacity, but however, how can i add to it a slide animation when i scroll down?
you say i should do this with ubermenu, how exacly do i do that please?

[ruenel]

Hey There,

For added transitions using Ubermenu, please check out this documentation:

Transitions | UberMenu 3 Knowledgebase

Hope this helps.

[angelofgod]

Thanks but its drop down transition, what i am trying to accomplish is to make the top nav menu slide down when i scroll down the page, sort of an Animation sticky effect. can you help me please?

[ruenel]

Hello There,

Regretfully at the moment, we do not have an animation sticky effect. We’ve added this as a feature request so it can be taken into consideration for future development.

Thanks for understanding.