2 replies [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 25 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

I am having an issue with styling my website so that it should be compatible for a mobile device. On each page of my website, I have the logo floating left and the nav bar floating right. I want to make the nav bar bigger, but when I do, the whole nav bar jumps down when viewed on a mobile device, because the width of the screen is not big enough. But on the computer screen, the nav bar is too small. The url to my site is http://rejuvenateusa.org/home.html. Is there a way to solve this?
Thanks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi suavedesign, Sounds like a

Hi suavedesign,
Sounds like a job for media queries.
Find the point the break occurs when the menu is the size you want, then add a media query for devices smaller then that width.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 25 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Thanks for your response. I

Thanks for your response. I have no prior experience with media queries. Are there any tutorials that would help me understand how to do this?
Thanks again!