ThemeShaper Forums » Thematic

[closed]

Center Menu / Nav!

(18 posts)
  • Started 8 years ago by steppas
  • Latest reply from helgatheviking
  • This topic is resolved
  1. steppas
    Member

    This seems to be impossible ...

    Is there a way to align the menu navigation horizontally central?

    Thanks for the help.

    Posted 8 years ago #
  2. Can you provide a link to the site you are working on or let us know what child theme you are working with if any?

    -Gene

    Posted 8 years ago #
  3. steppas
    Member

    Thanks for the reply.

    I'm just venturing into creating my own child theme and quite simply the very first thing I need to do is center align the menu.

    Thanks again.

    Posted 8 years ago #
  4. Danieliser
    Member

    The only way ive come up with is like this

    .sf-menu {
    width:600px; // Make this just large enough to contain the menu items you want
    margin:0 auto;
    }

    Obviously this has a drawback of not being very dynamic if you add or change the names of the items on the menu. But it will work for static menus.

    Posted 8 years ago #
  5. steppas
    Member

    Hi Danieliser, thanks for the tip.

    For my project a static menu will do fine (dynamic would be ideal), however I can't seem to get your code to work.

    I'm using Thematic and my child style.css has no additional code so far (apart from calling the Thematic CSS)

    Posted 8 years ago #
  6. Danieliser
    Member

    Its best to open the default.css stylesheet and copy the contents to your childthemes style.css. Then remove the line at the top that imports the default.css.

    Now you can simply modify the styles you need to there. You can find .sf-menu about 150 lines down in default.css code.

    Posted 8 years ago #
  7. steppas
    Member

    I moved the default.css contents into my child theme style.css and added the code but nothing seems to happen (other than the far right border line moving to the right)

    Sorry to bug, but i've been trying to figure out how to do this for too long now.

    Cheers.

    Posted 8 years ago #
  8. Danieliser
    Member

    Do you have a link i can see? More than likely since the defaults are

    .sf-menu, .sf-menu * {
    	margin:			0;
    	padding:		0;
    	list-style:		none;
    }
    .sf-menu {
    	line-height:	1.0;
    }

    you need to find that code and change the sf-menu {

    if you still dont get the results try adding !important before the ; of a style.

    Posted 8 years ago #
  9. steppas
    Member

    I've located the code and replaced with your suggested code / fiddled about! but I still can't seem to center the menu.

    Sorry I don't have a live link, but I haven't made any changes to the Thematic theme, it is as default.

    Centering the menu seems like a style which would be commonly used.

    Posted 8 years ago #
  10. Danieliser
    Member

    i know you are using a child theme.. but did you activate it in the themes selection screen? I know ive overlooked that several times.

    also try using ctrl + f and looking for .sf-menu {

    there are multiple instances and the one i think your getting hit with is this

    .sf-menu {
        border-right:1px solid #ccc;
    	float:left;
    }

    remove the float:left;

    Posted 8 years ago #
  11. steppas
    Member

    yes the theme is activated and i removed the float:left but still no luck

    Posted 8 years ago #
  12. try

    .menu {
    width:600px;
    margin:0 auto;
    }
    Posted 8 years ago #
  13. steppas
    Member

    .menu {
    width:600px;
    margin:0 auto;
    }

    that worked perfectly!

    many thanks indeed!

    and much appreciation to danieliser for the tips

    Posted 8 years ago #
  14. Danieliser
    Member

    If i could open it in firefox i could find it in a few seconds. It should work changing .menu but that is defined in the layout stylesheet and usually conforms to the 960grid width so it is already defined 20px narrower than #access and centered inside it as well. modifying sf-menu should work fine. copy your code below `/* =Menu
    -------------------------------------------------------------- */` until the next section.

    Posted 8 years ago #
  15. steppas
    Member

    yes it's odd that it isn't working with sf-menu, but seems to work with .menu : )

    Posted 8 years ago #
  16. @Danieliser,
    i'm sure the class 'menu' isn't specified to be centered inside the access div.
    i have had problems with this before

    Posted 8 years ago #
  17. This works for me
    .menu{text-align: center;}
    .sf-menu{float: none;}
    .sf-menu li{display: inline; float: none;}
    .sf-menu a{display:inline-block;}
    #access{width: 988px; height: 60px; margin: 0px auto;}

    But, I still can't seem to get the nested list items to align left. dangit! Once i figure it out, i will repost.

    Posted 8 years ago #
  18. here is probably the Holy Grail of centered menus:

    http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

    Posted 8 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.