Joomla Templates Club 406,261 posts

[mrscolumbo Friend mrscolumboJoin date: May 2008Posts: 25Downloads:11Uploads:4 Thanks: 11 Thanked: 2 times in 1 posts]

#200393

Hi,

I’d love to move the Search Module to the very top into the head (aligned right).

The cream on top would be if I could make this interactive like in JA_PLAYMAG, with a text input row created below when clicked …

I assume I have to create a custom position in the head row. Could someone kindly point me in the right direction?

The reason for this is:

Here’s the page: http://www.mrscolumbo.com/ags

I have a custom logo that’s quite “large”, so I had to move the search module up from the main nav and pull main nav to the right using a custom.css to avoid overlapping of main nav and logo:

@media (min-width:981px){

.logo-image .logo-img{
max-height:66px !important;
float:left;
margin-left:-60px;
}

.t3-mainnav .container{

height: 125px;

}

.t3-mainnav .t3-navbar{
margin-top: 43px;
margin-right:-20px;

}

.head-search {
margin-top: -10px !important;
}

}

It’s a very “dirty solution”. What I’m trying to do is:

– pull the main nav to the absolute right. “float:right” doesn’t work, there’s still about 100px to go. Negative margin-right pulls the dropdown menus out of the main container wchich looks sh***
– Put the search module into the top head (where the social buttons are), aligned to the absolute right.
– Align the logo to the absolute left, so I can have logo and main nav “aligned” to each other vertically.

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

#545429

It’s very hard to suggest the solution to you if you are a non-developer. Below are steps for search module in JA Playmag template, hope you can apply it in JA Biz template

+ Open templates/ja_biz/tpls/blocks/header.php file

Change

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

To

<!-- HEAD SEARCH -->
<?php if ($this->countModules('search')) : ?>
<div class="dropdown nav-search pull-right <?php $this->_c('search') ?>">
<a data-toggle="dropdown" href="#" class="dropdown-toggle">
<i class="fa fa-search"></i>
</a>
<div class="nav-child dropdown-menu">
<div class="dropdown-menu-inner">
<jdoc:include type="modules" name="<?php $this->_p('search') ?>" style="T3Xhtml" />
</div>
</div>
</div>
<?php endif ?>
<!-- //HEAD SEARCH -->

+ Go Admin site -> Module Manager -> change Search module from head-search position to search position

+ Create templates/ja_biz/css/custom.css file and add new css style


.t3-mainnav .nav-search {
position: static;
transition: 500ms;
}
.t3-mainnav .nav-search .nav-child {
border: 0;
display: block;
height: 0;
padding: 0;
margin-top: -100px;
overflow: hidden;
top: 150px;
transition: 500ms;
}
.t3-mainnav .nav-search .nav-child .dropdown-menu-inner {
padding: 30px;
}
.t3-mainnav .nav-search .nav-child .form-search {
position: relative;
}
.t3-mainnav .nav-search .nav-child .form-search:after {
position: absolute;
content: "f002";
font-family: FontAwesome;
top: 25%;
right: 10px;
}
.t3-mainnav .nav-search .nav-child .form-search:focus:after {
color: #dc1e25
}
.t3-mainnav .nav-search .nav-child input {
width: 100%;
border: 0;
}
.t3-mainnav .nav-search .nav-child input:focus {
color: #000000
}
.t3-mainnav .nav-search.open {
margin-bottom: 100px;
}
.t3-mainnav .nav-search.open .fa-search:before {
content: "x";
display: block;
font-family: 'Roboto', sans-serif;
font-size: 17px;
height: 14px;
text-align: center;
width: 13px;
}
.t3-mainnav .nav-search.open .nav-child {
height: 100px;
top: 150px;
}
.scrollUp .t3-mainnav .nav-search.open .nav-child {
border-color: rgba(255, 255, 255, 0.2);
border-style: solid;
border-width: 1px 0 1px 0;
}

+ And add and make changes the js script below in templates/ja_biz/js/script.js file to work with JA Biz template


(function($){
$(document).ready(function(){
// Fix width of search alway 100%
if($('.nav-search').length > 0){
if($('.nav-search').find('.nav-child.dropdown-menu').length > 0){
$('.nav-search').find('.nav-child.dropdown-menu').css('width',$('#t3-header').find('.container').width() + parseInt($('#t3-header').find('.container').css('padding-left'))+parseInt($('#t3-header').find('.container').css('padding-right')));
}
$(window).bind('orientationchange resize',function(){
if($('.nav-search').find('.nav-child.dropdown-menu').length > 0){
$('.nav-search').find('.nav-child.dropdown-menu').css('width',$('#t3-header').find('.container').width() + parseInt($('#t3-header').find('.container').css('padding-left'))+parseInt($('#t3-header').find('.container').css('padding-right')));
}
});
}
});
})(jQuery);


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

1. mrscolumbo

[mrscolumbo Friend mrscolumboJoin date: May 2008Posts: 25Downloads:11Uploads:4 Thanks: 11 Thanked: 2 times in 1 posts]

#546534

Thank you indeed for your very detailed answer!! I will delve into this – cool that people still take time to answer questions to more than rudimentary extent!

[Author]

Posts