Resolved Align last list item to the right

[bluecloud 3]

How can I move/align the last list item in the nav menu to the right?

Is this possible with css?

[Rob 547]

I'm not sure if you mean you want to move it in the order of menu items or, if you want to create space between that last menu item and the thin grey vertical line. So, I'll try to answer both.

To reposition, just go to Dashboard > Appearance > Menus and drag the menu items into the order in which you want them. Top is always the left-most... bottom is always the right-most.

To add space it differently, add this to your child theme's stylesheet at the bottom:

#menu-item-1291, #menu-item-1249 a {

border-left: 1px solid #888888 !important;

color: #99AAAA;

margin-left: 100px;

margin-right: -190px;

}

.navbar .navline > li > a {

color: rgba(255, 255, 255, 0.8);

display: block;

float: none;

line-height: 19px;

margin-left: 100px;

margin-right: -90px;

padding: 9px 12px 10px;

text-decoration: none;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

}

The second grouping moves the navbar over. The first moves the EN item only.

[bluecloud 3]

Thanks for your quick reply.

I needed it to create space, but for another site:

http://www.pacts.nl/wordpress/

The "FR" is aligned all the way to right corner, but the "EN" not. I have now the child theme stylesheet:

#menu-pacts-hoofdmenu ul {

    width: 100%;

}

#menu-item-lang li {

    width: 100%;

}

#menu-item-lang a {

    display: block;

    width: 220px;

    float: left;

    color: #7D1610;

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-weight: bold;

    font-size: 1.2em;

}

#menu-item-lang a:hover {

    color: rgba(125, 22, 16, 0.7);

    text-decoration:underline;

}

[Rob 547]

I'm unclear what you want to do and don't see EN on the site you linked. Could you create a mock-up to show us the end result?

Also, please obtain Firebug and use this to test and implement custom CSS.

[bluecloud 3]

Sorry, I forgot to tell in my post:

The FR / EN is a language switcher. When you click on the FR you go the French site and reverse with the EN. The FR is aligned nicely to the right corner but EN on the french site is not.

I know the css is not correct, I will get the firebug. Thanks for the tip.

[Rob 547]

I see that the FR is wrapping due to the 220px width. That's the problem with the EN too, which uses this same CSS:

#menu-item-lang a {

    color: #7D1610;

    display: block;

    float: left;

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

    font-size: 1.2em;

    font-weight: bold;

    width: 220px;

}

The problem with that is, in a mobile device, the 220px will be a fixed dimension that prevents the menu from being responsive and proportional.

So, we first need to figure out a way of doing this without causing your menu to be messy on a mobile device.

In theory, the 220px can be changed to a percent of the whole menu, and the content floated right. Please see this for information on aligning right. It might be insightful. http://www.w3schools.com/css/css_align.asp

[bluecloud 3]

Thanks for your help, One Smart Egg.

I'm handling to issue for a friend of mine and will discuss this with here first. Maybe we can find a better solution. I believe the language switcher should not be a part of the nav menu and should be placed on top of the page.

[Danny+ 1,327]

Hi,

You could try the following:

#site .main-nav { width: 100%; }

#site .main-nav li.last { float: right; }[/CODE]

[bluecloud 3]

Thank Danny!

That did it!

[Danny+ 1,327]

The topic was marked as resolved.