Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1320962

    Ok, I’m trying to put two search forms on the top bar above the header as depicted here:

    desired layout

    But you see it is breaking each onto their own line. How can I keep all four elements on the one line vertically aligned?


    Here’s what I’m placing into the Phone Number or small info text field under Header > Extra Elements
    <form><input type=”text” id=”s_website” name=”s_website”>Search Website<input type=”text” id=”s_urantia” name=”s_urantia”> Search the Urantia Book</form>

    What do I need to do to make this work?


    The code is actually
    <form><input type="text" id="s_website" name="s_website"><a href="#"><img border="0" alt="Search Website" src="" width="148" height="34"></a><input type="text" id="s_urantia" name="s_urantia">&nbsp;<a href="#"><img border="0" alt="Search the Urantia Book" src="" width="160" height="34"></a></form>



    Please change your code to following one – and then add following code to bottom of Quick CSS field in Enfold theme options > General Styling tab

    .phone-info form,
    #top .first-header-form, 
    #top .second-header-form { 
        display: flex; 

    Best regards,


    Yigit, Thank you. It’s close.

    The buttons are shrunk and too much white space for the top bar. I’d like it to be 40 px.




    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    #header_meta form,
    #top #header_meta input {
        margin-bottom: 0;
    #header_meta .phone-info .second-header-form img {
        min-width: 160px;
    #header_meta .phone-info .first-header-form img {
        min-width: 148px;



    Two final items:
    1) It is 6px short as the dark blue is showing under the nav
    2) How can we darken the lines for the field entry boxes?



    Any ideas on my last two questions?


    Thank you for your patience, the dark line below the nav is due to this css which I believe is in your customization:

    @media only screen and (min-width: 1024px) {
        .html_header_top.html_header_sticky #top #wrap_all #main {
            padding-top: 220px !important;

    Try finding this and change to padding-top: 218px, if you can’tfind it then please disable all of your caching and Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files and we can check again.
    Your second question seems to relate to the search form at the top of the header, for which this css is setting:

    .search-form-input {
        vertical-align: middle !important;
        margin: 5px 10px 5px 0 !important;
        padding: 10px !important;
        background-color: #fff !important;
        border: 1px solid #ddd !important;

    If this is in your custom css then change the border color, if not it will be trickier because of the !important; try this:,
    #truthbook-search .search-form-input {
        border: 1px solid #000 !important;

    After applying the css, please clear your browser cache and check.

    Best regards,

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

You must be logged in to reply to this topic.