Adjusting Menu Bar Search Box

Forums » WordPress » Nirvana » How To

  • Author
    Posts
  • November 22nd, 2018 at 22:31 #70701
    naomi
    Power User

    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

    December 25th, 2018 at 16:57 #72049
    naomi
    Power User

    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

    December 31st, 2018 at 16:08 #72235
    Zed
    Cryout Creations mastermind

    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.
    December 31st, 2018 at 16:30 #72239
    naomi
    Power User

    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?

    January 13th, 2019 at 15:39 #72638
    Zed
    Cryout Creations mastermind

    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.
    January 13th, 2019 at 16:21 #72648
    naomi
    Power User

    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
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Adjusting Menu Bar Search Box’ is closed to new replies.