Hi
I’m redoing a webpage and as the screen narrows towards the size of mobiles the navbar looks terrible,
is there a way of lining up vertically the various links?
http://pintotours.net/TEMP/SIDE/open2.html
Thank you
Hey qim
Yes, you need to use media queries. You’ve used these before, yes?
I dream about them: nightmares!
But how do I do it in the queries? as a table? Or do you mean continuous changes every 30px or so?
Take a look at this rule in your CSS
#nav li { display: inline; padding: 0 25px; }
Decide where you want your media query, then change (remove?) the display property. You’ll likely have to look at how it’s positioned too, as it’s currently centred, but it should be as simple as that.
I would probably use display: table first, to space it out more fluidly, so the query is not needed so soon.
Then the question is: what do you do in the query?
Good lord, no!! Decide where you want to change the layout.
1 Like
Really? I’m totally confused!
but that’s what is changing from one nav to another…
Do you mean display:table in the queries only? I suppose so
Now I’m puzzled. Could you mock up how you want it to look? Something hand drawn would do.
No, make that the default, the menu should go smaller before you need a query.
I want it look in such a way that you don’t say “That’s horrible!”
Hi Sam, I had just done a little change in the queries that now have display:table and text-align:left
Look a tiny bit better…
Have a look
EDIT
One answer might be to make them all the same length. But how?
That will be your 25px padding holding it out the a certain size. You need to consider moving to a percentage value, then it will gradually collapse as the screen size reduces.
Good idea! And less padding, AND have you read my latest brainstorm?
Doesn’t really give me an idea of what you’d like it to do unfortunately. Moving to percentages will allow you to reduce the page down so far until the text itself starts driving it to stack up vertically. It’s at that point, you need to think about a media query, and what you want the menu items themselves to do. Stacking them vertically is usually what you’d expect to do, but that doesn’t necessarily look good when they’re all centred.
I’ve reduced the padding. It looks a bit better.
Is it possible to give all the links a fixed length (in %)? That might solve the porblem
I mention display: table because that will make even more efficient use of available space. Its default behaviour will size each cell according to content, though you can use fixed layout on wider screens to make each one equal in width. With this method I would centre the text and have minimal padding.
I used that here, where it is clearly illustrated, as you can see the cell edges.
Note, on wide screens it used fixed layout, the cells are equal width. At about 830px, the longest item “Company Profile” gets tight, while the other items have free space. It then uses the default table behaviour, width according to content. Now the menu can go even narrower without breaking. When that gets too tight, about 600px, the major query kicks in and the whole menu goes.
Hi Sam
Interesting.!
My head’s had it for today. I’ll think it over and have a go it tomorrow morning. I’ll have to see how I did a table for the Search box and go from there. Tables are not my forte. In fact, nothing is!
Many thanks
Just want to make it clear, this is Display Table, not <table>
Also, just noticed something confusing about the menu. When wide, it lists countries/cities, but smaller, lists things like Airports, Eating Etc. 
It’s supposed to do that, but I take your point and give it a think.
When the sidebar is present you get cities in the navbar; when the sidebar disappears the links in it are more important and so they take over the space in the navbar. In any case, if someone is interested in Barcelona it is more likely that he want to read about other city information, than jump over to the Sydney page.
Remember that it is only confusing to you because you are looking at both situations. A visitor is either on a PC, a tablet, or a mobile and he will get whatever version.
Ahhh…
Well it is already in disply:table. But what does it do? How do I go about styling it?
That makes sense now.