Support » Themes and Templates » SearchForm hidden behind Header background

  • Hi, because of a silly design I received, I had to absolute position my divs. I am trying to position the searchform over the header bg within the header div.

    Because the header div is position:absolute and the searchform is float:right; the search box is displaying BEHIND the header div background when I need it to display in front. I have tried using position:absolute on the searchform but it overlays my nav menu items.

    Any suggestions on how to get around this?

Viewing 12 replies - 1 through 12 (of 12 total)
  • sure would be easier with a link to your site


    I have included snapshot of the header because the site is hosted locally right now, hope this helps.

    This is my Header.php:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
    <link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <body style="background-color:#082e56;">
    <?php include (TEMPLATEPATH . '/searchform.php'); ?>
    <div id="page-wrap">
    	<div id="totum_banner">
    	<div id="header">
            <ul id="nav">
            	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
    <!-- End of Header -->

    I pulled the searchform out of the page-wrap div to avoid the position absolute but

    This is my CSS:

    #header {
    	background:url(images/header_img.jpg) #082e55 no-repeat top;
    #searchform {
    	width: 220px;
    	padding: 10px 135px 10px 10px;

    you say when you position:absolute the searchform, it goes over the nav menu.

    did you get rid of the float:right, and add in the proper positioning values to move the search? top and left values

    Yes I did, it was positioned correctly but my menu item was not clickable and seems to be overlaid by the searchform div.

    ah, I see….cant go position:relative with the #header?

    Small suggestions, sorry…its real hard without being able to poke at a live set with some dev tools

    Don’t apologize, I really appreciate your help here. Position:relative screws up my positioning and the searchform still hides behind the header even when I tried that. Sorry I can’t give you access to the site but hopefully this helps you understand why I needed to absolution position everything. It demonstrates the layout I’m working with.

    have you messed with z index at all?

    I tried z-index:1; under searchform CSS but to no avail… should I be using it elsewhere?

    z index only works on positioned elements (absolute, relative, fixed)

    so maybe applying a negative z value to the header will get it behing the search?

    I’ve been playing around with it but to no avail. I have content and sidebar sections position:relative to be flexible with content but I need to keep the header position:absolute to prevent the layout screwing up. I can use the z-index to give each layer a priority if you like but even with the search box on top and floating right it overlays all the menu items.

    Has to be a workaround for this one, been searching endlessly but can’t find anything. Any other ideas?

    I just figured it out. I made searchbox position:relative and added a z-index while leaving header and nav divs without a z-index. Thanks for all your help! Really appreciate it!

    Hi, I have not been able to find an answer for this one any website, nor wordpress forum….hope you can help.

    I have the search box showing in the header where I want it, and have adjusted css.

    My problem is that you cannot click into the search box to perform search functions. It acts like an image. is the link.
    Thanks for the help on this matter.


Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘SearchForm hidden behind Header background’ is closed to new replies.