Bones Starter Theme – Navigation menu

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 {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}

#nav-box ul {
  list-style:none;
  position:relative;
  left:50%;
}

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.

Cheers

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 ??

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 www.remarpro.com here.
Try https://themble.com/