How to display search bar next to collapsed menu icon on mobile screen

andrewwinkler

I need help with displaying the joomla search module on the mobile screen. Ideally, I would like it to be displayed in the same row as the collapsed menu icon. If necessary, I'd be happy for the that menu icon in the same row as the logo, preferably on its left.

Ninja

andrewwinkler
Hi
The search module position is present in the header of website. A module position can not change it place to a different block in any layout, It always remain on the same place.
To make it in same row it will also change the PC position view.
You can show it next to the logo in mobile screen as its part of the header. To show it navigate to file "/tpls/blocks/header.php" in template "ja_autoshop".
Find and remove hidden-xs http://prntscr.com/10aximj

andrewwinkler

Sorry, but I have difficulties understanding what you are suggesting to do to make the search module visible on the mobile screen. It sounds like you are saying I need to change the code in the template. What I'm not clear about which file, line and code to change and how.

Ninja

andrewwinkler
Hi
About show the search module you only need to apply the step i shared and remove the hidden-xs. The other option is not easy to give as it custom work and needs time and efforts to make it as you required to get it in both views.

andrewwinkler

I removed the string "hidden-xs" in the header block code. The search bar is now visible, but way too long. What's the best way of shortening the search bar for the mobile screen only?

I've used the following code to shorten the search bar:

@media (max-width: 576px) {
div.mod_search35 input[type="search"] {
	margin-left: -12px;
	width: 205px !important;}
}

but that didn't prevent the search icon button from breaking into the next line.

Ninja

andrewwinkler
Hi
As there is no space to fit all 3 items it will move to next. Either you have to decrease the logo width and also search box width. Mobile scree width is very small you can not fit too much content in 1 line.

andrewwinkler

I realise the limited space problem on the mobile screen. However, no matter how small I make the search form, the search icon remains in the line below. I wonder how I can fix that?

The line breaks even after defining a "small logo".

P.S.: Is there a way to display the "shop by categories" module in the same line, next to the collapsed menu icon?

Ninja

andrewwinkler
Hi
Add this code in custom.css file to move it in line


@media (max-width: 576px) {
div.mod_search35 input[type="search"] {
	margin-left: -12px;
	width: 105px !important;}
	.form-inline.form-search {

    display: flex;
}
}

http://prntscr.com/10bw6h8

Regards

andrewwinkler

Now the mobile menu icon has disappeared.

Ninja

andrewwinkler
Kindly clear browser cache and check : http://prntscr.com/10c3cw9
Its normal and showing fine

andrewwinkler

Sorry, I was hoping to move the "shop by categories" module to the right of the collapsed menu icon, in the same row. And I still need to decrease the gap between to the small logo on the mobile screen and the adjacent search module so that the search icon no longer breaks into the next line.

Ninja

andrewwinkler
Hi
This is no related to topic question search, for new different topic request kindly make a different topic.
It also helps community members to get resolution on the same topic requests.

Regards