Search module design changes in different pages

cemsdb

Though 'Style 3' template is set as default to all pages, the 'Search' module looks and acts differently between the homepage and all other pages. The homepage page has a square design which expands as a whole (including left-border line), while all the other pages the 'Search' module is retangular and the search-bar inside expands through/above the vertical left-border line.

What determines the 'Search' module design/behavior? How can I have the square homepage design set to all pages?

saguaros

cemsdb As I can see the search box expands on all pages now on your site, could you share the URL of page where I can replicate the same issue?

cemsdb

saguaros Hi Saguaros, yes the search box does indeed expand on all pages. My issues are with the design and execution difference between the homepage Search function compared to all other pages.

I would like all pages to have the same 'Search' module that appears on the homepage. How do I do that?

I've attached 4 images to explain:

1A) Homepage Search - CLOSED (looks like a square)
1B) Homepage Search - OPEN (the left-border expands along with the search-bar)

2A) Otherpage Search - CLOSED (looks like a vertical rectangle)
2B) Otherpage Search - OPEN (the left-border doesn't move and the search-bar breaks through when it expands)

saguaros

It due to the layout with/without hero section.

You can add this custom css code:

.t3-header .headright {
    border-left: 0;
}

.t3-header .headright .head-search .search, .t3-header .headright .head-search .form-search {
    height: 90px;
    width: 90px;
}

.t3-header .headright .head-search .search .form-control, 
.t3-header .headright .head-search .form-search .form-control, 
.t3-header .headright .head-search .search .search-query, 
.t3-header .headright .head-search .form-search .search-query {
    background-position: 35px center;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    border-left: 1px solid rgb(255 255 255 / 20%);
    color: #000000;
    padding: 0 0 0 90px;
    height: 90px;
    width: 90px;
}

.t3-header .headright .head-search .search .form-control:focus, 
.t3-header .headright .head-search .form-search .form-control:focus, 
.t3-header .headright .head-search .search .search-query:focus, 
.t3-header .headright .head-search .form-search .search-query:focus {
    border: 0;
    border-left: 1px solid rgba(255,255,255,0.2);
    width: 210px;
    padding-right: 25px;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

into the file: root/templates/ja_morgan/css/custom.css (Create this file if it doesn't exist now)

Regards

cemsdb

For the benefit of other Joomlart members, to make the search-bar look like the homepage-style-3 search-bar it's important to add the following line to the last two items in the code your provided :

border-left: 1px solid #eaeaea;

saguaros

cemsdb Is that ok now?

cemsdb

saguaros Yes, thank you Saguaros, issue resolved!