Edit Question - KnowledgeHub

Title Body

I have a menu and a search box. I would like to put the search box along with menu items. But my menu is being built in a different file in a div called 'custommenu' which uses the following css: #custommenu { position:relative; z-index:999; font-size: 14px; margin: 0 auto; padding: 10px 16px; width: 918px; background-color: #FB0A51; border-top-left-radius: 10px 10px; -moz-border-top-left-radius: 10px 10px; border-top-right-radius: 10px 10px; -moz-border-top-right-radius: 10px 10px; } Whereas I have my search box in a separate file which looks like this: <div class="header"> some code <div class="quick-access"> some code <php echo $this->getChildHtml('topSearch') ?>; </div> </div> I tried adding the following to the css file so that the search box comes on top of the menu but it did not work .header .form-search { position:absolute; right:29px; z-index:1000; top: 80px; width:315px; height:30px; padding:1px 0 0 16px; } Still the search box gets hidden behind the menu. I would like to have the search box n the menu. How do i do it? EDIT: Here's the css of the div's which contains the search box, .header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;} .header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; } .header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; } And this is how it looks right now, (purple links - quick access, white box is search which is going behind the pink 'custommenu' area. I would like to have the white box on the pink area. And all of this is inside 'header') <img src="https://i.sstatic.net/iz3Oy.

Tags (comma-separated) Cancel