Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved Align last list item to the right

Question

Posted · Report post

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

Is this possible with css?

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

You could try the following:


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

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thank Danny!

That did it!

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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;

}

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites