Horizontal Menu & Integrated Search Form?

  • Author
  • #110114


    I’ve been trying to integrate a search form on a standard horizontal menu for the last two days and have been having little success.

    I’ve tried various CSS align commands, repositioned the form include within the menu ULs and without.

    Can anyone suggest a new approach for me to try to take?

    Menu Item #1 | Menu Item #2 | Menu Item #3 | Search Form (aligned far right preferably)

    My Header code:

    <div class=”header”>
    <div class=”path”>


    <form method=”get” id=”searchform” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>

    <input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”19″ /> <input type=”submit” id=”sidebarsubmit” value=”Search” style=”font-size: 10px;” />


    And the relevant CSS:

    /* Horizontal Menu Structure */
    .path {
    vertical-align: bottom;
    color: #FFF;
    font: normal 1.1em ‘Trebuchet MS’, Verdana, sans-serif;
    padding: 4px 12px;
    padding-top: 375px;
    padding-bottom: 10px;
    padding-right: 10px;
    padding-left: 10px;
    .path li,.path ul {display: inline;}
    .path a {
    color: #FAFAFA;
    text-decoration: none;
    margin-right: 25px;
    .path a:hover {
    color: #FFE;
    text-decoration: underline;

    /* Main Content Structure */
    .main {
    background: url(‘img/main.gif’) repeat-y;
    padding: 8px 12px 0px 15px;
    #searchform {padding: 10px;}

    Any help would *greatly* be appreciated!




    Is your blog hosted here at wp.com? Or did you download a template from wp.org and self-host?

    If you’re hosted here, it won’t work. Forms are stripped out for security reasons. There is a search widget you can put in your sidebar.



    I self hosted, and sorry for the bad code paste. I’m new at the forum markup code game I guess.

    Its pretty much the same deal, except the links have the actual code displayed instead of HTMLized of course.

    I just tried stretching the form tag to encompass both the horizontal menu and the input tags.

    <form method=”get” id=”searchform” action=”<?php echo $_SERVER[‘PHP_SELF’]; ?>”>

    Menu link #1, Menu link #2, Menu link #3, etc

    <input type=”text” value=”<?php echo wp_specialchars($s, 1); ?>” name=”s” id=”s” size=”15″ align=”right” /> <input type=”submit” id=”sidebarsubmit” value=”Search” style=”font-size: 10px;” />


    The end result is I get this: Menu item #1, #2, #3, [Search Field here]

    I want to align the search field to the far right side (text is aligned to the left) on this horizontal menu. CSS align tags aren’t helping in that regard.

    Any new ideas?



    You need to be over at http://wordpress.org/support as you’re self hosted.

The topic ‘Horizontal Menu & Integrated Search Form?’ is closed to new replies.