Search Modal in Pro Headers

[MulderDSM]

Is there away to make the search modal in Pro Headers a full screen modal to cover the entire screen?

[Jack]

Hi there @MulderDSM,

You could do this using the VH and VW for the viewport width and height and set both to 100%.

This may need modifying slightly for mobiles perhaps through the use of a media query to leave a small border to be able to tap off the search (perhaps 90% on both values).

Thanks!

[MulderDSM]

Sorry, not sure where I would put this in.

[christopher]

It depend on the ID or Class name that you added for the Search Element. Would you please kindly get back to us with the URL/User/Pass of your Wordpress Dashboard using the Secure Note to follow up the case and give you proper practical suggestion?

Thank you.

[MulderDSM]

Adding a secure note.

[john]

Hi,

Thank you for writing in!

To fix it, just adding following CSS under the code below to X > Launch > Options > CSS

.x-modal-content-inner {
  padding: 0 !important;
}

.x-modal-content {
   max-width: 100% !important;
   height: 100vh;
   padding: 50vh 6em;
}

.hm7.x-search {
   margin-top: -21px;
}   

The latest margin-top and the padding 50vh 6em will centralize the search input on the screen.

P.S: I`ve checked that the close button is invisible because it’s white, so, if you want to change the color, add this custom CSS code:

 .x-modal-close span {
   color: #000;
}