Insert search Icon into dropdown block

Resolved hebhansen
(@hebhansen)

3 months, 2 weeks ago

Hi Ollie

I am running your plugin with pleasure. Awesome. I have inserted dropdown block as a search menu item that drops down and holds the search block. Rather than text “Search” in menu I would like to add a search icon.

I have tried to use the inline image option. It shows correct in editor but on frontend a lot of html stuff shows instead og image. How is this done and what is the issue?

Thx

Viewing 2 replies - 1 through 2 (of 2 total)

Plugin Author

Mike McAlister

(@mmcalister)

1 month ago

Hi there, are you using the core search block? That should render fine in the drop downs.

Thread Starter

hebhansen

(@hebhansen)

3 weeks, 3 days ago

Hi @mmcalister

That’s not the idea. Your menu items do not allow an icon, but only text, hence, text appears in menu. I have applied the search block inside the drop down mega menu for consistent behaviour across menus.

Here is how to switch your “Search” text, adding an icon, aligning to menu and also removing the animated arrow next to the search icon. Adjust size and animation to your liking and add css in your child theme:

/* Make the menu item align vertically like other items */
.search-icon .wp-block-ollie-mega-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hide the text but keep it accessible */
.search-icon .wp-block-navigation-item__label {
  font-size: 0;
}

/* Insert the search icon */
.search-icon .wp-block-navigation-item__label::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}

/* Hover effect */
.search-icon:hover .wp-block-navigation-item__label::before {
  transform: rotate(90deg) scale(1.1);
}

/* Remove Ollie mega menu arrow only for search */
.search-icon .wp-block-ollie-mega-menu__toggle-icon,
.search-icon .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon svg {
  display: none;
}

For the particular search item w drop down in Ollie Menu, activate drop down and in block settings > Additional classes add “search-icon”.

Your welcome

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

Tags