Header pro search modal full width

Support
#1

I wish to have the same search panel like in that demo . how can i achieve it using search modal into pro header?
http://demo.theme.co/integrity-1/

#2

Hi Borislav,

The demo page you linked to is not using the Pro theme. It uses the default X theme header. You can not achieve that functionality with the Pro Header. But you can have a somewhat similar feature using the Search Modal element. For more information:

Thank you.

#3

Ok , so i can not hide the panel of the search into the PRO ? there is no chance to achieve something similar ? :frowning:

#4

Hi,

Regretfully, I am not entirely sure what you are trying to achieve. Do you mean remove the white box in the search modal?

To remove it, you can add a unique class to your search modal

eg.

Then add this in Theme Options > CSS

.my-search .x-modal-content {
    background:transparent;
    box-shadow:none;
}

Thanks

#5

I have a problem with the smartphones . On desktops is OK but on smartphones the ¨box¨is making my search area ( white/green color after hover it ) smaller and all the words are cutted . So to sum up the container of the search area is causing me this issue . So i wish to solve it somehow ( the demo x version of the modal http://demo.theme.co/integrity-1/ ) does not have any box so it is just a search area and it looks ok on the smartphones . i attach a screenshot

#6

Hi,

We can reduce padding in mobile to make space.

Please add a class to your search modal

Then add this in Header > CSS

@media(max-width:767px) {
.my-search .x-modal-content {
     padding: 15px;
}

.my-search .x-modal-content-inner {
    padding: calc(1.5em * 1.5);
}
}

Thanks

#7

Hi i have added and i do not see any changes . Unfortunately any word larger than 6 letters is cut

#8

Hi,

I checked and didn’t see the class getting added. Please add the class and add the css code exactly as it is.

@media(max-width:767px) {
.my-search .x-modal-content {
     padding: 15px;
}

.my-search .x-modal-content-inner {
    padding: calc(1.5em * 1.5);
}
}

Thanks

#9

i have added it but there are not changes

#10

Hi @Borislav.VD,

It’s correctly added and applied, but just overriden. Please add !important to your styling.

Examples,

padding: 15px !important;

padding: calc(1.5em * 1.5) !important;

Thanks!

#11

done thankks for the great support it looks better :wink:

#12

you are most welcome!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.