I want to add code (search box) in the header

Hi,

Thanks for the update. Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 767px) {
#top #header .widget {
    position: absolute;
    top: 100px;
    z-index: 99;
    left: 0;
}
#ajaxsearchpro1_1 {
    width: 100%;
}
}

Best regards,
Rikard

Hi,

Please try this CSS as well:

@media only screen and (max-width: 767px) {
#top #header .main_menu {
    background: transparent;
}
}

I can’t reproduce the results which are shown in your screenshot on your actual site, please try loading it in an incognito or private browser window to see if that helps.

Best regards,
Rikard

Hi,

Your logo stretches across the screen on tablet sizes, and this CSS seems to be causing that:

.logo a img {
    width: 710px;
    height: 94px;
}

Did you add that? If so then please try to adjust it in a media query:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
.logo a img {
    width: 710px;
    height: 94px;
}
}

Otherwise the burger menu won’t have any room on the right hand side of the screen.

Best regards,
Rikard