Adding Search Bar To Newscast Navigation « Support Forum | Kriesi.at

Support Forum » Newscast

Adding Search Bar To Newscast Navigation

15 posts from 3 voices

Started 1 year ago by JPDCSO
Latest reply from JPDCSO
This topic is not a support question

Tags:

JPDCSO
Member

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!

Posted 1 year ago #
Monsoon
Member

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

Posted 1 year ago #
Dude
Dude
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>
```
with:
```
<?php get_search_form(); ?>
</div>
```
If you want to add the menu to the second menu (big tabs menu) replace:
```
</div>
```
with:
```
<?php get_search_form(); ?>
</div>
```
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
Posted 1 year ago #
JPDCSO
Member

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!

Posted 1 year ago #
Dude
Dude
I just noticed that my code suggestion above contained a small syntax error which leads to a html structure issue. To fix it replace:
```

```
with:
```
</div>
```
I also updated/corrected the instructions above. The search form should appear on the right of the second menu afterwards.
Posted 1 year ago #
JPDCSO
Member

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.)

Posted 1 year ago #
Dude
Dude
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 :)
Posted 1 year ago #
JPDCSO
Member

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.

Posted 1 year ago #

Dude
Dude

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;
}

Posted 1 year ago #

JPDCSO
Member

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.

Posted 1 year ago #
JPDCSO
Member

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

Posted 1 year ago #
Dude
Dude
You can use following code (i.e. in style1.css):
```
#head #s {
    border: 1px dotted #333333;
}
```
Posted 1 year ago #
JPDCSO
Member

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.

Posted 1 year ago #

Dude
Dude

Try to change the searchsubmit code to:

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

Posted 1 year ago #

JPDCSO
Member

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.

Posted 1 year ago #