[naomi]

Hello all,

currently, I am trying to adjust the search box in my horizontal menu bar using the Nirvana theme and am – honestly – quite struggeling.

First of all: I really would love the menu bar search box look exactly like the widget search box.

My issues:

• margin-top: 5px; makes the search box “sit” in the middle of the menu bar but as soon as you hover over it with your mouse, it looks like the orange border of the box (1px) is maximized to 6px, 5px more. I’d rather have it 1px.
• The search button does not move 5px down. No matter what I try.
• I managed to give the search button the desired background color. However, via padding, it just pushes the icon a little to the right.
• The overall search box does not want to become longer. I tried it with width.
• I’d like to remove the blue “x” at the right side of the search box as soon as you enter a keyword.
• Also, if I could have the effect for the button of the widget search box, I’d be very happy.

I’d very appreciate any help on this 🙂

Kind regards,
Naomi

Website: earth-renewing.com

[naomi]

Merry Christmas 🙂

Any idea? I have reactivated the main menu search box for you to see the current effect. For my purposes, it is very important to have the box in the main menu, but I still cannot find any solution.

Have great holidays!

Website: earth-renewing.com

[Zed]

Try this CSS to move the search button lower (in line with the searchbox):

li.menu-main-search .searchsubmit[type="submit"] {
    top: 5px;
}

and edit the .crycon-search styling to remove the top margin and adjust the padding to: padding: 17px 17px 17px 15px;

The search button animations seems to currently be broken (overlapped) on the other search forms as well.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[naomi]

Thank you, Zed, for your quick reply!

Sadly, it does not change the aesthetic issues. The search bar isn’t in the middle of the main menu yet and neither is the button in line with the search box.

I have removed the pink background of the button, so the search box in the sidebar can show its effect without overlapping.

Do you mean that there usually is an animation on the main menu search box?

[Zed]

Try adding this CSS to the site as it is at this moment:

/* center form vertically in the menu bar */
body #access li.menu-main-search { margin-top: 9px; }
/* center the search icon horizontally in the button */
body #access li.menu-main-search .crycon-search { padding: 0; }
/* center the search icon vertically in the form field */
body li.menu-main-search .searchsubmit[type="submit"] { top: 0; }
/* search icon color */
body li.menu-main-search .searchsubmit[type="submit"] { color: #fff; }
/* search icon background */
body li.menu-main-search .searchform::after { background-color: #ec4b80; width:52px; height:52px; }

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[naomi]

Thank you, thank you, thank you, Zed! It works perfectly 🙂

Just one more thing if it’s not too much to ask: How could I remove the little blue cross that appears as soon as I enter something into the search box? 🙂

[Author]

Posts