Help with mobile view

The video script that I’m using has a keyword search function and also displays videos by category.
I got help with modifying the search function so that keywords can be searched within categories, which works successfully.
The problem I’m trying to get help with is that the modification’s mobile view needs improvement.

As you can see in the image named desktopView, just as a reference, it shows the search field and the drop-down side by side, when viewing the site by pc.

In the image named mobileView1, it shows how the search field currently looks, where you simply select the magnifying glass to search, via a mobile device view.

The image named mobileView2, you can see what the search field looked like prior to the modification, after selecting the magnifying glass, via a mobile device view (it displays a white horizontal area with “Search for videos” inside of it).

The image named mobileMod-View shows currently what the mobile view looks like - after selecting the magnifying glass. It shows another magnifying glass (which I’d like to get help to remove) which might help move the “Search for videos” up. But I’d also like help with moving the drop-down horizontal (with the word “All” in it) to be above the video thumbnail (or side by side with the horizontal search field).

Here is the code below. I look forward to any help (without affecting the pc view)

<?php
$categories[0] = 'All';
foreach($pt->categories as $key => $category){
$categories[$key] = $category;
}
?>
<nav class="navbar navbar-findcond navbar-fixed-top header-layout">
    <div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">
        <div class="navbar-header pull-left">
            <a class="navbar-brand logo-img" href="{{LINK }}" itemprop="url"><img itemprop="logo" src="{{CONFIG theme_url}}/img/<?php echo ($pt->mode != 'night') ? 'logo' : 'logo-light';?>.png" alt="{{CONFIG title}}"></a>
            <form class="navbar-form navbar-left search-header" role="search" action="{{LINK search}}" method="GET" id="search-form">
                <div class="form-group">
                    <input type="text" class="form-control" id="search-bar" 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 } ?>
                    <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>
                </div>
                <div class="search-dropdown hidden"></div>
            </form>
        </div>
        <div class="pull-right">
            <ul class="nav navbar-nav navbar-right">
                <?php if ($pt->config->night_mode == 'both' || $pt->config->night_mode == 'night_default'): ?>
                <li class="toggle-mode hidden-xs pull-left top-header">
                    <label class="switch" data-toggle="tooltip" data-placement="bottom" title="{{LANG mode}}">
                        <input type="checkbox" {{MODE}} id="toggle-mode">
                        <span class="slider round">
                            <svg fill="#009da0" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-bulb"><path d="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" /></svg>
                        </span>
                    </label>
                </li>
                <?php endif; ?>
                <li class="show-in-mobile pull-left top-header">
                    <a href="#" class="search-icon"><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"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> </a>
                </li>
                <?php if (IS_LOGGED): ?>
                <li class="hide-from-mobile pull-left top-header">
                     <a href="{{LINK messages}}">
                           <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-message-square"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
                           <span id="new-messages"></span>
                    </a>
                </li>
                <li class="hide-from-mobile dropdown pull-left top-header">
                    <a href="javascript:void(0);"  id="get-notifications" class=" dropdown-toggle" data-toggle="dropdown">
                           <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-bell"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"></path></svg>
                           <span id="new-notifications"></span>
                    </a>
                    <ul class="dropdown-menu notfi-dropdown" id="notifications">
                        <li>
                            <h5>
                                <b id="all-notifications"></b> {{LANG notifications}}
                                <i class="fa fa-circle-o-notch spin hidden"></i>
                            </h5>
                        </li>
                        <li>
                            <ul id="notifications-list"></ul>
                        </li>
                    </ul>
                </li>
                <?php endif; ?>
                {{SIDE_HEADER}}
            </ul>
        </div>
    </div>
</nav>

<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>
<?php if ($pt->page != 'login') { ?>
<nav class="navbar navbar-findcond navbar-default second-header-layout">
    <div class="container <?php echo ($pt->page == 'watch') ? 'watch-container' : '';?>">
        <div class="navbar-inner" id="navbar">
            <ul class="nav navbar-nav">
                <li class="hide-from-mobile <?php echo ($pt->page == 'home') ? 'active': '';?>">
                    <a href="{{LINK }}"> {{LANG home}}</a>
                </li>
                <li class="hide-from-mobile <?php echo ($pt->page == 'latest') ? 'active': '';?>">
                    <a href="{{LINK videos/latest}}">{{LANG latest_videos}}</a>
                </li>
                <li class="hide-from-mobile <?php echo ($pt->page == 'top') ? 'active': '';?>">
                    <a href="{{LINK videos/top}}">{{LANG top_videos}}</a>
                </li>
                <li class="hide-from-mobile <?php echo ($pt->page == 'trending') ? 'active': '';?>">
                    <a href="{{LINK videos/trending}}">{{LANG trending}}</a>
                </li>
                <li class="dropdown hide-from-mobile <?php echo ($pt->page == 'category') ? 'active': '';?>">
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{LANG categories}} <span class="caret"></span></a>
                   <ul class="dropdown-menu categories-drop-down" role="menu">
                    <?php foreach($pt->categories as $key => $category) {
                        if (1) { ?>
                        <li class="hide-from-mobile">
                           <a class="category" href="{{LINK videos/category/<?php echo $key?>}}"><?php echo $category?></a>
                        </li>
                    <?php } }?>
                   </ul>
                </li>
                <?php if ($pt->config->article_system == 'on'): ?>
                <li class="hide-from-mobile <?php echo ($pt->page == 'articles') ? 'active': '';?>">
                   <a href="{{LINK articles}}">{{LANG articles}}</a>
                </li>
                <?php endif ?>
            </ul>

            <ul class="nav navbar-nav pull-right">
                <?php if ($pt->config->upload_system == 'on') { ?>
                <li class="hide-from-mobile">
                    <a href="{{LINK upload-video}}" class="btn upload-button">
                        <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-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
                        <span class="hide-in-mobile">{{LANG upload}}</span>
                    </a>
                </li>
                <?php } ?>
                <?php if ($pt->config->import_system == 'on') { ?>
                <li class="hide-from-mobile">
                    <a href="{{LINK import-video}}" class="btn import-button">
                        <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-download-cloud"><polyline points="8 17 12 21 16 17"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"></path></svg>
                        <span class="hide-in-mobile">{{LANG import}}</span>
                    </a>
                </li>
                <?php } ?>
            </ul>

        </div>
    </div>
</nav>
<?php } ?>

<?php if (IS_LOGGED): ?>
<script>
    jQuery(document).ready(function($) {
        pt_get_notifications({type:'new'});

        $("#get-notifications").click(function(event) {
            if ($('#notifications').css('display') == 'none') {
                var notfi_cont = $("ul.notfi-dropdown");

                if ($("span#new-notifications").html() != '') {
                    $(this).find('span#new-notifications').empty();
                }

                pt_get_notifications({sa:1});
            }
        });

        setInterval(function(){
            pt_get_notifications({type:'new'});
        }, 6000);
    });

    function pt_get_notifications(args){
        if (!args) {
            args = {};
        }
        var notfi_cont = $("ul.notfi-dropdown");
        var notfi_set  = $("ul#notifications");

        defparams = {
            type: false,
            sa:false
        }

        options = Object.assign(defparams,args);
        data    = {'hash':$('.main_session').val()};

        if (options['type']) {
            data['t'] = options['type'];
        }

        if (options['sa']) {
            data['sa'] = options['sa'];
            notfi_set.find('i.spin').removeClass('hidden');
        }

        $.ajax({
            url: '{{LINK aj/get_notifications}}',
            type: 'GET',
            dataType: 'json',
            data:data
        })
        .done(function(data) {
            if (data.status == 200) {
                if (data.new) {
                    $("span#new-notifications").html($('<b>',{
                        text:data.new
                    }));
                }
                else{
                    notfi_set.find('b').text(data.len);
                    notfi_set.find('ul').html(data.html);
                }
            }
            else if(data.status == 304 && options['sa']){
                notfi_set.find('ul').html($("<li>",{
                    class:'no-notifications',
                    text: "{{LANG no_notifications}}"
                }));
            }

            if (data.count_messages > 0) {
                $('#new-messages').html('<b>' + data.count_messages + '</b>');
            } else {
                $('#new-messages').html('');
            }

            if (options['sa']) {notfi_set.find('i.spin').addClass('hidden');}

        })
        .fail(function() {
            console.log("error");
        });
    }
</script>
<?php endif ?>

<script>



$('.search-icon').on('click', function(event) {
    event.preventDefault();
    $('.search-bar').toggleClass('hidden');
});
$('#search-bar').keyup(function(event) {
    var search_value = $(this).val();
    var search_dropdown = $('.search-dropdown');
    if (search_value == '') {
        search_dropdown.addClass('hidden');
        search_dropdown.empty();
        return false;
    } else {
        search_dropdown.removeClass('hidden');
    }
    $.post('{{LINK aj/search}}', {search_value: search_value}, function(data, textStatus, xhr) {
        if (data.status == 200) {
            search_dropdown.html(data.html);
        } else {
           search_dropdown.addClass('hidden');
           search_dropdown.empty();
           return false;
        }
    });
});
$('#category_id').change(function(){
    $('#search-form').submit();
});
</script>

HTML:

 

Ah, bootcrap, if ever there was a train wreck laundry list of how NOT to build a website, look now further. Here's a tip, if a HTML/CSS framework is using JavaScript for the show/hide of a mobile behavior, or is telling you to write the same heading area twice in the markup -- once for mobile, once for desktop -- it's 100% ineptly developed bullshit created by people who have ZERO blasted business telling you how to build a website.

Endless pointless DIV for nothing, pointless NAV tags, writing the same basic thing twice because "hurr durrs, wees dunno howz two CSS", broken to non-existent sematnics -- hardly a shock you're likely wasting 11k of markup to do 2k's flipping job! If the rest of your page is as banjaxed, I'd suggest pitching it in the trash and starting over.

Particularly when even something as simple as "FFS placeholder is NOT a LABEL" is in there crapping on usability and accessibility. Would also be a billion times easier if you didn't have that handlebar style crap in there.

Using modern techniques -- aka anything less than 8 years old in terms of using (abusing?) inputs to handle your toggle states, and anything newer than 1997 in terms of the semantics, there is NO legitimate reason for what you posted to be using much more markup than this:

<input type="checkbox" id="toggle_nightDay"<?=
	$logicForIfNightOrDay ? ' checked' : ''
?> class="toggle" hidden>
<!-- the above input should be right after <body> -->

<div id="top">
	<h1><a href="/">TUBE</a></h1>
	<label for="toggle_nightDay"></label>
	<input type="checkbox" id="toggle_search" class="toggle" hidden>
	<label for="toggle_search"></label>
	<input type="checkbox" id="toggle_categoryMenu" class="toggle" hidden>
	<label for="toggle_categoryMenu"></label>
	<form action="{{LINK search }}" method="get" id="search">
		<fieldset>
			<input type="text" name="keyword" id="search_keyword" required>
			<label for="search_keyword">{{SEARCH_KEYWORD}}</label>
			<select name="category" id="search_category">
			<?php
				foreach ($categories as $key->categories} echo '
					<option value=', $key, '"', (
						(
							array_key_exists('category_id', $_GET) &&
							$_GET['category_id'] == $key
						) ? ' selected' : ''
					), '>', $category, '</option>';
			?>
			</select>
			<label for="search_category">Category</label>
			<input type="hidden" name="is_channel" value="true">
			<button>Go</button>
		</fieldset>
	</form>
	<ul id="categoryMenu">
		<li<?=
			$pt->page == 'home' ? ' class="current"': ''
		?>><a href="{{LINK }}">{{LANG home}}</a></li>
		<li<?=
			$pt->page == 'latest' ? 'class="current" : ''
		?>><a href="{{LINK videos/latest}}">{{LANG latest_videos}}</a></li>
		<li<?=
			($pt->page == 'top') ? 'class="current" : ''
		?>><a href="{{LINK videos/top}}">{{LANG top_videos}}</a></li>
		<li<?=
			($pt->page == 'trending') ? 'class="current" : ''
		?>><a href="{{LINK videos/trending}}">{{LANG trending}}</a></li>
		<li class="dropdown<?=
			$pt->page == 'category' ? 'class="current" : ''
		?>>
			<input type="checkbox" id="toggle_menuCategories" class="toggle">
			<label for="toggle_menuCategories">{{LANG categories}}</label>
			<ul>
			<?php
				foreach ($pt->categories as $key => $category) echo '
					<li class="hide-from-mobile">
						<a href="{{LINK videos/category/', $key, '">', $category, '</a>
					</li>';
			?>
			</ul>
		</li>
		<?php
			/* not sure what handlebar style crap you're using, might not work here */
			if ($pt->config->article_system == 'on') echo '
				<li', $pt->page == 'articles' ? ' class="current" : '', '>
					 <a href="{{LINK articles}}">{{LANG articles}}</a>
				</li>';
		?>
	</ul>
<!-- #top --></div>

Code (markup):

Nearly a sixth the code you are using. That's how mind-numbingly stupid that bootcrap idiocy you've been sucked into using is.

Hence your problems run far deeper than just your "moble" appareance, and if you brought that template to me as a client, I'd tell you to pitch it in the trash and start over. Without the frameworks, without the static images derped into the markup, and WITH proper separation of presentation from content, leveraging semantics, and letting CSS do your heavy lifting for mobile behaviors.