Search icon in Navigation bar

@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:

  1. Open “apple.com
  2. Click on the magnifier icon.
  3. 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? :slight_smile:

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.

Hello @JDW

Well in so short time, I found a small code, that probably is what you looking for. More or less.

Create a Div, then inside the div, add a HTML code.
And write the following:

<link rel="stylesheet" href="css/style.css">
<header id="header-2" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-2"></a>
    </div>
    <ul class="menu">
      <li><a href="#">For Business</a></li>
      <li><a href="#">For Personal</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="Type here to search...">
    </form>
  </nav>
</header>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/index.js"></script>

Then in the configuration of the page add the following files:

Search.zip (3.3 KB)

Try is is more or less what you looking for… :slight_smile:

@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! :frowning:

@Bill & @Pealco

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.

Thanks,

James

Btw folks are you guys wanting a way to add an icon within the search field? I can put together a custom bric for that if required.

2 Likes

@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?

I’m running 10.12.6 : I got the blank sidebar again, but was able to get it back by switching between the device layout buttons - weird.

@Pealco

Bill said he is using MacOS Sierra and gets the blank left sidebar problem.
What MacOS version are you using?

(I assume @Norm must be using High Sierra or Mojave. I am using High Sierra. Neither Norm or myself see the problem.)

Hello @JDW i’m With Mojave.

1 Like

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.

You and I have exchanged a lot of dialog in this thread and others. What “project” are you referring to specifically?

@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…

Thank you. I just updated my bug report ticket so @Norm is aware.

@Pealco I’ve reported your findings and the findings of @Bill to @Norm in my bug report ticket, and he replied today saying this:

its odd, I have a bunch of Macs I test on, across version OS versions and it shows the tree fine. Im wondering if its ​graphics chip related or 3rd party app running causing this.

So I would like to ask both of you what your graphics chip is, and if you are using any unusual 3rd party apps that could be causing it. I must ask this because if @Norm cannot reproduce what you gentlemen are seeing, he cannot fix the bug.

Thank you,

James

There you have @JDW

image

No 3rd party apps or nothing, in addition to that I made a clean install in my Mac, and only have apps from macstore, except the BLOCSAPP and SOLIS.

About what happened I will make a small video and send it in a new answer.

1 Like

@JDW

Here’s what I’m running:

288

Other apps running: Slack, Safari, BBEdit, Mail, the usual.

1 Like

Gentlemen, thank you. I’ve updated my bug report ticket with @Norm and give him a link to your posts.

There you have the video, sorry for the audio, Maverick Movie…

http://webtekpc.pt/wtpccloud/index.php/s/DEiRB2QaQwYn2fz