Preview in Blocs and click on MD or smaller, so you can see the problem – the magnifying glass icon gets thrown to a second row and looks ridiculous. I hoped the solution would be to merely insert this icon INSIDE the “Nav Container” but I cannot figure out how to accomplish that, can you? If putting an icon inside the Nav Container is impossible, how would you change the design to ensure that icon stays to the right of the hamburger icon instead of getting thrown down into another row?
Preview in Blocs in LG and click the magnifying glass icon, then note how the search field rolls up into view. I don’t really like it rolling up from the bottom. It would be best of the KIRAMEK logo remained static and the search field rolled out into view from the right, expanding out from the magnifying glass icon, or the search field could just suddenly appear. But how do I accomplish that?
Preview in Blocs in LG and click the magnifying glass icon. Note how the KIRAMEK logo and the field and icon are not vertically centered inside their black bar. How do I perfectly center them vertically? (Also note the height of that black bar isn’t the same either, so how would I fix that so the height of the black bars match?)
I think the size of the magnifying glass icon is a little too big, but if I use the right sidebar “Size” tool to change to a smaller size, it’s too small. How do I manually adjust size of icons in Blocs?
The way the search feature of most websites works is when you click a magnifying glass icon, a field appears with the text cursor already inserted and blinking. Sadly, that doesn’t happen in my document – no blinking cursor inside. How do I make it happen automatically so the user doesn’t need to click inside the field?
Is it because of the Japanese language setting (I’m set to US. English) or a much bigger bug? Has @Norm seen this file?
And Preview in Browser doesn’t work now, so I can’t do much debugging (another bug for Norm), but try reducing the size and offset of the search icon & then probably move it up w/ custom class.
Hello @JDW, I don’t know what is happening with your file, as I have same/different problems as @Bill, but… after check your file, fight with your file, there is your work with some changes, so you can achieve what you want:
@Bill & @Pealco Thank you for the information. I cannot reproduce the problem on my end, but I’ve sent the document to @Norm via the Bug Reporter and linked to this thread so he can see the screenshot Bill posted. Thanks for that information. I’ve actually submitted quite a number of bug reports on the left sidebar.
@Pealco Thank you for the document. However, when I click the magnifier icon, all that happens in your document is the black header elongates downward and reveals the search bar, which isn’t what I’m after. Here’s exactly what I want:
Note how th search bar appears in the middle of that header and the links that were in that location are now gone. That is precisely what I want to do. (I don’t care about the little white dropdown menu. I don’t need that. I just want to click the icon and have the search bar appear in the middle of the black header where all the navigation links are. In other words, the search bar must REPLACE all those navi links, at least until you close the search bar. This is nothing new. It’s how most search bars work.)
If for some reason that rather simplistic aim is impossible to implement in Blocs, I am open to copying what @Norm has don’t on this Blocs website; namely, clicking the magnifier icon causes a dropdown to appear. I think that looks far better than causing the header to elongated downward and reveal the search bar, don’t you?
Next…
I think you misunderstood my #5 in my opening post. Again. Open Apple’s website and click the magnifier icon. Note that not only does the search bar appear in a nice location but the text cursor is inserted inside that field and is blinking. That’s what I want. Why? Well, naturally so the user doesn’t need to click two times. It’s a little thing, but it’s an important thing. It’s silly that I need to force my website visitors to click inside my search field before they can start typing search terms! I want then to be able to click 1 time on the magnifier icon, then have the search field appear in the same location of the header that you see on Apple’s website, and also have the text cursor to be automatically inserted into the text field so they can immediately start typing search terms.
Lastly,
I am aware of Lucas’ work, but it is not made for multi-page websites as I describe in my post in that thread.
@Pealco, thank you for the code. I tested it, and it does display nicely and very close to what I’ve wanted all along. But that code solution also involves a lot of work on my end, forcing me to hand-code my complex menu system. And then when I need to edit my menus, it’s yet another dive into the code!
I submitted a bug report to @Norm based on your findings about the left sidebar, but I received a reply back saying that he cannot replicate the issue. Neither can I. I don’t have my menus set to Japanese either. But I am using Blocs 3.2.1, are you? Maybe is MacOS? I am running High Sierra 10.13.6 (in English) on a late 2015 iMac 27" (top end model).
Please logout or restart and then give my document another test to see if you have the same problem. I’d like to help @Norm reproduce it so he can fix it.
@Norm I am desperately trying to implement a SEARCH feature in a Blocs 3.2.1 website which I have just started. I really want to implement Search in the same way Apple does it. Visit the Apple website, click on the little magnifier icon, and note how lovely the search bar appears OVER the existing navigation links (actually, those navigation links vanish and the search bar takes their place). Earlier in this discussion, @Pealco gave me some code to accomplish that, but that code requires hand-coding of my entire navigation menu! No way I am doing that madness! That’s where this thread became a dead end for me.
I then created this new Fullscreen Search Box thread in hopes of doing it another way that will allow me to continue editing my navigation menu in Blocs’ GUI but still have a clickable magnifier icon that will open a search box. I just don’t know how to implement that, hence that new thread.
So in summary, I first and foremost want a search bar that works like on Apple’s website. If that’s impossible in Blocs, then my fallback plan is to figure out how to implement a fullscreen search bar. If that too is impossible, then perhaps you can give me a cut-down version of your Blocs website so I can see how you implement your drop-down search box?
By the way, when you send me your project, with the changes for exemple from the topic of the full screen search bar, I couldn’t preview your works, with Alt+Cmd+B and even in the Play button for preview inside blocs app I have to do it 2 or 3 times to see it.
Why do you want a search feature so bad? I pretty sure you need a database for a real search feature. Why not build it using wordpress or another cms with a database?
I’ve had a search feature in the corporate websites I’ve built in SoftPress Freeway for decades, and to rebuild those sites as responsive sites in Blocs WITHOUT a search feature is a serious downgrade to everyone who frequently visits our websites, and there are many frequent visitors because we have a login section for dealers.
You can see the search feature I have right now in action in the bottom left corner of the following website:
Click once and your text cursor will be inserted automatically and you can then type a keyboard like “alarm” and hit return. Note it displays search results in a separate page in the same website. And the search is done by Google Custom Search for FREE, which includes automatic indexing of the entire website, which is quite large.
Prior to using Google Custom Search, I used Atomz search. But when Atomz died, I used Google Custom Search as a replacement.
Seriously, guys. I am shocked that more of you Blocs users AREN’T using Google Custom Search. Even the W3SCHOOLS website uses it:
But maybe you aren’t using it because like me you cannot figure out how to implement a nice looking search field on your Blocs website.
Speaking of W3SCHOOLS, I absolutely LOVE both their navigation menus (which are complex dropdowns comprised of many rows and columns of links) and the search feature, which displays a search field over and above the navi links. I am desperately trying to recreate that in Blocs, so far without success.
@JDW all the files, in here and in the other topic about the fullscreen search… I just tell that because you will report the bug to Norm, so I add that information…