Add advanced search bar on homepage

Please  follow these steps:

  • First make a custom sidebar from the wplms->sidebar manager.

 

  • Now this sidebar will appear in appearance->widgets: Now add buddypress course search widget in the sidebar.

Make sure your location is enabled from the wplms->course manager->enable course manager.

 

  • Now go to home page in backend and add new full screen stripe column below layer slider and use sidebar content in it, 

 

  • Now edit the content and fill the content as per the screenshot, 

 

  • In the last screenshot, use the following css code:
@media (min-width:991px){.search_stripe.stripe{
position:absolute;
top:30vh;
width:90%;
}}
@media (max-width:768px){
.scontent {
    display:none;
}}
.scontent {
margin-left:130px;
background:rgba(255, 255, 255, 255);
}
.scontent ul li {
max-width:200px;
padding-left:10px;
}

The final Output:

Was this article helpful?

Related Articles

Leave A Comment?