Skip to main content
KMacL
Inspiring
March 13, 2017
Question

Centering cascading navigation bar in fluid grid layout

  • March 13, 2017
  • 5 replies
  • 484 views

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?

This topic has been closed for replies.

5 replies

KMacL
KMacLAuthor
Inspiring
March 13, 2017

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
Legend
March 13, 2017

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
Legend
March 13, 2017

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.

KMacL
KMacLAuthor
Inspiring
March 13, 2017

This appears to have worked.

ul {

  list-style-type: none;

  display:inline-block;

}

Thanks for your input though.

B i r n o u
Legend
March 13, 2017

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
KMacLAuthor
Inspiring
March 13, 2017

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

KMacL
KMacLAuthor
Inspiring
March 13, 2017

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
Legend
March 13, 2017

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;

}

B i r n o u
Legend
March 13, 2017

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 ?