Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #4858

    Hello, my clients have asked for me to remove the search bar from the header, and move it to the navigation. I found how to remove the bar from the header, and I also read this article about inserting search into the menu nav:

    http://www.throwingabrick.com/wordpress/add-search-box-wordpress-3-0-nav-menu.html

    However, that is for the TwentyTen theme . . . I looked at the code and have tried adding it, but I can’t get it into the position that I would like. Any help would be welcome, thanks very much!

    #47807

    Which navagiation? the first one or the big blocky square one? If the first one you could just add it to the right of the area or if the main big square blocks you need to change the width of the navigation then you will need to add it there but it will look weird. I would strongly recommend making it a navigation menu that when clicked on calls a popup like the upload news story js call.

    Yes that adds a click to do a search but that is better than sticking a search that will look weird to the right of the navigation.

    make a nav tab called search that goes to a search page where you can there add more search options imo

    #47808

    Hey,

    if you want to implement the search form like described in the tutorial you need to remove following code in header.php:

    <?php get_search_form(); ?>

    If you want to add the menu to the first menu (small menu below the logo) replace:

    </div><!-- end nav_wrapper -->

    with:

    <?php get_search_form(); ?>
    </div><!-- end nav_wrapper -->

    If you want to add the menu to the second menu (big tabs menu) replace:

    </div><!-- end catnav_wrapper -->

    with:

    <?php get_search_form(); ?>
    </div><!-- end catnav_wrapper -->

    Maybe you need to adjust the css a bit. I can help you with this modification if you post a link to your website after you’ve implemented the search form code

    #47809

    First of all, my apologies for not being clear, I was referring to the second menu. Dude, I’ve gone ahead and revised the code per your suggestion, and you can view the result on my test site here:

    http://www.wp.nashville-sheriff.net/

    Monsoon, I agree that this might be an inelegant solution, but I think it could work well based on the site’s content.

    Thanks to everyone for your help!

    #47810

    I just noticed that my code suggestion above contained a small syntax error which leads to a html structure issue. To fix it replace:

    <!-- end catnav_wrapper -->

    with:

    </div><!-- end catnav_wrapper -->

    I also updated/corrected the instructions above. The search form should appear on the right of the second menu afterwards.

    #47811

    Okay, I revised the syntax per your recommendation, and I believe now I just need the css?

    (Also, I upgraded to WordPress 3.2, and my site is showing up fine.)

    #47812

    Great that the update did work for you :)

    I noticed that the div error persists so I modified header,php and uploaded the file here: http://www.mediafire.com/?t3djw179zc9f04x

    Please replace your header.php with this file.

    Then add following code to style.css:

    .search-form-menu{
    position: absolute;
    right: 0px;
    top: 0px;
    }

    If you want to push down the search form increase the top value (i.e. to 10px). If you want to push the search form to the left increase the “right” value. Hope it displays correct now :)

    #47813

    Thanks very much for your help, I think we’re almost there. However, I see the icon for the search, but I don’t actually see the form itself?

    I’d like to be able to add the RSS/Facebook/Twitter icons also, but that may mess with the design. I’ll just add those links to the sidebar. If I can get the search issue cleared up, I should be done with questions, ha.

    #47814

    Ok – think following css styling is required –

    1) Replace following code in style.css:

    #searchsubmit{
    border:medium none;
    cursor:pointer;
    display:block;
    height:35px;
    outline:none;
    padding:0;
    position:absolute;
    text-indent:-9999px;
    width:35px;
    right:-6px;
    top:-4px;
    }

    with:

    #searchsubmit{
    border:medium none;
    cursor:pointer;
    display:block;
    height:35px;
    outline:none;
    padding:0;
    position:absolute;
    text-indent:-9999px;
    width:35px;
    right:-6px;
    top:4px;
    }

    and add following code instead of the css code I posted in my last answer/post:

    .search-form-menu {
    position: absolute;
    right: 1px;
    top: 30px;
    z-index: 100;
    }

    #47815

    Wonderful, it’s working now! One quick issue: What is the CSS needed to give the search form a border? I tried adding a border but I was only able to put the border around the DIV and not the form itself. I just want to add that border so that it will stand out a bit more.

    Thanks so much for your help.

    #47816

    Follow-up: I added the border around the div, which you can view at the site. Thanks again.

    #47817

    You can use following code (i.e. in style1.css):

    #head #s {
    border: 1px dotted #333333;
    }

    #47818

    Great! Thanks very much! The search is now how I want it. Unfortunately, the search icon appears inside the search form in IE, but not in Firefox. I tweaked the #searchsubmit CSS, but it doesn’t appear properly in Firefox. Is there a fix for both? If not, no problem.

    #47819

    Try to change the searchsubmit code to:

    #searchsubmit {
    background: url("../images/skin1/search.png") no-repeat scroll 5px 11px transparent;
    }

    #47820

    That code did not quite work for me, although I changed “5px 11px” to “5px 2px” and it shows up correctly in IE. Now, of course, it’s off in FF, haha. (NOTE: It’s off in Chrome, also.) Unfortunately, my bosses will only look in IE, so that is the primary standard I’m forced to adhere to.

    This may be my best bet on this issue, but thanks a lot for your help.

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

The topic ‘Adding Search Bar To Newscast Navigation’ is closed to new replies.