Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • January 27, 2015 at 2:12 pm #386185
    Harri

    Hi, I’d like to replace the current popout button with just the search box inside my main header menu.

    Is there any Quick CSS I can use?

    • This topic was modified 9 years, 11 months ago by Harri. Reason: site
    January 27, 2015 at 2:26 pm #386199
    Yigit

    Hi Harri!

    Please refer to my post here – https://kriesi.at/support/topic/search-not-working-in-ie8/#post-328178

    Regards,
    Yigit

    January 27, 2015 at 2:29 pm #386206
    Harri

    Looked through quite a few posts to see if it had already been answered but apparently didn’t look hard enough :P

    Cheers!

    January 27, 2015 at 2:33 pm #386214
    Yigit

    Hey!

    No worries :) I will keep the thread open, please feel free to post if you have any questions. Thread will be on hold until you post.

    Best regards,
    Yigit

    January 27, 2015 at 2:40 pm #386221
    Harri

    Thanks :) I now have the search box I wanted but I’d like to have it located where the current popout button is next to where the menu items are.

    Are you able help me in adjusting its placement?

    January 27, 2015 at 5:30 pm #386393
    Harri

    I was able to get the search bar (almost) in the correct position but it appeared to be underneath the menu and I was not able to use it at all.

    Is there any way to make it fit on/ be part of the menu?

    January 28, 2015 at 8:27 am #386795
    Ismael

    Hi!

    The site is still using the default search icon. Please add the modification then we’ll check the site.

    Cheers!
    Ismael

    January 28, 2015 at 3:57 pm #387035
    Harri

    Hi, I had changed it back to default while i altered the rest of the site :)
    Iv’e added the modification again using :

    #header form#searchform { top: 10%; left: 40%; position: relative; }

    however i’d like to have it in the position of the default search icon, it would be if i used this code:

    #header form#searchform { top: 100%; left: 75%; position: relative; }

    but is unable to be used as its underneath the menu instead of being a part of the menu

    Could you assist me in finding a way to make this possible? If it’s possible that is :P

    Thanks,
    ~Harri

    January 29, 2015 at 9:46 am #387587
    Ismael

    Hi!

    Replace the css code with this:

    #header form#searchform {
top: 100%;
left: 75%;
position: relative;
z-index: 9000;
}

    Regards,
    Ismael

    January 29, 2015 at 11:08 am #387612
    Harri

    Brilliant, thanks! Exactly what I wanted :)

    Almost done now but there’s 1 last minor change I’d like to make, which is the search box container size. It’s just slightly to big to fit neatly on the bar, I could live with it but if it’s possible to tweak it slightly, how would i go about doing this?

    You guys are a huge help, thanks for the support :D

    -Harri

    January 29, 2015 at 11:15 am #387618
    Harri

    Also actually, have noticed that the drop down menu on the search bar is transparent until mouse hover, could this also be changed?

    January 29, 2015 at 11:17 am #387619
    Josue

    Hi!

    Try with this:

    #header #s {
    top: 5px;
    left: 5px;
    padding: 5px 5px 5px 5px !important;
    width: 84%;
}

#header #searchsubmit {
    width: 25px !important;
    height: 25px !important;
    line-height: 25px !important;
    top: 6px;
}

    Adjust as needed.

    Regards,
    Josue

    January 29, 2015 at 11:55 am #387638
    Harri

    Fantastic, have it all lined up perfectly now and almost ready to go, just the issue with transparency when you try to search left and I’ll be out of your hair! :P

    Really appreciate the help and responses from all of you :D No way I could figure these things out myself!

    -Harri

    January 29, 2015 at 12:20 pm #387648
    Josue

    Add this:

    .ajax_search_response {
    background: white;
    padding-top: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.3);
}

    Cheers!
    Josue

    January 29, 2015 at 12:35 pm #387657
    Harri

    There seems to be a ghost button when typing now, I assume this could be fixed by making the width of the drop down match the width of the search box again though.

    I am trying to reduce the size of it myself but seem to be making it bigger, how do I change this?

    -Harri

    January 29, 2015 at 4:10 pm #387741
    Harri

    Having looked into it and fiddled with it myself i managed to get it working perfectly :) Have since had to make some changes and the search box position needs to be moved. However It is likely it will go back at a later date and with this Information on hand it will be easy to do so.

    Hope this helped anyone else who was having the same problem as well :D

    I am grateful and thank everyone from the support team who helped in figuring this out :)
    You guys rock!

    Cheers again!
    -Harri

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Quick CSS for Static Search box instead of Popout Search button’ is closed to new replies.