Help with centralising a menu

HTML & CSS
1

Hi,

I am trying to centralise a menu when the window is resized smaller.
When the site is in full screen mode for computers, it is on the right, which is ok.

When the window is resized (for phones, tablets etc), I would like the menu to be centralised in the container…

Can anyone shed some light on what I am missing please? Inline block could solve this?

link: cannonaccountingservices.co.uk

Any help is appreciated :slight_smile:

2

This can be quite tricky, but here are some resources that might help:

http://www.css-lab.com/demos/nav/inline-block/x-brwsr-node-fix.html
http://pmob.co.uk/pob/centred-float.htm
http://www.sitepoint.com/forums/showthread.php?p=4652921#post4652921
http://www.visibilityinherit.com/code/center-nav.php

3

Thanks for links. Certainly is tricky.

Google gave me one or two of those pages when searchng prior to posting, still having issues getting it to work.

4

Yes use inline-block instead of float at the smaller window sizes.

e.g.


.menu ul{
text-align:center;
float:none;
}
.menu li,.menu li a {
display:inline-block;
float:none;
vertical-align:top;
}
* html .menu li,* html .menu li a{display:inline}
*+html .menu li,*+html .menu li a{display:inline}
5

Works a treat, thanks very much :slight_smile:

6