hide s4-titlerow show search box

Question

I need some custom element to be added in the s4-titlerow, so what i did was to remove s4-titlerow using css as below

    #s4-titlerow{
    display:none!important;
}

but what i need is to show the default search box in the right side and add my app on the left. is it possible?

Answer 1

What you could do i instead of using display:none; which doesn't render the item, you can use visibility:hidden; and on the Searchbox element use visibility:visible

the code will look something like this:

#s4-titlerow 
{
    margin: 0px; 
    padding: 0px; 
    width: 0px; 
    height: 0px; 
    visibility: hidden;
}

#DeltaPlaceHolderSearchArea 
{
    visibility:visible;
}

Have a look at this for more reference: w3schools