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:
http://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;
}
