[Twenty Twelve] How to get last menu item aligned to the right (6 posts)

  1. xronox
    Posted 1 year ago #


    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


  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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?

  3. xronox
    Posted 1 year ago #

    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

  4. stephencottontail
    Posted 1 year ago #

    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.

  5. alchymyth
    Forum Moderator
    Posted 1 year ago #

    seems to have worked :-)

    if you don't see the result yet, try to clear the browser cache with 'reload' or 'DTRL F5' ...

  6. xronox
    Posted 1 year ago #


    This was all the code I needed:

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


Topic Closed

This topic has been closed to new replies.

About this Topic