[Theme: Zerif Pro] Custom CSS Code to align search bar in Nav Menu

  • Resolved ebookbump

    (@ebookbump)


    8 years, 3 months ago

    I have added a search bar widget to the Nav Menu of my site but as you can see: https://www.ebookbump it sits slightly below the other wording on that section and isn’t inline with the Checkout.

    Can this be corrected with a Custom CSS code?

    Is it also possible to change the Search button to be blue?

    Thank you in advance everyone!

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

  • Hi ebookbump!

    It can be changed with CSS. Here you go!

    li#menu-item-5749 {
    margin-top: 7px !important;
}

.input.search-submit {
    background: #000 !important;
}

    Just make sure to change the #000 to a hexa value you want ??

    Sorry this will actually work, I just noticed it creates a space under the menu…this shouldnt

    form.bop-nav-search.menu-item.menu-item-type-search.menu-item-object-.menu-item-5749 {
    margin-top: -13px !important;
}

.input.search-submit {
    background: #000 !important;
}

    Thread Starter ebookbump

    (@ebookbump)

    Thank you so much, that’s done the trick!

    I’ve tried to change the color to match the blue of the other buttons on my site with this:

    form.bop-nav-search.menu-item.menu-item-type-search.menu-item-object-.menu-item-5749 {
    margin-top: -13px !important;
    }

    .input.search-submit {
    background: #1e73be !important;
    }

    But it remains the same red, am I using an incorrect value for the Hex color?

    Hi!

    I think the problem with the background is because you have a ‘ . ‘ before input. Input is a html tag that is specifying .search-submit class if that makes sense. So copy and paste this below and that should work.

    input.search-submit {
    background: #1e73be !important;
}

    edit**: I also realize that I gave you the wrong code up top with the .input my bad ??

    Thread Starter ebookbump

    (@ebookbump)

    Yep, that fixed it!

    Thank you so much for your help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Theme: Zerif Pro] Custom CSS Code to align search bar in Nav Menu’ is closed to new replies.

Tags