Theme built-in navbar issues

Support
#1

Hi there

I’d like to use the Theme’s built-in navbar instead of UberMenu.

This is how it looks with UberMenu (correct):
Before scrolling down:

After scrolling down (it gets smaller but text remains centered):

Now when I disabled the UberMenu plugin, this is how the menu looks like before scrolling down:

And this is what is looks like after scrolling down:

And when I open a tab:

Basically the whole menu gets ruined when I disable the UberMenu plugin.
How can I (same as on UberMenu) do the following:

  1. Centre the text/tabs… They should always be in the centre of the menu
  2. When scrolling down, the menu should get narrower, and the text should remain centered.
  3. When hovering over a tab, the tabs should open below the main menu item, not on top.
  4. It doesn’t open on mobile devices currently… How do I fix this?

Thanks!

#2

Hi @Jeypolitan

I’ve checked your website and I can see that you are using incompatible versions of X theme and Cornerstone plugin (6.0.4 and 3.1.6 respectively), please update the theme to the latest sable version following this guide:

I believe this should fix this issue.

Thanks.

#3

Hi there,

Everything has been updated but all of the navbar issues still remain.
Please advise on the 4 points above.
Many thanks!

#4

Hi @Jeypolitan

I’v removed this CSS code from (Theme Options > CSS):

    .x-navbar-fixed-top .x-brand {
        margin-top: 5px;
    }

Then, I’ve adjusted your Header settings in Theme Options to be like:

Now, you can see the Menu is displaying just fine, please make sure to clear both cache on your site and your browser cache.

Thanks.

#5

Hi there,

Thank you!

  1. How can I make the navbar smaller upon scroll?
  2. When I hover over the menu tab, the subnav which opens isn’t fixed to the bottom of the main menu (it should be fixed before and after scroll). How can I achieve this?

Thanks!

#6

Hi there,

Please add this code in the Global JS:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar').removeClass('x-navbar-fixed-top');
		}

	});


});

Then add this code in the Global CSS:

.x-navbar-fixed-top .x-navbar-inner {
    min-height: 60px;
}

.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 60px;
    padding-top: 30px;
}

.x-navbar-fixed-top .x-brand {
    margin-top: 10px;
}

Please add this code in the Global CSS:

.x-navbar .desktop .x-nav > li ul {
    top: 90px;
}

Hope this helps.

#7

Hi there,

The customizer layout has changed… Before, the Javascript and CSS would be accessible from the same page. Now it looks like this (only have access to the CSS via customizer):

Where do I add the Javascript now? Also, when I click on “Additional CSS”, all of the other CSS codes I had previously are gone? The field is now empty?

Thanks

#8

Hi there,

You should be able to find it in X > Theme Options > CSS/JS.

Hope this helps.

#9

Hi Jade

Thank you, but there are still some issues with the codes provided (JS and CSS).

  1. When the navbar is at the top of the page (before scroll) the menu items are not centralised. You can see that they are too hight compared to the logo for instance, which is centralised:
  2. When I scroll down, the menu items are too far down, and not centralised unlike the logo:
  3. When the navbar is small (due to scrolling down), the menu items do not open attached to the navbar:

Please help. Thanks

#10

Hi @Jeypolitan,

  1. It’s vertically centered, what’s not centered is the logo. Try reducing the top margin of the logo, it’s currently on 25px.

  2. It looks the same on my end, scrolled or not. What browser you’re testing it with? Plus, the navbar is taller in my view than your screenshot.

  3. I’m not getting that sub-menu too, and it should be 90px and not 75px as Jade suggested.

.x-navbar .desktop .x-nav > li ul {
    top: 90px;
}

Thanks!

#11

Hi there

All of my issues from my last comment still remain. Can you please re-check because it’s not working as expected on my end.

Please could you look at my point 1 - 3 from my last comment?

Thanks

#12

Hello There,

Please update the css code:

.x-navbar-fixed-top .desktop .x-nav > li > a {
    height: 60px;
    padding-top: 25px;
}

.x-navbar .desktop .x-nav > li ul {
    top: 60px;
}

.x-navbar-fixed-top .x-brand {
    margin-top: 7px;
}

You can adjust the top margins so that logo and the menu items will be aligned.

We would loved to know if this has work for you. Thank you.

#13

Hi there

  1. I replaced the code, but now the navbar does not get smaller when scrolling down?

  2. Also the logo and the menu items are still not centred (too far up).

  3. Also the subnav still opens in the middle of the navbar?

Please advise.
Thanks

#14

Hey @Jeypolitan,

A shrinking bar is only a feature offered in Pro. It’s not possible in X so it looks like you did it through custom development. If you got the codes from this forum, I am sorry but we could not continue on troubleshooting them. Custom codes are not maintainable and it would require a fair amount custom development time to troubleshoot issues that arise from them. Custom codes only also serve as a guide. They we’re meant to show you a possibility. The actual usage and maintenance of it would be the user’s responsibility.

I’d recommend that you first switch to Pro and we’ll give you further advice to achieve a shrinking bar. In fact, the issues you’re facing now would be non-existent in Pro. No need for custom codes.

If you wish to continue with X and achieve a shrinking bar, you would need to hire a web developer. As you can see in this thread, we already have a fair amount of back and forth and still the issue persists. That is because you need to take into account many variables to implement this successfully. This would require custom development time which is not a part of our support service. Please see our Terms.

Thank you for understanding.

1 Like
#15

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