Jump to content


Photo
- - - - -
Resolved

Align last list item to the right



This topic has been archived. This means that you cannot reply to this topic.
9 replies to this topic

#1 bluecloud

bluecloud

    Advanced Member

  • Members
  • 44 posts

Posted 13 October 2012 - 06:33 PM

How can I move/align the last list item in the nav menu to the right?
Is this possible with css?

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 13 October 2012 - 07:12 PM

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:

Please Login or Register to see this Hidden Content


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

#3 bluecloud

bluecloud

    Advanced Member

  • Members
  • 44 posts

Posted 13 October 2012 - 07:27 PM

Thanks for your quick reply.

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

Please Login or Register to see this Hidden Content



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

Please Login or Register to see this Hidden Content



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 13 October 2012 - 07:57 PM

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

Please Login or Register to see this Hidden Content

and use this to test and implement custom CSS.

#5 bluecloud

bluecloud

    Advanced Member

  • Members
  • 44 posts

Posted 13 October 2012 - 08:15 PM

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.

#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts

Posted 13 October 2012 - 10:22 PM

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:

Please Login or Register to see this Hidden Content


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.

Please Login or Register to see this Hidden Content



#7 bluecloud

bluecloud

    Advanced Member

  • Members
  • 44 posts

Posted 15 October 2012 - 09:16 AM

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.

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts

Posted 15 October 2012 - 10:37 AM

Hi,

You could try the following:


Please Login or Register to see this Hidden Content



#9 bluecloud

bluecloud

    Advanced Member

  • Members
  • 44 posts

Posted 18 October 2012 - 11:49 AM

Thank Danny!
That did it!

#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 16982 posts

Posted 18 October 2012 - 12:03 PM

The topic was marked as resolved.