Docs

[Alexandra]

Hi,

Looked on here, but couldn’t find anything. 🙁

Collapsed Mobile Menu… the collapsed menu doesn’t allow you to naturally scroll through the area (I don’t even know how to explain this, it flies through the area in warp-speed and scrolls you down almost halfway through the site).

Possible cause? Linked area appears to be expanding almost entire width of menu – can be seen if you hover them via inspect on chrome.

Another question: how can i affix the mobile menu like the desktop menu to the page (position: fixed doesn’t work).

Thank you, again!

[Alexandra]

This reply has been marked as private.

[Alexandra]

UPDATE: I put a max-height and max-width on the menu items which seems to have fixed the mobile warp-speed scrolling.

However, still wondering about making the mobile menu fixed…

Thanks, in advance! 🙂

[Prasant Rai]

Hello Alexandra,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

@media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

Thanks.

[Alexandra]

Perfect!!! Thank you!

A few more questions:

1. How to change the bars icon to X icon on tap/click?
2. Minimize the size of the mobile menu (currently takes up a lot of space in the viewport when opened and even when closed)?
3. How to force menu to automatically close when someone clicks a menu item (all menu items are currently linked to scroll to different sections on the home page)?

Thank you so much! I really, really appreciate it!

[Alexandra]

This reply has been marked as private.

[Jade]

Hello Alexandra,

#1 Would you mind clarifying what you mean with this item?

#2 Please add this CSS as well:

.x-navbar .mobile .x-nav li > a {
    font-size: 1em;
    padding: 8px 0;
}

.x-navbar .mobile .x-nav {
    margin: 10px 0;
}

#3 Please add this code in the JS customizer:

jQuery(document).ready(function($){
	$('.menu-item a').click(function(){
		$('.x-nav-wrap.mobile').removeClass('in');
	});
});

Hope this helps.

[Alexandra]

#1. Mobile Menu Icon: to animate from the 3 bars to the x icon (e.g., [x_icon type=”times”] ) when clicked or tapped.

#2. Size of mobile menu – height is inherited (80px) from navbar inner, per the desktop specs, but I would like to change it to 60px when mobile menu is activated, how can I do this without affecting the size of the menu bar on desktop?

#3. Does not work on mobile, but seems to work in desktop (mobile menu is set to kick in at 979px)
— Also tried, `jQuery ( function($) {

$(‘.mobile .x-nav a’).on(‘click’, function(){ $(‘.x-btn-navbar’).trigger(‘click’); } );

} );
`
via https://community.theme.co/forums/topic/mobile-menu-navigation/ which, again, works on desktop but doesn’t work on mobile.

Thank you again!!!

[Rad]

Hi there,

1. It can’t be animated to another icon. Icons are fonts, and it’s like animating letter A to B. To make it possible it shouldn’t be an icon, but just CSS lines that rotates.

2. Please add this CSS as well,

@media ( max-width: 979px ) {
.x-navbar-inner {
    min-height: 60px;
}
}

3. Please try this one,

jQuery(document).ready(function($){
	$('.x-navbar .mobile .x-nav li a').off('touchstart touchend').on('click', function(){
		$('.x-nav-wrap.mobile').removeClass('in');
	} );
});

Thanks!

[Alexandra]

Hi again,

Thank you so much! #2 & #3 works perfectly!!!

For #1 (animate icon question) – how could I achieve this with just CSS lines then, instead of the icon?

I really, really appreciate the help! Thank you again, in advance! 🙂

[Rue Nel]

Hello There,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Perhaps this link could help you:

Animating an SVG Menu Icon with Segment

http://tympanus.net/Tutorials/AnimatedMenuIcon/
http://tympanus.net/Development/AnimatedSVGIcons/

Thank you for your understanding.

[Author]

Posts