Right Align Nav-Bar

  • Site I’m working on:

    merituscabinetry.com

    I want to align the top nav-bar as far right as possible. Has anybody found a way to do this?

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

  • 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;
}
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Right Align Nav-Bar’ is closed to new replies.