Using Media Queries to change a vertical nav bar into a horizontal nav bar using just css.


#1

For a college web class, the professor decides to give us an HTML and CSS project where the original HTML and CSS is set for desktop computers. He would like us to use media queries to convert the site to be more responsive. I am having an issue with taking the navigation bar which is vertical right now and converting it to a horizontal navigation bar with the text centered. I have checked a few of the tutorials on Tuts+ that I have, and nothing they recommend seems to be working. Is there a specific course on just converting old HTML sites to be responsive? Thanks for the help.


#2

Hi @georgep1, I think you’ll find what you’re looking for in this article: Life Beyond 960px: Designing for Large Screens. It’s a discussion piece, rather than an instructional tutorial, but it uses a practical example to explain things.

Here’s the final demo, which does what you’re asking I think. You can grab the source files from the sidebar too. Hope that helps!


#3

Hi Ian, thanks for getting back to me. I read your article it was very interesting, and your demo did what my professor wanted. However, when I went to download the files that had the link on the side, the link took me to marketing.envato.com.

What I did to get the nav bar to work was to scrap the professor’s parameters and did the nav bar horizontally first then copied that and put it in the media query and pasted the professors CSS back in. Now I just need to go back and change all the px’s to either em or rem so he cannot complain that it is not responsive.

Thanks again for your help.


#4

Oh sorry @georgep1, the source download link was outdated. All the source files are now available on GitHub, feel free to grab them and play with them https://github.com/tutsplus/Life-Beyond-960px (glad you were able to figure out the problem though!)