Support » Themes and Templates » [Twenty Twelve] How to get last menu item aligned to the right

[Twenty Twelve] How to get last menu item aligned to the right

  • Hello!

    I successfully added a search bar to my menu adding this to functions.php:

    add_filter('wp_nav_menu_items','add_search_box', 10, 2);
    function add_search_box($items, $args) {
            $searchform = ob_get_contents();
            $items .= '<li>' . $searchform . '</li>';
        return $items;

    and this to my child theme style.css:

    .menu-item.menu-item-search { float:right; width:260px; }
    .menu-search-form { float:right; padding-top:3px; width:250px; }
    .menu-search-form input#searchsubmit.my-wp-search { background:#000; color:#fff; cursor:pointer; float:right; padding:2px; text-transform:uppercase; }

    Now I want my last item (the search bar) to be aligned to the right while the rest of the buttons stay aligned to the left.

    Then there is also an annoying space on the right of the last item (understandable for the other items (menu buttons) – they would be all cluttered together without it) that I want to get rid of (to have the searchbar really aligned to the right).

    This .css code is making the buttons aligned to the left:

    .main-navigation ul.nav-menu
    text-align: left


Viewing 5 replies - 1 through 5 (of 5 total)
  • where did you get the CSS classes for your styling from?
    did you use one of the browser inspection tools?

    afaik, the ‘searchform’ menu item does not automatically get any CSS classes;
    you will need to add them with the filter code as well.


    $items .= '<li class="menu-item menu-search-form">' . $searchform . '</li>';

    CSS example for this:

    .menu-search-form { float: right; padding-top:5px; width:250px; }
    .main-navigation li.menu-search-form { margin-right: 0; }
    .menu-search-form input#searchsubmit { background:#000; color:#fff; cursor:pointer; float:right; padding:2px; margin-top: 4px; text-transform:uppercase; }

    if that does not work in your site, can you post a live link?

    Yeah, that’s right – I used browser inspection tools.

    In the same browser inspection tool I can change

    .main-navigation ul.nav-menu
    text-align: left


    .main-navigation ul.nav-menu
    text-align: right

    and all items on the menu change.

    This is the live link http://www.vopus.tv/ad-pages/6

    PS: the CSS code you gave didn’t work

    Moderator stephencottontail


    It doesn’t look like you made the changes to your function that @alchymyth suggested. But you could do something like this:

    .main-navigation ul li:last-child {
    	float: right;
    	margin-right: 0px;
    	margin-top: 5px;

    Adjust the margin values to taste. This would break if the menu was later changed in such a way that the search form was no longer the last item of the menu, though. Also, last-child doesn’t work in IE8 or earlier.

    seems to have worked 🙂

    if you don’t see the result yet, try to clear the browser cache with ‘reload’ or ‘DTRL F5’ …


    This was all the code I needed:

    $items .= '<li class="menu-item menu-search-form">' . $searchform . '';


Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Twenty Twelve] How to get last menu item aligned to the right’ is closed to new replies.
Skip to toolbar