navBar collapse

[omexlu]

Hello,

How can i change the breakpoint of the menu collapse?
I want that the menu collapse from 1280pixel width down.

Thanks in advance.

---

[Support]

Hello, all the elements are based in the Bootstrap Grid.

That’s what you need to do to generate a customized version:

– Go to this website: http://getbootstrap.com/customize/

– Customize the Grid:

– Note that the grid from bootstrap is divided in xs, sm, md and lg, each one of those are the resolutions that the behavior changes, so you need to customize that the way you want.

– Compile the version and replace the files under the folder vendor/bootstrap/

Kind Regards,

Jonas

---

[omexlu]

Hi,

I dont need any other changes only the nav collapse.

Is it possible to change the value in the theme css or custome.css only?

of maybe in the bootstrap.css directly?

Thanks in advance.

---

[Support]

Hello, if you are using the latest version, here’s what you can do:

Add this:

(css/custom.css)

@media (max-width: 1280px) {
	#header .header-btn-collapse-nav {
		display: block;
	}
	
	#header .header-nav-main.collapse {
		display: none !important;
	}
	
	#header .header-nav-main.collapse.in {
		display: block !important;
	}
}

Change that the breakpoints for the header in the file:
(css/theme.css)

For example:

(There are a few more breakpoints in that same file that must to be changed)

I hope it helps.

Kind Regards,

Jonas

---

[omexlu]

Hello,

Thanks

in my theme.css is written this version:
Version: 4.0.0

Which other breakpoints must also be changed?
in my customs i have also some breakpoints generated from your demo site.

Thanks in advance.

---

[Support]

Hello, you need to change all the breakpoints, for example:

FROM:

@media (max-width: 991px) {

TO:

@media (max-width: 1280px) {

FROM:

@media (min-width: 992px) {

TO:

@media (min-width: 1281px) {

And also in the file theme.js

FROM:

992

TO:

1281

FROM:

991

TO:

1280

Best Regards,

Jonas

---

[omexlu]

Hi,

Thanks for the quick reply.

To resume:
– i need to add following in custom.css

@media (max-width: 1280px) {
	#header .header-btn-collapse-nav {
		display: block;
	}
	
	#header .header-nav-main.collapse {
		display: none !important;
	}
	
	#header .header-nav-main.collapse.in {
		display: block !important;
	}
}

– Need to change all value in themes.css and custom.css from @media (max-width: 991px) { to @media (max-width: 1280px) { AND
@media (min-width: 992px) { to @media (min-width: 1281px) {

– in js/theme.js 992 to 1281 AND 991 to 1280

no other changing needed? And this has only the affect on the collapse menu nothing else?

Thanks

---

[Support]

Hello,

In the JS file you just need to change the values that are inside the Nav function:

Best Regards,

Jonas

---

[omexlu]

Ok only change the value that you give me inside this function:

// Nav
(function(theme, $) {

	theme = theme || {};

	var initialized = false;

	$.extend(theme, {

		Nav: {

			defaults: {
				wrapper: $('#mainNav'),
				scrollDelay: 600,
				scrollAnimation: 'easeOutQuad'
			},

			initialize: function($wrapper, opts) {
				if (initialized) {
					return this;
				}

				initialized = true;
				this.$wrapper = ($wrapper || this.defaults.wrapper);

				this
					.setOptions(opts)
					.build()
					.events();

				return this;
			},

			setOptions: function(opts) {
				this.options = $.extend(true, {}, this.defaults, opts, this.$wrapper.data('plugin-options'));

				return this;
			},

			build: function() {

				return this;
			},

			events: function() {
				var self = this,
					$header = $('#header'),
					$window = $(window);

				$header.find('[href=#]').on('click', function(e) {
					e.preventDefault();
				});

				// Add Arrows
				$header.find('.dropdown-toggle, .dropdown-submenu > a').append($('<i />').addClass('fa fa-caret-down'));

				// Mobile Arrows
				$header.find('.dropdown-toggle[href=#], .dropdown-submenu [href=#], .dropdown-toggle[href!=#] .fa-caret-down, .dropdown-submenu a[href!=#] .fa-caret-down').on('click', function(e) {
					e.preventDefault();
					if ($window.width() < 992) {
						$(this).closest('li').toggleClass('opened');
					}
				});

				// Touch Devices with normal resolutions
				if(('ontouchstart' in window || 'onmsgesturechange' in window)) {
					$header.find('.dropdown-toggle:not([href=#]), .dropdown-submenu > a:not([href=#])')
						.on('touchstart click', function(e) {
							if($window.width() > 991) {

								e.stopPropagation();
								e.preventDefault();

								if(e.handled !== true) {

									var li = $(this).closest('li');

									if(li.hasClass('tapped')) {
										location.href = $(this).attr('href');
									}

									li.addClass('tapped');

									e.handled = true;
								} else {
									return false;
								}

								return false;

							}
						})
						.on('blur', function(e) {
							$(this).closest('li').removeClass('tapped');
						});

				}

				// Anchors Position
				$('[data-hash]').on('click', function(e) {
					e.preventDefault();

					var target = $(this).attr('href'),
						offset = ($(this).is("[data-hash-offset]") ? $(this).data('hash-offset') : 0);

					self.scrollToTarget(target, offset);

					return;
				});

				// Mobile Redirect - (Ignores the Dropdown from Bootstrap)
				$('.mobile-redirect').on('click', function() {
					if ($window.width() < 992) {
						self.location = $(this).attr('href');
					}
				});

				return this;
			},

			scrollToTarget: function(target, offset) {
				var self = this;

				$('body').addClass('scrolling');

				$('html, body').animate({
					scrollTop: $(target).offset().top - offset
				}, self.options.scrollDelay, self.options.scrollAnimation, function() {
					$('body').removeClass('scrolling');
				});

				return this;

			}

		}

	});

}).apply(this, [window.theme, jQuery]);

AND in other files all the values right?

---

[Support]

Yes, that’s all you need to change.

---

[omexlu]

Hi,

I have make some tests on local machine all the variables must also be changed on ‘css/skins/default.css’, right? (because i have some problems with colors, after changes all is good)

The second problem is that the ‘<div class=”home-concept”>…</div>’ don’t get displayed as before, something is wrong at this place.

EDIT: i think i have changed to much in themes.css (but you said change all media querys) ?
Maybe dont change this part in themes.css

/* Responsive */

@media (max-width: 991px) {
	.home-concept {
		background: none;
	}

	.home-concept .project-image {
		margin: 20px auto 0 auto;
	}

	.home-concept .process-image {
		margin-top: 0;
		padding-bottom: 25px;
	}
}

Maybe you know more about that.

Thanks in advance.

---

[Support]

Hello, you are right, you actually need to change the media queries only in the rules that have #header inside.

Kind Regards,

Jonas

---

[Author]

Posts