Display Mobile Menu

[artemartemov]

Hey there

First off this is a wonderful theme, and I personally love how much time thought and effort your team has put into building it.

I have a question in regards to the navigation.

I would like to disable the main navigation across all screen sizes and have the mobile menu function on mobile, tablet, and desktop.

I am familiar with JS and CSS so it wouldn’t be an issue for me to do a little hack, but I am having trouble locating the JS that fires up the menu.

I successfully hid the main menu, and had the mobile display using this code:

 #logo {
        width: 100%;
        padding-right: 30px;
    }
    #logo a {
        float: left;
    }
    #logo a.mobile-menu-show {
        display: block!important;
    }
    #main-navigation {
        display: none;
    }
    .header-1 #main-nav, .header-1 #main-nav-sticky-wrapper, .header-1 .header-left, .header-1 .header-right, .header-2 .header-right, .header-2 #main-nav, .header-2 #main-nav-sticky-wrapper {
        display: none;
    }

However, it doesn’t actually fire up the JS on devices too large so still is only able to be activated on mobile.

Thank you in advanced for your time and help with this little (personal) issue.

Best,
Artem

[Mohammad – SUPPORT]

HI,
I am glad that you managed all of this. Please use this custom css code:-
div#logo a.visible-sm.visible-xs.mobile-menu-show, div#logo a {display:block !important;}
Thanks 🙂
With Best Regards
Mohammad

[artemartemov]

Hello,

Thank you for the speedy reply – I tried out your code, however the javascript is still not firing on devices that are over 992px wide. So when I hit the menu button on a larger screen the actual menu does not reveal, however when I size down below 992px it pops open.

Maybe this is a bootstrap issue?

Best,
Artem

[Mohammad – SUPPORT]

Hi,
Please insert this code at functions.php of child theme-:

function sf_logo($logo_class) {
			
			//VARIABLES
			global $woocommerce;
			$options = get_option('sf_dante_options');
			$show_cart = $options['show_cart'];
			$logo = $retina_logo = "";
			if (isset($options['logo_upload'])) {
			$logo = $options['logo_upload'];
			}
			if (isset($options['retina_logo_upload'])) {
			$retina_logo = $options['retina_logo_upload'];
			}
			if ($retina_logo == "") {
			$retina_logo = $logo;
			}
			$logo_output = "";		
			$logo_alt = get_bloginfo( 'name' );
			$logo_link_url = home_url();
			$logo        = str_replace('http://','//',$logo);
            $retina_logo = str_replace('http://','//',$retina_logo);
			
			// LOGO OUTPUT
			$logo_output .= '<div id="logo" class="'.$logo_class.' clearfix">'. "\n";
			$logo_output .= '<a href="'.$logo_link_url.'">'. "\n";
			if ($logo != "") { 
			$logo_output .= '<img class="standard" src="'.$logo.'" alt="'.$logo_alt.'" />'. "\n";
			} else {
			$logo_output .= '<h1 class="standard">'.$logo_alt.'</h1>'. "\n";
			}
			if ($retina_logo != "") {
			$logo_output .= '<img class="retina" src="'.$retina_logo.'" alt="'.$logo_alt.'" />'. "\n";
			} else {
			$logo_output .= '<h1 class="retina">'.$logo_alt.'</h1>'. "\n";
			}
			$logo_output .= '</a>'. "\n";
			$logo_output .= '<a href="#" class="mobile-menu-show"><i class="ss-rows"></i></a>'. "\n";
			if ($show_cart && $woocommerce != "") {
			$logo_output .= '<a href="'.$woocommerce->cart->get_cart_url().'" class="mobile-cart-link"><i class="ss-cart"></i></a>'. "\n";
			}
			$logo_output .= '</div>'. "\n";
			
			
			// LOGO RETURN		
			return $logo_output;
		}

Thanks 🙂
With Best Regards
Mohammad

[artemartemov]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
#mobile-menu-wrap{display:block !important;}
Thanks 🙂
With Best Regards
Mohammad

[artemartemov]

Awesome! that actually made the menu appear!

However the menu button is now hidden. So unlike on the smaller screen sizes where the entire container slides over – in this case the menu overlaps the main container as well as the menu button.

[Mohammad – SUPPORT]

Hi,
So what is the problem with this? I am not getting you clearly.
Thanks 🙂
With Best Regards
Mohammad

[artemartemov]

The functionality of the menu at 992px and smaller VS 993px and bigger is different.

On click of the menu button in both instances the menu does reveal.

But the correct reveal (that includes the main body container shifting to the left with the menu) does not happen on sizes larger than 992px.

I assume it is a line of JS that is preventing the entire container to shift as well – where could I find it?

Best,

[Mohammad – SUPPORT]

Hi there,

Unfortunately that is not part of the current theme functionality, and it’s not within the scope of our support to be able to provide that functionality as it is more work than a small customisation. While we’d love to be able to support every customisation request, we simply don’t have the time. We recommend that you seek a freelance developer if you need that functionality, potentially from one of the below resources:

https://codeable.io

Home

http://www.microlancer.com

Thanks 🙂
With Best Regards
Mohammad

[artemartemov]

Hey,

I understand that implementing javascript takes time and resources and I am totally comfortable adjusting it myself – I was just inquiring which JS file actually controls that functionality, that’s all.

Best,
Artem

[Mohammad – SUPPORT]

Hi,
Please use this custom css code-:

@media only screen and (min-width: 992px) {
	.mobile-menu-open #container {
		transform: translate3d(-320px, 0px, 0px) !important;
		transform: translate3d(-320px, 0px, 0px) !important;
	}
}

Thanks 🙂
With Best Regards
Mohammad

[artemartemov]

Mohammad! You are a gentleman and a scholar thank you for this!

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved.
With Best Regards
Mohammad