Support » Themes and Templates » Bones Starter Theme – Navigation menu

  • Hi,

    I’ve recently started developing a wordpress theme in order to redesign my old portfolio website (which currently is not a dynamic cms-based site):
    Previously I made a thematic child theme for my blog ( ) but have never tried to develop a theme from scratch.

    I chose the Bones Starter Theme ( to do it. But got in a bit of a rut.

    This new design I’m working on has an orientation mostly aligned to the center (with no sidebars):
    * Logo on top centered
    * navigation menu centered
    * grid of work thumbnails centered
    * post details “main content area” centered
    — you get the gist of it

    Right now my problem is: I can’t seem to find a way to center the navigation menu.
    In the Base.less file under the .nav class I have tried the usual
    margin: 0 auto;
    and some variations of it.

    I also tried
    float: right;
    and got the menu items to flow all the way to the right, so it seems that .nav class is the one to action upon, but still am not going anywhere.

    I’ve searched Google for a solution in the past 2 days without success…
    Seems to be something easy to do, but can’t figure it out.

    Can anyone help me on this?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Finally got it.
    For anyone with the same problem, here’s what I did:

    in the _768.less file (which affects the style of the site when dealing with desktop widths),
    — under the .nav class:
    width: 440px; /* the width of the whole menu */
    margin: 0 auto;

    — under the li element:
    width: 110px; /* width of each item */

    It is not the solution I wanted — I’d like an automatic centering solution without specifying the width of the menu — but it simulates it somewhat.

    Of course if I add a new menu item, I’ll have to tweak the widths, unfortunately…

    Hi Pedro,

    I have the same problem. I wanted to place the menu items on the right side of the menu bar. I found your file (.less) but i also found another file with menu preferences.

    Go to ‘Library’ > ‘Css’ > .style

    Search for (ctrl+f):
    .nav li {float:left;position:relative}

    I changed this to:
    .nav li {float:right;position:relative}

    My menu items have jumped to the right side of the bar.
    Worked perfect for me!

    For anyone else who stumbles across this looking for a solution (it doesn’t just happen with Bones) here is what to do:

    Wrap your menu in the header.php with div: <div id=”nav-box”>[menu]</div> for example. Then put the following into your stylesheet:

    #nav-box {
    #nav-box ul {

    I’m also using Bones and trying to get a solution to this problem.

    I’ve tried loudliger’s solution and while it works to an extent, it removes the ability to set a background colour on the menu.

    Pedro’s solution can also work but makes the menu inflexible and unresponsive, which in the end kinda defeats the point of using Bones.

    Interested to know if anyone else figures this out!

    Well that didn’t take long… Here’s how I’ve solved it;

    I’ve applied the following styles to my nav’s UL element:
    display: inline-block;

    Here’s what I’ve applied to the DIV that surrounds the UL:
    text-align: center;

    Simple as that really!

    In Bones, you might want to tweak the margin of the UL element as well if you want your menu to have a background colour.


    Thanks Philipjohn, that totally worked for me too.

    I am just digging into Bones for a project, seems pretty rad so far.

    Good to hear! Although I’ve inadvertently broken mine now and can’t seem to get it centered again 🙁



    Forum Moderator

    I’m sorry but as you are using a non-WPORG theme, you need to seek support from the theme’s developers – paid or otherwise. We only support themes downloaded from here.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Bones Starter Theme – Navigation menu’ is closed to new replies.