Center menu items

Hi, first of all: Great theme!

How do I center the (sf-)menu items, while keeping the home and nav button (the one to the right of the home button) left-aligned?

In other words, in the example below, I want to keep the home button and the nav button where they are, while center-aligning “lifestyle” “phones” etc..

Thanks for helping me out!

hi,
the menu is made with <li> elements.
you can move all of theme using:

.menu-header-container {
    display: table;
    float: none !important;
    margin-left: auto;
    margin-right: auto;
}

here : http://screencast.com/t/2pdgwMm0TUN

in Advance CSS you can use this css only on certain devices.

Thanks for you message.
Radu A.

Yes, that moves all the menu items, which I’ve already tried.

My question: How do I center the menu items I mentioned, while keeping the ones I specified left-aligned? I know this can be achieved by mentioning their ID in custom CSS, but how?

Thanks,
Are

Almost got it. Followed all your steps, but it doesn’t look completely centered:

I decided not to keep the “home” house/button. Maybe that’s what messed it up? How do I make the items completely centered?

hi,
there are 2 pixel on the right side of the menu : http://screencast.com/t/tKcvV72f0

use this css :

#menu-hovedside{
   padding-left: 1px;
}

here: http://screencast.com/t/quwcmwxeCH

will become : http://screencast.com/t/DtYdqY3v

Thanks for you message.
Radu A.

Hi

Your screencast is from my live site (.no), not the one I’m working on (.dev – only visible locally)…

This still isn’t fixed… See my comment above (#post-8889).

I have some knowledge, but it would be helpful with a few pointers. Would something like this work (with the appropriate menu item # and positioning)?

.menu-item-37076 {
position: absolute; left: 260px;}
}

hi,

this css :

.menu-item-37076 {
  position: absolute; left: 260px;}
}

will make the tag with the class ‘menu-item-37076’ to always have the distance from left side of the screen 260px. I think using css padding or margin rule in what you need, like:

#menu-hovedside{
   padding-left: 1px;
}

here is some doc about padding : http://www.w3schools.com/css/css_padding.asp

Ok. The name of the menu I’m trying to move to the right: “Hoved (Header Menu (main))”

This CSS doesn’t move the menu (I’ve tried changing the px):

#menu-hoved{
padding-left: 1px;
}

It’s developed locally, so that’s not possible. Sorry.

But you must have a easy way to left-align, center or right-align your menu?

Website is finally online (www.amerikanskpolitikk.no), behind password wall. Send me an e-mail and I’ll give it to you.

I have an issue with the menu_category (the item on the far left side in the pics above). I’m given the opportunity “Click here – to select or create a menu”, but nothing happens when I try changing it.

Are