Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 15, 2021 at 12:55 am #1320962
    hostworks

    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?

    September 15, 2021 at 12:58 am #1320963
    hostworks

    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>

    September 15, 2021 at 3:51 pm #1321081
    Yigit

    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

    September 15, 2021 at 4:11 pm #1321085
    hostworks

    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.

    September 15, 2021 at 4:21 pm #1321087
    Yigit

    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

    September 15, 2021 at 4:31 pm #1321089
    hostworks

    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

    September 17, 2021 at 5:19 pm #1321403
    hostworks

    Any ideas on my last two questions?

    September 19, 2021 at 7:36 pm #1321544
    Mike

    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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.