search off canvas

HI,

Added search and Social icon but yet some issues are there (Refer snapshot).

Hi there,

Try adding this CSS to fix the overflow of the search form:

nav#generate-slideout-menu aside#search-4 {
    margin: 0;
    width: 100%;
}

nav#generate-slideout-menu aside#search-4 form.search-form {
    display: flex;
    flex-direction: row;
}

nav#generate-slideout-menu aside#search-4 form.search-form input.search-field {
    width: 100%;
}

As for the social icons, I don't see anything added to the widgets. Make sure a link is added to LSI's widget so its associated icon will display. If you don't add links when to added an icon, the icon will be removed.

Cool, it worked but just a small alignment issue, refer to screencast in p section -

Left side search box crossing menu line (highlighted in image), so how to make it center align same as menus alignment??

On the right side due to the color search box icon not looking good (as in screenshot), so can we draw a small border around it (as shown in screenshot 2), it will help greatly.

Edit this CSS:

nav#generate-slideout-menu aside#search-4 form.search-form {
    display: flex;
    flex-direction: row;
}

Into this:

nav#generate-slideout-menu aside#search-4 form.search-form {
    display: flex;
    flex-direction: row;
    padding-left: 15px;
}

border around search button ???

Modify this:

nav#generate-slideout-menu aside#search-4 form.search-form {
    display: flex;
    flex-direction: row;
    padding-left: 15px;
}

To this:

nav#generate-slideout-menu aside#search-4 form.search-form {
    display: flex;
    flex-direction: row;
    margin: 0 15px;
    border: 2px solid white;
}

Or do you want the border on the icon only? Let us know.

Fine, Thanks a lot

No problem. :D