Website doesn't render properly on mobile

Hi,

I can understand something like this can be frustrating. In order to get a better sense of what’s happening can you please provide the following information:

What kind of cellphone are you using to view your site? Is it an Android or an iPhone.

zerif-lite sounds like either a font or a WordPress theme. If it is a font, please know that not all fonts will render correctly across all devices. If, let’s say I have a font that is installed on my computer, then my computer will be capable of rendering that particular font. The same cannot be said of mobile devices. If you’re using a font that only your computer can render, your mobile device will default to displaying a font that it can display.

At any rate, please provide as much information as possible. I’ve selected to receive email notifications for this post. I’ll take another look once more information is available. Thanks!

Hi,

Thank you for replying to my thread. Zerif-lite is a wordpress theme. Right now I am having problem on the navigation toggle button. It doesn’t show the options when I click on the navigation button. However, if I scroll down and then click on the navigation toggle button it displays the menu. I am using android and iphone both to test my website. If you could take a look that would be great.

The code I am using for the navigation menu so far is as follows:
Not sure how much of this code do I need.

[Large code excerpt removed by moderator per forum rules. Please use Pastebin or a Gist for all large code excerpts, they work better anyway.]

Hi,

Thank you for replying to my thread. Zerif-lite is a wordpress theme. Right now I am having problem on the navigation toggle button. It doesn’t show the options when I click on the navigation button. However, if I scroll down and then click on the navigation toggle button it displays the menu. I am using android and iphone both to test my website. If you could take a look that would be great.

The code I am using for the navigation menu so far is as follows:
Not sure how much of this code do I need.

@media screen and (max-width: 480px){
.navbar {
	background: #FFF;
	border: 0;
	border-radius: 0 !important;
	text-align: left;
	-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
	box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
}

@media screen and (max-width: 480px){
#main-nav {
	position: fixed;
	width: 100%;
	z-index: 1000;
	min-height: 75px;
}
}

@media screen and (max-width: 480px){
#main-nav.fixed {
	position: fixed;
	top: 0;
}
}

.nav li a.nav-active {
	color: #b8db4d !important;
}
.nav li a.nav-active:before {
	position: absolute;
	margin: auto;
	z-index: 1;
	content: "";
	width: 75%;
	height: 2px;
	background: #b8db4d;
	bottom: 0px;
	left: 12.5%;
}
.navbar-inverse .navbar-nav >li {
	display: inline;
	margin-right: 20px;
	margin-top: 20px;
}
.navbar-inverse .navbar-nav>li:last-child {
	margin-right: 0 !important;
}
.navbar-inverse .navbar-nav>li>a {
	color: #404040;
	padding: 0;
	line-height: 35px;
}
.navbar-inverse .main-navigation ul > li {
	display: inline;
	margin-right: 20px;
	margin-top: 20px;
}
.navbar-inverse .main-navigation > ul > li:last-child {
	margin-right: 0 !important;
}
.navbar-inverse .main-navigation > ul > li > a {
	color: #404040;
	padding: 0;
	line-height: 35px;
}
.navbar-inverse .navbar-nav ul.sub-menu {
	display: none;
	position: absolute; top: 100%;
	background:#fff;
	width:200px;
	box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08);
}
.navbar-inverse .navbar-nav ul.sub-menu {
	margin:0;
}
.navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu{
	position: absolute;
	left:100%;
	top:0;
}
.navbar-inverse .navbar-nav ul.sub-menu li {
	float: none;
	position: relative;
	list-style:none;
	padding:10px;
}
.navbar-inverse .navbar-nav ul.sub-menu li a {
	color:#404040;
}
.navbar-inverse .navbar-nav ul.sub-menu li:hover > a {
	color:#b8db4d;
}
.navbar-inverse .navbar-nav li:hover > ul.sub-menu {
	display: block;
}	

.navbar-brand {
	height: 76px;
	position: relative;
	line-height: 45px;
}
.current a {
	color: #b8db4d !important;
	position: relative;
	outline: none;
}
.current:before {
	position: absolute;
	margin: auto;
	z-index: 1;
	content: "";
	width: 75%;
	height: 2px;
	background: #b8db4d;
	bottom: 0px;
	left: 12.5%;
}
.navbar-inverse .navbar-nav>li>a:hover {
	color: #b8db4d;
	outline: none;
}

@media screen and (max-width: 480px){
.navbar-toggle {
	border: 0;
	background-color: #808080;
	margin-top: 23px;
}
}

.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
	background-color: #b8db4d;
	filter: alpha(opacity=100);
	opacity: 1;
	box-shadow: none;
}

@media screen and (max-width: 480px){
.navbar-toggle.active{
    background-color: #b8db4d !important;
}
}

@media screen and (max-width: 480px){
.navbar-toggle.collapsed{
    background-color: #808080 !important;
}
}

By navigation button do you mean the button with three lines going through it on the upper right corner of your mobile site? If so, those options display correctly for me.

Hey there,

Your menu works fine on my android device. Maybe you can try clearing your history and cache. Thanks!

I did clean my history and cache. The only issue is when I open the website and click on the menu nothing happens. But it gives options only if i scroll down. Same behavior on my Note 4 and Iphone 5. In iphone 5, the menu is not sticky. I want the menu to be sticky on all the devices. Do I need to add iphone specific code ?

Also I want to reduce the spacing between the address on the top and the slider. I couldn’t do that. Any help is highly appreciated. Thanks.

Hey There,

you have have done a lot of modifications to the theme and it is hard to locate where the issue is.
Can you check our demo, if that problem is happening to it?

Thanks a lot

I love this theme !! but it is not working in my iPhone ?? Any suggestions??? \ the scrolling in my website is not working wither :(…. my website is https://www.sparklediamore.com

Any suggestions?