Joomla Templates Club 406,261 posts

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#200828

Hello

I would like to embed/place the search box in the menu bar similar to the image attached. I tried following advice mentioned here for other templates but that didn’t quite work.

Thank you

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#547484

steps below will help you to do this

+ Open templates/ja_mitius/tpls/blocks/top-bar.php file, find and cut script

<div class="head-search<?php $this->_c('head-search')?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>


Paste into templates/ja_mitius/tpls/blocks/mainnav.php file

Change

<div class="right-mainnav"> </div>

To

<div class="right-mainnav">
<div class="head-search<?php $this->_c('head-search')?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
</div>

+ Create templates/ja_mititus/css/custom.css file and add new rule

.navbar-inner .right-mainnav {
width: auto;
right: 0px;
}

1 user says Thank You to Ninja Lead for this useful post

1. joomlafans

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#547521

Hello
Thank you for your reply.

The search box is in the right place. it just needs a couple of aesthetic tweaks. How do I change the height, width and colour of the search box to look like the image attached?

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#547613

I’m so sorry about this, I could not do as your expectation because it requires designer to draw search box from background image. I can only help you as below

and copy all css below and paste to templates/ja_mititus/css/custom.css file

.head-search .input {
background: url(../images/ico/search-invert.png) no-repeat 95% center #f2f2f2 ;
border: solid 0px #222 ;
border-left: solid 0px #222 ;
width: 190px;
}
.head-search .input:focus,
.head-search .input:hover,
.head-search .input:active {
border: none;
background: url(../images/ico/search-invert.png) no-repeat 95% center #f2f2f2 ;
color: #000 ;
width: 190px;
}

let me know how it goes

---

Attachments:

1. 

1 user says Thank You to Ninja Lead for this useful post

1. joomlafans

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#547634

Hello

It looks much better now, where is that search background image located? I could not find it.

Thank you

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#547642

<em>@joomlafans 443403 wrote:</em><blockquote>Hello

It looks much better now, where is that search background image located? I could not find it.

Thank you</blockquote>

Currently, the input search could not use background image that’s why you could not find it. If you wish to use the background image in search form, you have to customize.

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#547660

It looks great in LTR sites, In RTL sites however the word Search and the magnifier image overlap. how can I fix that?

I replaced the search-invert.png image with the desired search bar image for the background. is this the correct way of doing it?

and finally how can I make the search bar responsive? it moves outside the navigation bar on smaller devices.

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#547662

This the code I am using at the moment for a multi lingual LTR + RTL website

.navbar-inner .right-mainnav {
width: auto;
left: 715px;
right: 715px;
}
.head-search .input {
background: url(../images/ico/search_bar.jpg) no-repeat 95% center #f2f2f2 ;
border: solid 0px #222 ;
border-left: solid 0px #222 ;
width: 290px;
}
.head-search .input:focus,
.head-search .input:hover,
.head-search .input:active {
border: none;
background: url(../images/ico/search_bar.jpg) no-repeat 95% center #f2f2f2 ;
color: #000 ;
width: 290px;
}
<!-- MAIN NAVIGATION -->
<nav id="ja-mainnav" class="wrap ja-mainnav navbar-collapse-fixed-top">
<div class="container navbar">
<div class="navbar-inner">

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<div class="nav-collapse collapse<?php echo $this->getParam('navigation_collapse_showsub', 1) ? ' always-show' : '' ?>">
<?php if ($this->getParam('navigation_type') == 'megamenu') : ?>
<?php $this->megamenu($this->getParam('mm_type', 'mainmenu')) ?>
<?php else : ?>
<div class="mainnav-wrap <?php $this->_c('navhelper') ?>">
<jdoc:include type="modules" name="<?php $this->_p('mainnav') ?>" style="raw" />
</div>
<?php endif ?>
</div>

</div>
</div>
</nav>
<!-- //MAIN NAVIGATION -->

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#547826

Have you sorted it out? Do you need further assistance?

[joomlafans Friend joomlafansJoin date: April 2014Posts: 74Downloads:8Uploads:16 Thanks: 32 Thanked: 9 times in 1 posts]

#547854

For the most part yes.
I am not sure how to fix the magnifier image overlapping with the word search in RTL.
The search bar is not responsive though it moves out of the menu on smaller devices.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#548230

I’m thinking a solution for the problem on your site. But it’s pretty hard to style the css to work with responsive in new search position. But you can try to work with my solution again :

+ Open templates/ja_mitius/tpls/blocks/top-bar.php file

Find

<div class="span4 clearfix">
<div class="<?php $this->_c('social')?>">
<jdoc:include type="modules" name="<?php $this->_p('social') ?>" style="raw" />
</div>
</div>

To

<div class="span4 clearfix">
<div class="head-search<?php $this->_c('head-search')?> hidden-wide hidden-normal">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
<div class="<?php $this->_c('social')?>">
<jdoc:include type="modules" name="<?php $this->_p('social') ?>" style="raw" />
</div>
</div>

+ Open templates/ja_mitius/tpls/blocks/mainnav.php file

Change

<div class="right-mainnav">
<div class="head-search<?php $this->_c('head-search')?>">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
</div>

To

<div class="right-mainnav">
<div class="head-search<?php $this->_c('head-search')?> hidden-xtablet hidden-tablet hidden-mobile">
<jdoc:include type="modules" name="<?php $this->_p('head-search') ?>" style="raw" />
</div>
</div>

+ Open templates/ja_mititus/css/custom.css file

Change

.navbar-inner .right-mainnav {
width: auto;
right: 0px;
}
.head-search .input {
background: url(../images/ico/search-invert.png) no-repeat 95% center #f2f2f2 ;
border: solid 0px #222 ;
border-left: solid 0px #222 ;
width: 190px;
}
.head-search .input:focus,
.head-search .input:hover,
.head-search .input:active {
border: none;
background: url(../images/ico/search-invert.png) no-repeat 95% center #f2f2f2 ;
color: #000 ;
width: 190px;
}

To

@media (min-width: 1200px) {
.navbar-inner .right-mainnav {
width: auto;
right: 0px;
}
.head-search .input {
background: url(../images/ico/search-invert.png) no-repeat 95% center #f2f2f2 ;
border: solid 0px #222 ;
border-left: solid 0px #222 ;
width: 190px;
}
.head-search .input:focus,
.head-search .input:hover,
.head-search .input:active {
border: none;
background: url(../images/ico/search-invert.png) no-repeat 95% center #f2f2f2 ;
color: #000 ;
width: 190px;
}
}
@media (min-width: 980px) and (max-width: 1199px) {
.navbar-inner .right-mainnav {
width: auto;
right: 0px;
}
.head-search .input {
background: url(../images/ico/search-invert.png) no-repeat 95% center #f2f2f2 ;
border: solid 0px #222 ;
border-left: solid 0px #222 ;
width: 190px;
}
.head-search .input:focus,
.head-search .input:hover,
.head-search .input:active {
border: none;
background: url(../images/ico/search-invert.png) no-repeat 95% center #f2f2f2 ;
color: #000 ;
width: 190px;
}
}


[Author]

Posts