Creating 2 different links depending on screen size

This might be a silly question, but I can't seem to find a solution.

I'm creating a site that is also mobile friendly, I'm using bootstrap and laravel.

It has a menu that has a dropdown called "products". If you hover over it, the dropdown will be displayed and the "products" menu will be clickable and takes you to a page with all the product categories.

In order for me to be able to use the hover I removed data-toggle="dropdown" from the dropdown and created a hover function in my js file. The data-toggle="dropdown" allows me to click on "products" without having to go to the product page.

Now the problem I'm having is that when I go to mobile and i press on "products" I go to the product page instead of the dropdown showing.

I was thinking of doing something like this or adding data-toggle="dropdown" via jquery to the link depending on the window size.

@if(window = 700px)
    <a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
@else
    <a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
@endif

Obviously this doesn't work so I would like to know how I would be able to do something like that. I've looked on the net and I haven't come across anything. Regarding the one for jquery I'm not sure how I would add the data-toggle="dropdown" when the window hits the 700px mark.

My menu

<nav class="navbar navbar-default main_menu_wrapper">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="{!! url('/') !!}" class="navbar-brand">
                <img src="{!! asset("img/logo.jpg") !!}">
            </a>
        </div>

        <div class="collapse navbar-collapse menu_wrapper" id="main_menu">
            <form action="{!! route('search') !!}" method="POST" role="search" class="navbar-form navbar-right search">
                
                <div class="form-group">
                    <input type="text" class="form-control" name="search" placeholder="Search...">
                </div>
                <button type="submit" class="btn btn-default">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>

            <ul class="nav navbar-nav navbar-right">
                @foreach($menus_child as $grandfather)
                    @if($grandfather->menu_id)
                        <li>
                    @elseif($grandfather->title == 'Home')
                        <li class="parent {!! menu_active($grandfather->id) !!}">
                    @elseif(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
                        <li class="dropdown {!! menu_active($grandfather->id) !!}">
                    @else
                        <li class="parent {!! menu_active($grandfather->id) !!}">
                    @endif

                    @if(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
                        <a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
                            {!! $grandfather->title !!} <span class="caret"></span>
                        </a>
                    @else
                        {!! Html::link(getSeoLink($grandfather->id), $grandfather->title) !!}
                    @endif

                    @if(count($grandfather->menusP))
                        <ul class="dropdown-menu">
                            @foreach($grandfather->menusP as $father)
                                @if($father->menu_id)
                                    <li class="parent_child">
                                @else
                                    <li>
                                @endif

                                {!! Html::link(getSeoLink($father->id), $father->title) !!}
                            @endforeach
                        </ul>
                    @endif
                @endforeach
            </ul>
        </div>
    </div>
</nav>

my js that allows a hover

$('ul.navbar-nav li').hover(
    function () {
        $(this).find('> ul').show();
    },
    function () {
        $(this).find('> ul').hide();
    }
);

I hope I made sense. If there is anything else that I might have forgotten to add please let me know.

via Chebli Mohamed