Skip to content

Commit 310fe28

Browse files
committed
toggle search bar for small screen sizes
1 parent a433845 commit 310fe28

3 files changed

Lines changed: 255 additions & 153 deletions

File tree

web-components/nav-header/nav-header.css

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,12 @@ a h5 {
3232
}
3333

3434
form {
35-
width: 100%;
3635
height: 3em;
3736
background-color: white;
3837
display: flex;
39-
padding-right: 0.2em;
4038
}
4139

4240
form div {
43-
width: 100%;
4441
background-color: white;
4542
display: flex;
4643
flex-flow: row nowrap;
@@ -89,7 +86,6 @@ input {
8986
.navigation {
9087
display: flex;
9188
flex-flow: row nowrap;
92-
width: 40%;
9389
}
9490

9591
#search-icon {
@@ -237,8 +233,36 @@ input {
237233
z-index: 3000;
238234
}
239235

236+
.search-bar-open {
237+
width: 100%;
238+
}
239+
240+
/* 425px and below screen sizes */
240241
@media screen and (max-width: 27em) {
241242
.logo h4 {
242243
font-size: 1em;
243244
}
244245
}
246+
247+
/* 768px and below screen sizes */
248+
@media screen and (max-width: 48em) {
249+
#search-input {
250+
display: none;
251+
}
252+
}
253+
254+
/* 1024px and above screen sizes */
255+
@media screen and (min-width: 64em) {
256+
.navigation {
257+
width: 40%;
258+
}
259+
260+
form {
261+
width: 100%;
262+
padding-right: 0.2em;
263+
}
264+
265+
form div {
266+
width: 100%;
267+
}
268+
}

web-components/nav-header/nav-header.html

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,46 @@
11
<link href="web-components/nav-header/nav-header.css" rel="stylesheet" />
22
<link
33
href="jekyll-tipue-search/assets/tipuesearch/css/tipuesearch-component.css"
4-
rel="stylesheet" />
4+
rel="stylesheet"
5+
/>
56
<link
67
rel="stylesheet"
7-
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
8+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
9+
/>
810
<header>
911
<a class="skip-link" href="#content">Skip to content</a>
1012
<nav aria-label="masthead">
1113
<section class="masthead">
1214
<a href="index.html" class="logo">
1315
<img src="wp-content/IMS_logo_small.png" alt="IMS logo" />
14-
<h4>IBM <b>IMS Central</b></h4>
16+
<h4 class="site-header" style="display: block">
17+
IBM <b>IMS Central</b>
18+
</h4>
1519
</a>
1620
<div class="navigation">
1721
<form id="search-form">
1822
<div class="search-bar">
1923
<img
2024
src="wp-content/icons/icon_search.svg"
2125
id="search-icon"
22-
alt="search" />
26+
alt="search"
27+
/>
2328
<input
2429
id="search-input"
2530
name="search"
2631
type="text"
2732
pattern=".{3,}"
2833
placeholder="What are you looking for today?"
2934
autofocus
30-
autocomplete="off" />
35+
autocomplete="off"
36+
/>
3137
<img
3238
src="wp-content/icons/icon_close.svg"
3339
id="clear-icon"
3440
role="button"
3541
alt="clear"
36-
tabindex="0" />
42+
tabindex="0"
43+
/>
3744
</div>
3845
</form>
3946
<div id="search-results"></div>
@@ -42,12 +49,14 @@ <h4>IBM <b>IMS Central</b></h4>
4249
type="checkbox"
4350
id="menu-toggle"
4451
tabindex="-1"
45-
aria-label="menu toggle" />
52+
aria-label="menu toggle"
53+
/>
4654
<a
4755
class="hamburger-menu"
4856
role="button"
4957
tabindex="0"
50-
aria-label="menu button">
58+
aria-label="menu button"
59+
>
5160
<div></div>
5261
<div></div>
5362
<div></div>
@@ -84,13 +93,15 @@ <h5>IMS repos on GitHub</h5>
8493
href="https://www.ibm.com/products/ims"
8594
tabindex="-1"
8695
rel="noopener noreferrer"
87-
target="_blank">
96+
target="_blank"
97+
>
8898
<h5>
8999
IMS product page
90100
<img
91101
src="wp-content/Icon07.png"
92102
alt="External link"
93-
class="external-link" />
103+
class="external-link"
104+
/>
94105
</h5>
95106
<p>Learn about the latest IMS features and offerings.</p>
96107
</a>
@@ -137,13 +148,15 @@ <h5>IMS Gold</h5>
137148
href="https://community.ibm.com/community/user/groupz?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560"
138149
tabindex="-1"
139150
rel="noopener noreferrer"
140-
target="_blank">
151+
target="_blank"
152+
>
141153
<h5>
142154
IMS Community
143155
<img
144156
src="wp-content/Icon07.png"
145157
alt="External link"
146-
class="external-link" />
158+
class="external-link"
159+
/>
147160
</h5>
148161
<p>
149162
See the latest IMS blogs, engage in IMS forums, and more by
@@ -168,17 +181,17 @@ <h5>IMS Customer Internship</h5>
168181
href="https://community.ibm.com/community/user/blogs/daleah-sampler/2025/09/09/ims-developer-community"
169182
tabindex="-1"
170183
rel="noopener noreferrer"
171-
target="_blank">
184+
target="_blank"
185+
>
172186
<h5>
173187
IMS Developer Community
174188
<img
175189
src="wp-content/Icon07.png"
176190
alt="External link"
177-
class="external-link" />
191+
class="external-link"
192+
/>
178193
</h5>
179-
<p>
180-
A place to connect with other IMS developers.
181-
</p>
194+
<p>A place to connect with other IMS developers.</p>
182195
</a>
183196
</div>
184197
<div>

0 commit comments

Comments
 (0)