Messy navbar

HTML & CSS
21

It doesn’t look that way to me, the <li>s are display: inline and the <ul> I suppose default block.

Spaces the items out like a table, with width according to content, like my example.

Something like:-

#nav ul {
  display: table ;
  width: 90% ; /* or whatever you want, you could use margins instead */
  margin: 0 auto;
}
#nav ul li {
  display: table-cell ;
  text-align: center ;
  padding: 4px ; /* or whatever, just to stop clashing with the sides */
}
22

Hi

I have

@media screen and (max-width:985px) {

#side{
display:none;
}
#nav {
display:none;
}
#nav2{
display:table;
text-align:left;
}

}

The code you gave me above is that for the queries or from word go?

23

From, go. It should delay the need for a query.

24

The big question still is what you want to do in the query. Are there always 9 items? Maybe 3 x 3 layout?

25

In this type of page, YES! Although I might add another 1 or 2 if space is available. But once things are fixed there will be over 100 page using the same code. I hope…

Yes, 3 x 3 would be fine.

PS - I live in snow land and wonder what a 3 x 3 would do for my driving?

26

So long as there are always 9 menu items, otherwise it could get messy again.

27

So, what’s involved? 2 or 3 break-points in the queries, or some magic that will take care of everything?

28

I’m sorry, I’ve just realized that I have been making the little changes in another page, which is more updated.

http://pintotours.net/Europe/Spain/open2.html

29

This is a crude example for the menu with display table on wide screen, then 3 x 3 on the small screen.

2 Likes
30

Thanks

I’ll have a go at it tomorrow

31

Hi Sam

I had a peep in a test page on its own and did not realize this was the finished product! Just what I wanted.
I’ll incorporate it into the full page tomorrow

I guess this was my Xmas present!

Many thanks and a Happy Christmas to you too!

32

Thank you Sam

I’ve tested the code in a temporary front page and it looks very professional!

http://pintotours.net/TEMP/BUTTON/

In fact. it is now published

Many thanks

EDIT

I have problems with the page. I’m going to start again…

1 Like
33

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.