Mobile Menu not showing properly

Hi there,

Thanks for writing in,

You can eliminate the extra space around the logo by a custom CSS. Please add the following code under Appearance > Theme Options > custom Css:

@media only screen and (min-device-width : 768px) {
 .title-container {
     display: none;
 }
}

Second, you can get the menu icon back on iPad screen by adding the following code under your custom CSS:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
	#wrapper .dd-container .dd-selected-text span:before {
	position: relative;
	top:0px;
	padding: 0px;
	margin: 0px;
	  content: "Menu";
	}
}

#wrapper .dd-container .dd-selected {
  padding-top: 3px !important;
}

#wrapper .dd-container .dd-selected-text {
  margin-top: 0px;
}

.link-effect a:hover span, .link-effect a:focus span {
  -webkit-transform: none !important;
  -ms-transform: none !important;
  transform: none !important;
}

Hope this helps!

Thanks.

This is very helpful thank you! With this code can you refer how to left align the logo and the menu? Instead of center align?

Hi there,

Yes, you can achieve that by adding the following code under your custom CSS:

@media only screen and (max-width : 768px) {
 #wrapper .dd-container .dd-selected-text {
  margin-top: 0px;
  text-align: left !important;
  display: block !important;
  max-width: 39px !important;
 }

 #logo-image {
  text-align: left !important;
  display: block;
 }
}

Hope this helps!

Thanks.

Thanks this worked, but the drop down menu on mobile is still center aligned. Is that fixable? Here is the css I have below. Thanks for your awesome help.

@media only screen and (min-device-width : 768px) {
.title-container {
display: none;
}
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
#wrapper .dd-container .dd-selected-text span:before {
position: relative;
top:0px;
padding: 0px;
margin: 0px;
font-family: FontAwesome;
content: “f0c9”;
}
}

.link-effect a:hover span, .link-effect a:focus span {
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
@media only screen and (max-width : 768px) {
#wrapper .dd-container .dd-selected-text {
margin-top: 0px;
text-align: left !important;
display: block !important;
max-width: 39px !important;
}

#logo-image {
text-align: left !important;
display: block;
}
}

Hi,

I am seeing your mobile menu aligned to the left.
Please try clearing the browser cache, and history of your mobile browser, then revisit the site.

Thanks!

I did clear the cache. Still showing center aligned. I am on an old ipad though so might have something to do with that. I did see on a newer ipad it works fine. Thanks!

Hi there, I really need to stop the mobile dropdown menu overflowing to the outside of ‘the page’. Hoping you can advise.

Thanks Alex