Right Align Nav-Bar

I did that already, try this CSS code and paste it in your Custom CSS

.main-navigation ul li {
display: inline-block;
float: none;
}

.main-navigation ul ul li {
display: inline-block;
float: none;
text-align: right;
}

Hi @allanwq, great to hear from you again! Appreciate your interest.

@erikconce, sorry for missing this one. This is the Custom CSS I would have used (apply to a Custom CSS plugin):

/* Vantage right align the main menu */

.main-navigation ul {
font-size: 0;
text-align: right;
}

.main-navigation ul li {
display: inline-block;
float: none;
font-size: 13px;
}

.main-navigation ul ul li {
text-align: left;
}

That should right align the menu but keep the drop down menu items left aligned.

@allanwq: ul ul li is the selector for a list item within a list, within another list – basically a drop down menu item.

Menu items in Vantage are displayed in a line using float: left. However we need to use inline-block to have the ability to quickly align center or align right.

If anyone is interested, this looks like a solid post on the topic of floats vs inline-block:

https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Thanks Misplon. I learned it from you. BTW

My bad! Rather use the selectors I just gave now. If you need to center the menu then you’d say:

/* Vantage right align the main menu */

.main-navigation ul {
font-size: 0;
text-align: center;
}

.main-navigation ul li {
display: inline-block;
float: none;
font-size: 13px;
}

.main-navigation ul ul li {
text-align: left;
}