Mobile site doesnt look right

The hamburger icon for the responsive menu is supposed to show up automatically for the latest version of Epik (1.4 I think). Did you setup this site fresh from the latest version or did you have an earlier version and added code/files in on top? If you started from an earlier version you may be missing some code/files. If not let me know so I can try and figure out what it could be.

The css seems to be there, but the html part isn’t showing up in your source code. Check your functions file and see if there is something like this –

wp_enqueue_script( 'epik-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js',

The above line makes sure that the js file (located in the js folder in your theme) is activated. So check to see if that’s all there.

The only other thing is the actual file and the folder it’s located in. Check and see if you have a js folder in your theme and make sure the file labeled responsive-menu.js exists.

The code inside should look something like this –

jQuery(function( $ ){

	$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

	$(".responsive-menu-icon").click(function(){
		$(this).next("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").slideToggle();
	});

	$(window).resize(function(){
		if(window.innerWidth > 768) {
			$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu, nav .sub-menu").removeAttr("style");
			$(".responsive-menu > .menu-item").removeClass("menu-open");
		}
	});

	$(".responsive-menu > .menu-item").click(function(event){
		if (event.target !== this)
		return;
			$(this).find(".sub-menu:first").slideToggle(function() {
			$(this).parent().toggleClass("menu-open");
		});
	});

});

Try replacing that code with what I have above and let me know when you do so I can check your source code to make sure it shows up. If it does then will need to change a couple lines in your css to match the code above.

Backup your files if you need to.

@nickmustafa If you’re able to create a temporary user/password I can login and get everything working for you. If so, just add it as a private reply.

An FTP login would be much better though just in case there is a php error….it’s much safer to edit php files this way.

@nickmustafa Try and remove the .title-area from the code on line 4019 in your style.css file. It is grouped in with the sidebar in the responsive section, which means when the site is viewed on a tablet or any other mobile device the title area and sidebar will adjust to 300px width…..and since your logo is larger than that we won’t need that code –

	.sidebar-primary,
	.title-area {
		width: 300px;
	}

Change the above to this –

	.sidebar-primary {
		width: 300px;
	}

I don’t have an iPad either, but I can still assist in getting this fixed. Let me know if that helps.

Also, one of the errors eric is talking about is this –

background-position: center middle!important; should be this instead –

background-position: center !important; There needs to be a space in between, and also, it supposed to be center instead of middle.