Align Navigation Menu

Resolved dsb0328
(@dsb0328)

8 years, 11 months ago

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
(@denzel_chia)

8 years, 11 months ago

Hi,

Menu are list items, you can try to use child selector to style it.
https://css-tricks.com/almanac/selectors/f/first-child/

Thank you

Thread Starter dsb0328
(@dsb0328)

8 years, 11 months ago

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
(@dsb0328)

8 years, 11 months ago
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.
Thread Starter dsb0328
(@dsb0328)

8 years, 11 months ago
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
(@dsb0328)

8 years, 11 months ago

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
(@dsb0328)

8 years, 11 months ago
Okay, nevermind anymore. I figured it out, finally.
- This reply was modified 8 years, 11 months ago by dsb0328.

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

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

Tags