Centering cascading navigation bar in fluid grid layout

[KMacL]

I can't seem to centre my cascading navbar within my fluid grid layout. I've tried setting ul margins to 0px auto but it knocks the submenus out and seems to remove the fluidity for the mobile grid. I'm quite sure it'll be something very obvious, but I can't think what.  Can anyone help?

[B i r n o u]

I'm not sure to understand quite well your question, do you mean that you have an UL/LI menu that you want to center on the page... did you try text-align center on UL ?

[KMacL]

Hello Birnou, thank you for replying.  Yes, I have an ul/li to centre on my page, within a fluid grid, but it won't centre.  When you mean try text align, do you mean like this (which doesn't work):

ul {

  list-style-type: none;

  text-align:center

}

Or this? (which doesn't work either)

ul#navbar li {

  width: 130px;

  text-align: left;

  position: relative;

  float:left;

  margin-right:8pt;

}

or should it be in here? (sorry!):

ul#navbar a {

  text-decoration:none;

  text-indent:6pt;

  color:#FFF;

  display:block;

  width: 130px;

  height:25px;

  line-height:25px;

  background-color:#39C;

  border:1px solid #222;

  border-radius: 5px;

}

[B i r n o u]

none of them... on the ul one

ul#navbar {

    text-align: center;

}

ul#navbar li {

    text-align: left;

    display: inline-block;

}

ul#navbar a {

    display: block;

    width: 130px;

}

[KMacL]

Thanks - did all that but still not centering. : (

[KMacL]

This appears to have worked.

ul {

  list-style-type: none;

  display:inline-block;

}

Thanks for your input though.

[B i r n o u]

strabge it works here... so perhaps that an artefacts style must reside here or there (in your code) that makes it hasardous...

anyway, if it works that the main result...

[KMacL]

Yes, I think that could be the case; Dreamweaver's fluid grid layouts have pre formatted stylesheets which I'm wary of tampering with, so it may be something in there. Thanks for your help, much appreciated.

[B i r n o u]

If you need further help on this one, please, let me some access to your files, or send them zipped, I could have a close look to it, ... don't hesitate...

[pziecina]

This is just for Birnou!

Don't recommend to use zip files, (too open to 'problems') a link to the files uploaded to dropbox is now the common method to use.

[Nancy OShea]

I don't open anything from un-trusted sources.

KMacL​

The best & quickest way to get help with layout or code questions here is to upload work files to a TEST folder on your remote server and post the URL. That way we can see everything we need with our browser developer tools. 

Legacy Fluid Grid Layouts were removed from Dreamweaver CC 2017.  There's a reason Adobe abandoned it.  It's not nearly as robust as other responsive methods.  If you're not too deeply invested in this project yet, you might want to reconsider using Legacy Fluid Grids and switch to Bootstrap or CSS Flexbox.

• Bootstrap 3 Tutorial
• CSS3 Flexible Box

Nancy