Search in Navigation bar

Community Forums Forums Design Tips and Tricks Search in Navigation bar

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  tylerholloway 1 year, 7 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #14299

    tylerholloway
    Participant
    Post count: 10

    In Prose, is there a way to get the search bar to show up in the secondary navigation bar?  I know there’s an option in the design to turn it on in the primary, but I’m trying to avoid using that nav bar.  I will likely have plenty of room in my secondary for a while, so I thought it would work well there but didn’t know where to start as far as the coding goes.  Thanks for any help.

    Link: http://tylerholloway.net

    #14306

    wendycholbi
    Participant
    Post count: 120

    I only see one navigation bar on your site, Tyler.

    Are you calling it “secondary navigation” because it appears below the header image?

    You can use the primary navigation bar (along with all the extras like the search bar) and simply reposition it below the header. Paste this snippet in Genesis –> Custom Code –> Custom Functions:

    /** Reposition the primary navigation */
    remove_action( 'genesis_before_header', 'genesis_do_nav' );
    add_action( 'genesis_after_header', 'genesis_do_nav' );

    Or is there a specific reason you want to avoid the primary navigation bar other than its default above-the-header location?


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #14315

    tylerholloway
    Participant
    Post count: 10

    It is called secondary in my theme options, so that’s what I went with.  I didn’t even think about repositioning the primary to take its place.  That worked great, but a few follow up questions: what code do I need to use to recolor the search button?  It is pulling my default color scheme for buttons, but that causes it to be red-on-red.  Also, what about the background of the box to type the query? I looked at the search code in the theme, but didn’t see the button code.  Finally, it isn’t exactly centered in the nav bar.  Is that a padding issue?

    Thanks so much Wendy!

    #14399

    wendycholbi
    Participant
    Post count: 120

    In Genesis –> Design Settings, scroll down to the bottom.

    “Input Boxes” controls the background color, text color, font, and border for the search field (and also other fields like the input field in your sidebar opt-in widget, and I see that is a different color so I’m guessing you added the “#fff !important” to Genesis –> Custom Code –> Custom CSS to make the search field white). “Submit Buttons” controls all the submit buttons.

    So first I’d suggest picking colors for the input boxes and buttons that will work well in all of your contexts (against the white background of your sidebar, against the red background of your navbar, and finally against the gray background of your footer, where you have another search field), so that you can just use the Design Settings to control them sitewide.

    That’s simplest, but of course it is possible to customize your CSS so that some buttons/fields override the Design Settings. If you want only the button in the navbar to be a different color, but you want all your other buttons to grab their red color from the Design Settings, you could add something like this to Genesis –> Custom Code –> Custom CSS (with the hex color of your choice):

    #nav .searchsubmit {
    background-color: #1d1d1d;
    }

    You could try adjusting the padding with a snippet like this (again, add to Genesis –> Custom Code –> Custom CSS):

    .s {
    padding: 4px 7px;
    }

    (the default is 5px 7px, and when I changed that to 4px 7px using Firebug, the navbar search field looked vertically centered to me, see what you think.)

    Also, your CSS is currently minified (last box on the Genesis –> Design Settings page), so if you need to tweak more CSS, I’d suggest un-minifying it while you are testing.

    And if you don’t have Firebug (browser add-on for Firefox and Chrome), I highly recommend it — it’s a great tool for letting you see exactly how CSS changes will look, what selectors to use, etc.


    I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

    #14482

    tylerholloway
    Participant
    Post count: 10

    I got Firebug yesterday, but I haven’t figured it out quite yet.  Yesterday I could get the HTML code but the CSS wouldn’t come through.  Today, nothing is pulling for some reason.  Not really sure what happened.

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

You must be logged in to reply to this topic.