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

Tagged: 

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

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

    glennwriter
    Member
    Post count: 3

    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.

    Glenn

    #75987

    nutsandbolts
    Moderator
    Post count: 3119

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #76051

    glennwriter
    Member
    Post count: 3

    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.

    Best,
    Glenn

    #76062

    glennwriter
    Member
    Post count: 3

    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”>
    </form>

    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.

    Glenn

    #76064

    glennwriter
    Member
    Post count: 3

    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.