bootstrapでハンバーガーメニューの中に入れたくないリンクがある

bootstrapでヘッダーを作成中です
ヘッダーの左端にトップページへのリンク、右端に三つのリンクを作成し
画面幅が小さくなると右端のリンクがハンバーガーメニューに折りたたまれるというものを作りました

html
1<nav class="navbar navbar-default navbar-fixed-top">
2  <div class="container-fluid">
3    <div class="navbar-header">
4      <a href="#" id="logo">TOP</a>
5      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
6        <span class="sr-only">メニュー</span>
7        <span class="icon-bar"></span>
8        <span class="icon-bar"></span>
9        <span class="icon-bar"></span>
10      </button>
11    </div>
12    <div id="gnavi" class="collapse navbar-collapse">
13      <ul class="nav navbar-nav navbar-right">
14        <a href="#" id="logo">検索</a>
15        <a href="#" id="logo">このサイトについて</a>
16        <a href="#" id="logo">ヘルプ</a>
17      </ul>
18    </div>
19  </div>
20</nav>

css
1.navbar-default {
2  background-color: #e0edf9;
3  #logo {
4    font-size: 20px;
5    font-weight: 400;
6    margin-top: 9px;
7    margin-left: 7px;
8    display: inline-block;
9    color: #0c3370;
10    text-decoration: none;
11  }
12  #gnavi a {
13    color: #0c3370;
14    text-decoration: none;
15    &:hover {
16      background-color: #8fb2e8;
17    }
18  } 
19}
20
21.navbar-default .navbar-toggle,
22.navbar-default .navbar-toggle:focus,
23.navbar-default .navbar-toggle:hover {
24background-color: #ffffff;
25}

しかし、三つのリンクのリンクのうち一番上にある検索のリンクを
ハンバーガーメニューの中に入れない　かつ
そのリンクをハンバーガーメニューの左横に置きたいと考えました

どのようにすればうまくいくでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

的外れかもしれませんが、以下のようにしてみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
6    <title>タイトル</title>
7    <style type="text/css">
8        .search1 {
9            font-size: 14px;
10        }
11
12        @media (min-width: 768px) {
13            .search1 {
14                display: none;
15            }
16        }
17
18        @media (max-width: 767px) {
19            .search2 {
20                display: none !important;
21            }
22        }
23
24        .navbar-default {
25            background-color: #e0edf9;
26        }
27
28        .navbar-default .logo {
29            font-size: 20px;
30            font-weight: 400;
31            margin-top: 9px;
32            margin-left: 7px;
33            text-decoration: none;
34            /* display: inline-block; */
35            color: #0c3370;
36        }
37
38        .navbar-default #gnavi a {
39            text-decoration: none;
40            color: #0c3370;
41        }
42
43        .navbar-default #gnavi a:hover,
44        .search1:hover {
45            color: #0c3370 !important;
46            background-color: #8fb2e8 !important;
47        }
48
49        .navbar-default .navbar-toggle,
50        .navbar-default .navbar-toggle:focus,
51        .navbar-default .navbar-toggle:hover {
52            background-color: #fff;
53        }
54    </style>
55</head>
56<body>
57<nav class="navbar navbar-default navbar-fixed-top">
58    <div class="container-fluid">
59        <div class="navbar-header">
60            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
61                <span class="sr-only">メニュー</span>
62                <span class="icon-bar"></span>
63                <span class="icon-bar"></span>
64                <span class="icon-bar"></span>
65            </button>
66            <a class="navbar-brand logo" href="#">TOP</a>
67            <a class="navbar-brand pull-right logo search1" href="#">
68                検索
69            </a>
70        </div>
71        <div class="collapse navbar-collapse" id="gnavi">
72            <ul class="nav navbar-nav navbar-right">
73                <li class="search2">
74                    <a href="#" class="logo">検索</a>
75                </li>
76                <li>
77                    <a href="#" class="logo">このサイトについて</a>
78                </li>
79                <li>
80                    <a href="#" class="logo">ヘルプ</a>
81                </li>
82            </ul>
83        </div>
84    </div>
85</nav>
86<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
87<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
88</body>
89</html>