Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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?

    website

    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?

    #1320963

    The code is actually
    <form><input type="text" id="s_website" name="s_website"><a href="#"><img border="0" alt="Search Website" src="https://tbwp.hostworks.com/wp-content/uploads/2021/09/Button_Search-Website148x34.png" 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="https://tbwp.hostworks.com/wp-content/uploads/2021/09/Button_Search-UrantiaBook160x34.png" width="160" height="34"></a></form>

    #1321081

    Hi,

    Please change your code to following one – https://pastebin.com/wf5yE2zK 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

    #1321085

    Yigit, Thank you. It’s close.

    https://tbwp.hostworks.com/

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

    Thanks.

    #1321087

    Hey,

    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;
    }
    

    Cheers!
    Yigit

    #1321089

    Phenomenal!
    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?

    Thanks

    #1321403

    Any ideas on my last two questions?

    #1321544

    Hi,
    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:

    #s_website.search-form-input,
    #truthbook-search .search-form-input {
        border: 1px solid #000 !important;
    }

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

    Best regards,
    Mike

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

You must be logged in to reply to this topic.