Header-Right Search module disappears on smaller resolution

Hello, I've added a search bar on top of the header-right position.

Homepage: http://gator4199.hostgator.com/~lgt2015/

The problem is that this search module disappears on smaller resolution. I would like to keep it all the time.

Thank you,
Regards

This search bar module on the frontpage should be the same width as the header-right. It's a bit smaller and I don't understand why.
It should be 285 px.

Thank you

Hi

Please try add this code to small.tablet.css

Code: Select all

#gkHeaderModules {
    position: relative !important;
}


I think it's a browser issue, it seems to work in firefox but not in chrome.

There is another issue that is not addressed in your last post which is :

this search module disappears on smaller resolution. I would like to keep it all the time.

Thank you.

P.S.: I have noticed that the response seems to be slower and less committed lately on this forum. I was hoping to get the same quality support as I had with you back in December for the John S. Template. Regards

Hi

I would love to answer faster, but I'm taking care of more threads per day now than before.

Add this code to override.css

Code: Select all

@media only screen and (max-width:640px) {
#gkHeaderLeft, #gkHeaderRight {
    display: block !important;
}

#gkHeaderLeft {
    float: left;
    height: auto;
    width: 50%;
}

#gkHeaderRight {
    float: right;
    position: relative;
    right: 10px !important;
}

#gkBreadcrumb {
    margin: 0 !important;
}
}



Hi teitbite, I got the following code that I've tweaked from yours. It works fairly well but under 840px width the search bar leaves the display along with the #gkHeaderRight.

Maybe the class for the search bar is not #k2SearchBlockform ?

Code: Select all

@media only screen and (min-width:640px) and (max-width: 840px) {

#k2SearchBlockform {
    display: block !important;
}

#gkHeaderRight {
    display: none;
}

#gkHeaderLeft {
    display: block !important;
    width: 100%;
}
}



Regards

It seems to be related to another CSS in another file for smaller devices.

If you do test at another pages, you will see that the search bar disapears at the same time with the inset module under 840px.

http://gator4199.hostgator.com/~lgt2015 ... eggie-caps

Just my 2 cents...
Regards

Hi

It's the piece of the code You have mentioned in Your previous post making search dissapear. Just remove that and everything should be fine. I mean this part:

Code: Select all

#gkHeaderRight {
    display: none;
}


I did as you instructed removing the following code, but the search bar disapears with the HeaderRight under 640px.

Code: Select all

/*
#gkHeaderRight {
    display: none;
}

*/


Regards

Hi Teitbite,

Wouldn't it be better to put the search bar at another template position avoiding CSS conflicts with the HeaderRight all together?
Is there a position for the search bar on this template?

Thank you
Regards

Hi

And now add this to mobile.css:

Code: Select all

#gkHeaderModules {
    position: relative;
}

#gkHeaderRight {
    bottom: auto;
    display: block;
    position: relative;
    right: auto !important;
    width: 100%;
}




It works, brilliant!

Have a great weekend Teitbite.
Regards

Hello Teitbite, I did more tests for the search bar, the position is great.

The only problem is the max-width of the search bar is not the same as the box.transparent once it's at lower resolution under the header. It comes to a point that if you streach the width resolution of the browser, for example going landscape orientation on a mobile device, the search will now follow the box.transparent module.

See screenshot in attachment for a better understanding.

Regards.

Hi

Try to add this to override.css

Code: Select all

#k2ModuleBox788 input.inputbox { width: 100%; }


Yes! It worked! Thank you Teitbite!

Regards

I still have 3 new problems with the search bar:

I wanted to put the search bar higher so I've pull up the TopNavigation a bit. With the following code:

Code: Select all

Template.css:20

#gkHeaderNav {
padding: 20px 0 0 0;
}

Note: I must have adjusted the margin of the search module too to pull it up further.



1. The search bar will not be writable on subpages, this might be as a result of this modification I did. We cannot type any characters in the search bar on subpages, like it's under something. I tried with chrome and firefox; the input window seems to be very narrow and mostly at the bottom half of the box when hovering with the mouse.

2. If a search with no results is returned, the Footer will be pulled up too into the mainbody, along with the footer menu.

http://www.mauzaza.com/component/k2/sea ... ategories=


3. The search bar module will not appear on Search Results pages.

Site link: http://www.mauzaza.com

Thank you,
Regards

Hi

1. Add to css:

Code: Select all

#gkHeaderNav {
    height: 50px;
}


2. Add this to css:

Code: Select all

#gkBg {
    min-height: 512px;
}


3. Check if search module is set to show on ALL PAGES

Hi Teitbite, thank you for your time.

1 & 2 are solved!

3. Search module is enabled on all pages but the problem persist. It will occur only on a path starting from the homepage, joomla article like "about-us" or from the "cart checkout". Not from a K2 category or an Item page.

Regards.

Hi

3. Search was set to "selected only" pages. I've change it to all.

Thank you Teitbite. I forgot about that catch all option for modules ALL PAGES in joomla 3.

Regards

Hi

No problem. Glad I could help