Homepage › Community Forums › Epik Theme Support › Mobile site doesnt look right
Tagged: mobile, responsive
Hi – the mobile site of my website does not look right.
When accessing on mobile or tablet the header looks messy. How can i have the burger symbol for the menu on mobile site? at the moment its showing each individual menu item which looks messy.
Also, the information in my ‘header right’ widget area (phone number and translation flags) is showing up in the wrong position.
please check out my site on a tablet/phone to see what i mean.
http://www.residencyinvest.com
Thanks!
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.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Thats what i thought – it should happen automatically.
No i only downloaded the theme from studiopress 1 week ago – so it is the latest version.
I haven’t tried to change anything. See if you can figure out why its not working.
Thanks Eric
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.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
HI Eric
I checked the function file and this line is in there…see below.
wp_enqueue_script( ‘epik-responsive-menu’, get_bloginfo( ‘stylesheet_directory’ ) . ‘/js/responsive-menu.js’, array( ‘jquery’ ), ‘1.0.0’ );
What else can it be?
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");
});
});
});
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hi – I just checked and this folder and file does exist in the theme.
The code in the file name is slightly different however and not as detailed. see below the exact code from the file
jQuery(function( $ ){
// Enable responsive menu icon for mobile
$(“header .genesis-nav-menu”).addClass(“responsive-menu”).before(‘<div id=”responsive-menu-icon”></div>’);
$(“#responsive-menu-icon”).click(function(){
$(“header .genesis-nav-menu”).slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$(“header .genesis-nav-menu”).removeAttr(“style”);
}
});
});
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.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
I have changed the code to replace it with what you suggested above, and still the site does not have the dropdown burger menu like it should.
This is a big problem as most of our users access the site from mobiles/tablets and at the moment the site looks a mess in mobile format.
Thanks
Nick
@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.
Hi Wes did you receive the details?
Yes I just now saw it, but do you have an FTP login? That would be much safer to use when editing PHP files. Whenever there is a PHP error the entire site will show a white screen with the error info, and if we use FTP we can avoid being locked out of the site. I can also add the folder with the JS file much easier as well.
Hi Wes just to let you know I sent you the login info in private reply. please let me know its all received
thanks
I see what happened, the responsive-menu-icon
code is there but it’s labeled as an ID when it should be a class. So to instantly fix this you would need to change the #responsive-menu-icon
to this – .responsive-menu-icon
instead. There are four lines in your css that have it, but I already went ahead and changed it for you. Let me know once you check it out.
Thanks Wes! All fixed now..
Did you see my other question about the logo size in the mobile version of the site?
In mobile version it is cutting off half the logo, i.e. only showing around 50% of the logo.
Can you please fix this?
Thanks again
Hit your reload button on your browser and take another look to see if it shows up properly on your end.
I added this to the responsive code –
.header-image .site-title a {
background-size: contain !important;
}
Hi Wes
A few people have contacted me and said that the problem stated above (half the logo being cut off) still exists when the website is accessed on iPads (and i assume other tablets).
The problem originally existed when the site was accessed on Mobiles/cell phones. That problem was fixed by you.
However it appears that the logo is showing up normally on mobiles/cellphones but showing up wrong on iPads/tablet devices – with half of the logo being cut off.
Thanks
NIck
@nickmustafa There are some errors in your css that you’ll probably want to fix (it could be whats causing your issue). Here is one of them on line 4056 –
.header-image .site-header,
.header-image .site-header .wrap {
background-position: center middle!important;
}
I got a hold of an iPad and checked your site and the flags are showing up right next to the logo. Not sure if that’s what may also be causing the issue or not though. It’s kind of hard to inspect code on an iPad.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hi how do i fix this issue then? it is showing up fine on a mobile/cell phone but not on a tablet…
As mentioned, it may be difficult to fix since iPad doesn’t have an easy way to inspect code, but lets try some things.
If you move the flags down from the logo, lets see if that makes a difference. Add this to your css in the responsive section (the iPad/tablet section) around line 4053 – ‘
.header-image .title-area {
clear: both;
}
There may have to be more things done since you added some code and adjusted your css…..but we should be able to get this fixed. Let me know what happens so I can figure out the next step.
I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Hi Eric – firstly – thank you for your assistance its much appreciated!!!
I have tried to add the you suggested above to line 4053
.header-image .title-area {
clear: both;
}
it doesn’t appear to have made a difference with the iPad version of the site…
Any other suggestions?
also, you said there are some errors, one of them being the below, how do i fix this?
‘There are some errors in your css that you’ll probably want to fix (it could be whats causing your issue). Here is one of them on line 4056 –
.header-image .site-header,
.header-image .site-header .wrap {
background-position: center middle!important;
}
@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.