Adjust Nav spacing after scrolling

Hi,

I’m trying to add top padding to the menu after the scrolling down the page. It’s fine when the page first loads, but once you scroll down a bit, the menu ends up right at the top.

I don’t know which element(s) to target for the css.

You can see it here: http://canaan.coraclemarketing.com/

Thanks!

Hi There,

To fix this issue, please add this custom CSS under X > Theme Options > CSS:

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

Hope it helps :slight_smile:

Thanks. Yes, this helped. However, this seemed to have added some top padding to the nav before scrolling as well. Is there a way for there not to be so much top padding when it first loads?

Also, how do I shrink the logo image to 75% upon scrolling?

Thanks!

Hi again,

To fix the issue and shrink the logo on scroll, please replace the previously given code with the following code:

.x-navbar .desktop .x-nav > li > a {
    top: -15px;
}
.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
    padding-top: 30px;
    top: 0;
}
.x-navbar.x-navbar-fixed-top .x-brand img {
    width: 75%;
}

Let us know how this goes!

Perfect. Thank you, this worked!

You are most welcome. :slight_smile:

Just noticed that between screen widths of 960px and 1300px, the menu doesn’t expand. I’m not sure what happened or how to fix that? Thanks!

Hi again,

To fix the mobile menu issue, please add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		if($(".x-nav-wrap.mobile").hasClass('in')){
			$('.x-nav-wrap.mobile').removeClass('in');
		}
		else{
			$('.x-nav-wrap.mobile').addClass('in');
		}
	});
});

Don’t forget to clear your all caches including browser’s cache after adding the code. Let us know how this goes!

Thank you. It works now!

You are most welcome. :slight_smile:

Hi again,

I ran into the same problem with the mobile menu not expanding on another site: https://pactech-inc.com, so I used the javascript code above. The menu expands now but the submenu doesn’t. What do I need to change? Thanks!

Hi again,

The problem you’re having on that site is due to the outdated version of X being used with the latest version of Cornerstone. Please always make sure to update both X and Cornerstone to avoid such errors and potential conflicts. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Also please remove all JS and CSS customization regarding mobile menu after updating the theme.

Let us know how this goes!

Thank you, that solved it. Hadn’t realized the theme hadn’t been updated.

Glad we could help,

Cheers!

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