[SOLVED] Making logo bigger but not over lap on menu and search box

[brave200]

I'm new to Presta Shop and trying to make some small customizations to the default theme. One is making a bigger logo appear on the header section. Could someone give some insight on how to achieve this properly? By default it appears that a big logo will over lap onto the menu bar and search box. I've attached a picture to see what it looks like. Is there a smart way to add some padding so the search box and or menu bar will float around the bigger image size?

 

I've made a copy of the default theme and renamed it to my own.

 

The CSS code from gloabl.css I believe in question is:

 

#header {position:relative}
#header_logo {
    position: absolute;
    left:0;
    top: 30px;
    z-index: 1;
}

#header_right {
    position:relative;
    float: right
}

[vekia]

you need to move header a bit down with modification of:

.sf-contener {
clear: both;
}

just add there margin-top: :130px;

[PascalVG]

The search box need to be moved a little as well:

In /modules/blocksearch/blocksearch.css:  and find this blue named block of code

#search_block_top {

  position: absolute;

  right: 22%;              <- make a little smaller, from 26% to around 22%

  top: 34px;

}

 

 

 

and in same file, find the blue named code:

#search_block_top #search_query_top {

  padding: 0 5px;

  height: 23px;

  width: 230px;           <- change to smaller value, from 300px to say 230px

  border: 1px solid #666;

  border-right: 0 !important;

  color: #666;

  background: url(img/bg_search_input.png) repeat-x 0 0 #fff;

  float: left;

}

 

 

pascal

[brave200]

Thank you very much! I made the changes you guys provided and it looks great! Many Thanks!!!

[PascalVG]

Good to hear :-)

 

I'll mark the topic as solved.

 

Happy selling,

pascal