Title: Align Navigation Menu
Last modified: June 14, 2017

---

# Align Navigation Menu

 *  Resolved [dsb0328](https://wordpress.org/support/users/dsb0328/)
 * (@dsb0328)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/align-navigation-menu/)
 * Hello. I was wondering if anyone knows and answer as to how to float more than
   1 menu item to the right while maintaining other menu items on the left. I have
   the menu set to horizontal left and was successful in floating the last menu 
   item to the right. Then my client asked me to float all of the menu it’s to the
   right except for 1 that would stay on the left. So, obvious solution was to float
   the entire menu to the right in Customize and change my CSS to float the other
   menu item left. Didn’t work due to the fact that even if floating right, the 
   menu items don’t go all the way to the right of the page. Just go a little bit
   right. Then I decided to float all 3 menu items right and leave the other menu
   item on the left with the Customize set to left. It works, but it changes the
   order of the menu items. So the last menu item comes before the second to last
   and then the 3rd to last. Another obvious solution was to reorder them in Menus,
   but then they are out of order in mobile mode. Anyone have any ideas? Also, the
   site logo is on the left and has to stay there if that helps any.

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Denzel Chia](https://wordpress.org/support/users/denzel_chia/)
 * (@denzel_chia)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/align-navigation-menu/#post-9229760)
 * Hi,
 * Menu are list items, you can try to use child selector to style it.
    [https://css-tricks.com/almanac/selectors/f/first-child/](https://css-tricks.com/almanac/selectors/f/first-child/)
 * Thank you
 *  Thread Starter [dsb0328](https://wordpress.org/support/users/dsb0328/)
 * (@dsb0328)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/align-navigation-menu/#post-9231689)
 * Hi Denzel Chia. Thanks for the reply, but I’m not really sure how this would 
   reorder the menu items or float them any differently than the `.navbar .nav li{
   float: right; }` command does. If you know more about this, can you maybe explain
   a little more since the link you posted doesn’t really get into menu items? Or
   does anyone else have any other ideas?
 *  Thread Starter [dsb0328](https://wordpress.org/support/users/dsb0328/)
 * (@dsb0328)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/align-navigation-menu/#post-9231718)
 * By the way, here’s how I have my code at the moment with the Menu Position set
   at “Menu on left”:
 *     ```
       .navbar .nav li {
       	float: right;
       }
   
       .navbar .nav li.get_started_menu {
       	float: left;
       }
       ```
   
 * The “get_started_menu” is the first menu item that I want to stay on the left.
   The other menu items have to be placed in reverse order to have them show up 
   in the order desired, which doesn’t translate the same in the Mobile menu. ie.
   Menu-item #1, Menu-item #2, Menu-item #3 actually shows up in reverse when floating
   right like Menu-item #3, Menu-item #2, Menu-item #1. So I have to reverse them
   in order for them to show up in the correct order in the regular nav, but then
   they show up out of order in the mobile nav.
    -  This reply was modified 8 years, 11 months ago by [dsb0328](https://wordpress.org/support/users/dsb0328/).
 *  Thread Starter [dsb0328](https://wordpress.org/support/users/dsb0328/)
 * (@dsb0328)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/align-navigation-menu/#post-9231827)
 * The code above had to change a little due to the fact that it made the dropdown
   menus float right also. So now the code is:
 *     ```
       .navbar .nav li.why_accel_nav, .navbar .nav li.new_to_gaming_nav, .navbar .nav li.contact_us {
       	float: right;
       }
       .navbar .nav li.get_started_menu {
       	float: left;
       }
       ```
   
 * The first part of the code is to float those 3 menu items right and the 2nd part
   is to float the other menu item left. The 2nd one may not even be necessary, 
   but it’s there just in case. Now, since this works okay on a computer nav, I 
   just need to figure out a better way or how to reorder the Mobile menu items.
 *  Thread Starter [dsb0328](https://wordpress.org/support/users/dsb0328/)
 * (@dsb0328)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/align-navigation-menu/#post-9241512)
 * Hello. Just revisiting this to see if any of the creators of this theme know 
   anything about this. Please help if you can. I’ve been trying to figure it out
   for almost a week. Thanks.
 *  Thread Starter [dsb0328](https://wordpress.org/support/users/dsb0328/)
 * (@dsb0328)
 * [8 years, 11 months ago](https://wordpress.org/support/topic/align-navigation-menu/#post-9241873)
 * Okay, nevermind anymore. I figured it out, finally.
    -  This reply was modified 8 years, 11 months ago by [dsb0328](https://wordpress.org/support/users/dsb0328/).

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Align Navigation Menu’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

## Tags

 * [float](https://wordpress.org/support/topic-tag/float/)
 * [navigation](https://wordpress.org/support/topic-tag/navigation/)

 * 6 replies
 * 2 participants
 * Last reply from: [dsb0328](https://wordpress.org/support/users/dsb0328/)
 * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/align-navigation-menu/#post-9241873)
 * Status: resolved