Aligning Submit Button to Right of Search Box

Community Forums Forums General Discussion Aligning Submit Button to Right of Search Box

This topic is: not resolved


This topic contains 4 replies, has 2 voices, and was last updated by  glennwriter 2 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #75985


    Hi, everyone.

    I’m currently customizing the Epik theme, and I wanted to see if there’s a way to align
    the submit button to the right of the search box.

    Thanks in advance for your help.




    Can you post a link to your site? It’s always easier to help if we can see what’s going on with your stylesheet.

    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+



    Hi, nutsandbolts.

    Thanks for answering my inquiry so quickly. I really appreciate it.

    I’m currently configuring my site on a local testing server using Xampp,
    so I don’t have a link that I can post.

    But, using Firebug, I was able to see that there’s a css container enclosing
    the search box and button. I just can’t find the container.




    Here’s the css container that I’m trying to find in the stylesheet: <li class=”right search”>

    And here’s where it appears in the XHTML:

    <ul id=”menu-shop” class=”menu genesis-nav-menu menu-primary”>
    <li class=”right search”>
    <form role=”search” action=”http://localhost/wordpress/” class=”search-form” method=”get”>
    <input type=”search” placeholder=”Type pastry, press enter…” name=”s”>
    <input type=”submit” value=”Search”>

    So, the search box and submit button are located in the header and are wrapped in li.right search, but there’s no
    style in the stylesheet for li.right search.




    Okay. I finally found the container code, but I’m having trouble increasing the width so that the search button will float to the right of it.

    Here’s the css code:

    .genesis-nav-menu > .right {
    display: inline-block;
    float: right;
    list-style-type: none;
    padding: 13px 0 13px 20px;

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.