Mobile Navigation

[dal]

Hi Laranz,

I’ve attached screenshots of what the code does to my site when viewed on screens larger than a portrait iPhone.

With the previous code, on desktop browsers the filter remained to the left of the word portfolio, and on mobiles and smaller screens the filter was centred below the two page options which was perfect. I’d really like to get back to that.

[dal]

Hi Laranz,

If I move your code to below mobile navigation and above the main navigation, i.e:

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

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

#main-navigation{
display:block;
margin-top: 20px;
}
}

this moves the filter back to the left of ‘portfolio’, centres the menu on portrait mobile view, but on landscape view, the menu is still moved to the right (Screen-Shot-2013-09-27-at-20.47.23.png in the above post).

So close! Any ideas on anything else I can try?

[dal]

Update: By using a combination of your code and Ben’s original code, I’ve finally got rid of the dropdown menu, and have the filter underneath the centred menu on portrait and landscape iPhone. It may not be the most efficient way, but it works!

@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;
}
}

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

#main-navigation{
display:block;
margin-top: 20px;
}
}

[laranz – SUPPORT]

Hi,

It looks okay! Glad you fixed it 🙂 Sorry for a late reply though.

both are for the same target, so you can include all the styles including in one container.

@media only screen and (max-width: 767px){ your code. }

Let me know if you have any other questions.

Thanks,
laranz.