Search icon in Navigation bar

Please open my Blocs 3.2.1 document here: Navi Test Page.bloc.zip (37.5 KB)

Questions:

  1. 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?

  2. 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?

  3. 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?)

  4. 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?

  5. 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?

Thank you,

James

No replies after 22 hours…

Okay…

Let’s try this then…

PRETTY PLEASE WITH SUGAR ON TOP?

:bowing_man:

@Norm Please rescue me from the apathy in this forum! :cry:

Hello @JDW working on it…
But a little Busy…

Hi @JDW

I tried to open your file, but after a minute of playing around w/ it - the Layer Navigation all went blank - I don’t know what to make of this.

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.

1 Like

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:

Navi Test Page.bloc.zip (36.8 KB)

About points 1 - 3 I think they are covered with the file, except I don’t have your images, so I can’t simulate with the images.

Point 4 - Core Icons are pre-formated with 25% 50% 75% and 100% to change this you have to add a HTML code with manual icon.

Point 5 - I don’t know how you will search but I recommend you to find the “Search” bric from here: New bric - Search

1 Like

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

https://kiramek.com

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:

https://www.w3schools.com

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…