Moving the search magnifying glass icon

HTML & CSS
1

In the code below, the magnifying glass, which I believe is the <svg line of code, appears above the search field box, in the mobile view. And by appearing above it, it pushes the search field box down too much. Is there a way to place the mag glass icon to the left of the search field box, like on the same line horizontally? Or add it inside the search field box, to the left of the words that appear in the field box “Search for videos”. Any help will be appreciated.

<nav class="navbar navbar-findcond navbar-fixed-top header-layout hidden search-bar" style="margin-top: 49px;">
    <div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">

		<div class="navbar-header">
		<form class="search-header-mobile" role="search" action="{{LINK search}}" method="GET" id="search-form">
                <div class="form-group">

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search" onclick="javascript:$('.search-header input').focus();"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>

<input type="text" class="form-control" id="search-bar-mobile" name="keyword" placeholder="{{LANG search_keyword}}" autocomplete="off" value="{{SEARCH_KEYWORD}}">

                                        <select class="form-control" name="category_id" id="category_id">
		<?php foreach($categories as $key => $category) { ?>
		<option value="<?php echo $key; ?>" <?php echo  ($_GET['category_id'] == $key ? 'selected' :' ')?> ><?php echo $category ;?> </option>
		<?php }?>
		</select>
		 <?php
		   if (!empty($_GET['is_channel'])) {
		?>
		 <input type="hidden" name="is_channel" value="true">
                    <?php } ?>
                </div>
                    <div class="search-dropdown hidden"></div>
            </form>
	</div>
	</div>
</nav>
2

That is exactly how it will display with the code you posted.

1 Like
3

Thank you for your reply.
On my mobile view, it is on the left side of the screen, but it appears to be above the search field box. Any help with Is there a way to place the mag glass icon horizontally on the left of the search field box, or add it inside the search field box, to the left of the words that appear in the field box “Search for videos”, will be welcomed

4

That’s what Sam is talking about!

The code you posted is not enough for us to reproduce the problem your seeing.

Nothing in the code you posted says “Search for videos”. :no_mouth:

Though you can keep your inline elements from wrapping with white-space: nowrap;
Whether it will work in your page without causing an overflow is unknown to me.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

svg {
  margin: 0 .25em 0 0;
  vertical-align: bottom;
}
.form-group {
  white-space: nowrap;
  outline:1px solid red;
  padding:5px;
}
</style>

</head>
<body>

<nav class="navbar navbar-findcond navbar-fixed-top header-layout hidden search-bar" style="margin-top: 49px;">
  <div class="container">
    <div class="navbar-header">
      <form class="search-header-mobile" role="search" action="{{LINK search}}" method="GET" id="search-form">
        <div class="form-group">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search" onclick="javascript:$('.search-header input').focus();"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
          <input type="text" class="form-control" id="search-bar-mobile" name="keyword" placeholder="{{LANG search_keyword}}" autocomplete="off" value="{{SEARCH_KEYWORD}}">
          <select class="form-control" name="category_id" id="category_id">
            <option value=""> ></option>
          </select>
          <input type="hidden" name="is_channel" value="true">
        </div>
        <div class="search-dropdown hidden"></div>
      </form>
    </div>
  </div>
</nav>

</body>
</html>
1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.