Search Box for Mobile View

[Support]

craigphz:
Hi again 🙂 For mobile view, I’d like to include either a search button, next to the 3-line menu button, or a search box within the menu itself, as I’ve seen on some sites. How would this be done with Porto? Thanks!

---

[Support]

Hello,

You can add a search box on the navigation:

HTML:

<li class="visible-xs visible-sm">
	<div class="search-mobile">
		<form id="searchForm" action="page-search-results.html" method="get">
			<div class="input-group">
				<input type="text" class="form-control search" name="q" id="q" placeholder="Search...">
				<span class="input-group-btn">
					<button class="btn btn-default" type="submit"><i class="icon icon-search"></i></button>
				</span>
			</div>
		</form>
	</div>
</li>

CSS: (css/custom.css):

.search-mobile {
	padding-bottom: 25px;
}

.search-mobile .btn {
	padding: 12px 17px;
}

Result:

---

[Support]

Hello, those classes are actually from Bootstrap, it’s all about the resolution, as you can see here:

Could you please send me a screenshot of the 3-line menu as you’re seeing it? I couldn’t find any problem on that.

Thanks 🙂

---

[Support]

Hello, yes, Porto menu has been tested and we’re not aware of any issues, so please if you find any problem, send us a screenshot so we can make a few more tests. 🙂

Thanks.

---

[Author]

Posts