-
AuthorPosts
-
joomlafans Friend
joomlafans
- Join date:
- April 2014
- Posts:
- 74
- Downloads:
- 8
- Uploads:
- 16
- Thanks:
- 32
- Thanked:
- 9 times in 1 posts
August 27, 2014 at 7:09 am #200828Hello
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
Ninja Lead Moderator
Ninja Lead
- Join date:
- November 2014
- Posts:
- 16064
- Downloads:
- 310
- Uploads:
- 2864
- Thanks:
- 341
- Thanked:
- 3854 times in 3563 posts
August 28, 2014 at 4:52 am #547484steps 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
joomlafans Friend
joomlafans
- Join date:
- April 2014
- Posts:
- 74
- Downloads:
- 8
- Uploads:
- 16
- Thanks:
- 32
- Thanked:
- 9 times in 1 posts
August 28, 2014 at 11:11 am #547521Hello
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?
Ninja Lead Moderator
Ninja Lead
- Join date:
- November 2014
- Posts:
- 16064
- Downloads:
- 310
- Uploads:
- 2864
- Thanks:
- 341
- Thanked:
- 3854 times in 3563 posts
August 29, 2014 at 3:31 am #547613I’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
-
1 user says Thank You to Ninja Lead for this useful post
joomlafans Friend
joomlafans
- Join date:
- April 2014
- Posts:
- 74
- Downloads:
- 8
- Uploads:
- 16
- Thanks:
- 32
- Thanked:
- 9 times in 1 posts
August 29, 2014 at 8:47 am #547634Hello
It looks much better now, where is that search background image located? I could not find it.
Thank you
Ninja Lead Moderator
Ninja Lead
- Join date:
- November 2014
- Posts:
- 16064
- Downloads:
- 310
- Uploads:
- 2864
- Thanks:
- 341
- Thanked:
- 3854 times in 3563 posts
August 29, 2014 at 9:21 am #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
joomlafans
- Join date:
- April 2014
- Posts:
- 74
- Downloads:
- 8
- Uploads:
- 16
- Thanks:
- 32
- Thanked:
- 9 times in 1 posts
August 29, 2014 at 10:25 am #547660It 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
joomlafans
- Join date:
- April 2014
- Posts:
- 74
- Downloads:
- 8
- Uploads:
- 16
- Thanks:
- 32
- Thanked:
- 9 times in 1 posts
August 29, 2014 at 10:28 am #547662This 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 Lead
- Join date:
- November 2014
- Posts:
- 16064
- Downloads:
- 310
- Uploads:
- 2864
- Thanks:
- 341
- Thanked:
- 3854 times in 3563 posts
September 1, 2014 at 8:23 am #547826Have you sorted it out? Do you need further assistance?
joomlafans Friend
joomlafans
- Join date:
- April 2014
- Posts:
- 74
- Downloads:
- 8
- Uploads:
- 16
- Thanks:
- 32
- Thanked:
- 9 times in 1 posts
September 1, 2014 at 11:25 am #547854For 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 Lead
- Join date:
- November 2014
- Posts:
- 16064
- Downloads:
- 310
- Uploads:
- 2864
- Thanks:
- 341
- Thanked:
- 3854 times in 3563 posts
September 4, 2014 at 4:47 am #548230I’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;
}
}
AuthorPostsViewing 11 posts - 1 through 11 (of 11 total)This topic contains 11 replies, has 2 voices, and was last updated by
Ninja Lead 10 years ago.
We moved to new unified forum. Please post all new support queries in our New Forum
Jump to forum