Mobile Navigation

[dal]

Hey, great work on the theme!

Is there a way to change the navigation on iPhone and other mobile devices from the dropdowns to buttons similar to the attached image? I only have two pages and I’d rather have either a horizontal or vertical list than have a dropdown list to navigate between the two.

Thanks for any response.

[Ben – SUPPORT]

Hey, just edit layout.css and remove line 277-283

#main-navigation {
	display: none;
}
#mobile-navigation {
	display: block;
	float: none;
}

Thanks
Ben

[dal]

Thank you. I’ve removed this code and although this has removed the dropdown, the resulting buttons are moved over to the right instead of being centred. Is there anything else I need to change to make these centred?

[Ben – SUPPORT]

Sorry for the late reply I’ll add onto your code

@media only screen and (max-width: 767px){
#main-navigation{
float:none;
margin:0px auto;
}
#main-navigation ul{
text-align:center;
}
#main-navigation ul li{
float:inherit;
}
}

Try that

Thanks
Ben

[dal]

Perfect!

Thank you for the help.

[dal]

Hey again,

Since updating to WP 3.6 (I think) this no longer works, and my mobile navigation is back to the original dropdown. Is there anything else I may need to change now?

Thanks again.

[laranz – SUPPORT]

Hi,

Did you confirm that the codes you already put is in the same place? If so please put the codes back.

Let me know, what you got.

Thanks,
laranz.

[dal]

Of course. The code supplied by Ben worked when I first inserted it, but now it doesn’t. The code hasn’t been edited, moved or replaced, just stopped working.

[laranz – SUPPORT]

Hi,

Show me the link of your website, I try my level best to assist you 🙂

Thanks,
laranz.

[dal]

This reply has been marked as private.

[laranz – SUPPORT]

Hi,

You don’t want the mobile menu, right?

Try this

@media only screen and (max-width: 767px){
#mobile-navigation{
display: none;
}
#main-navigation{
display:block;
margin-top: 20px;
}
}

remove the code that Ben sent.

PS: Sorry for a late reply.

Let me know, what you got.

Thanks,
laranz.

[dal]

Hi Laranz,

Thanks for getting back to me. The code you have given me has worked almost perfectly. I’ve attached a screenshot of what I get, and what I’d prefer. The left is my current result, is there anything else I need to add so the filter button lines up centred underneath the pages like the right example, like it did previously?

Thanks.

[laranz – SUPPORT]

Hi,

Try to add this to along with the styles I gave.

.portfolio-filter-wrap{
clear:both;
}

Let me know, what you got.

Thanks,
laranz.

[laranz – SUPPORT]

Hi,

Try to add this to along with the styles I gave.

.portfolio-filter-wrap{
clear:both;
}

Let me know, what you got.

Thanks,
laranz.

[dal]

Hi Laranz,

The additional code is exactly what I want for mobile, but this code also moves the filter onto a separate line on my PC and larger displays. Can I make this extra piece of code work for mobile only?

Thanks again for the help.