Skip to content

Commit c04640e

Browse files
aescleveraesclever
committed
modified: public/README.md
 modified: views/partials/header.ejs for responsive display
1 parent 5d4acdc commit c04640e

File tree

2 files changed

+52
-70
lines changed

2 files changed

+52
-70
lines changed

‎public/README.md‎

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -126,17 +126,37 @@ Partial files are pieces of reusable code segment that typically appear again an
126126
3. Create partial file `header.ejs`
127127
```c
128128
<!-- This code contains navigation for an HTML document and uses several classes from Bootstrap for styling. -->
129-
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #e3f2fd;">
130-
<a class="navbar-brand" href="/">TechRolEmi</a>
131-
<ul class="navbar-nav mr-auto">
129+
130+
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
131+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
132+
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
133+
<span class="navbar-toggler-icon"></span>
134+
</button>
135+
<a class="navbar-brand" href="/">TechRolEmi</a>
136+
<div class="collapse navbar-collapse" id="navbarToggler">
137+
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
138+
<li class="nav-item active">
139+
<a class="nav-link" href="/weatherbit">Weather <span class="sr-only">(current)</span></a>
140+
</li>
141+
<li class="nav-item active">
142+
<a class="nav-link" href="/about">About</a>
143+
</li>
144+
132145
<li class="nav-item">
133-
<a class="nav-link" href="/">Home</a>
146+
<a class="nav-link" href="#">Register</a>
134147
</li>
135148
<li class="nav-item">
136-
<a class="nav-link" href="/about">About</a>
149+
<a class="nav-link" href="#">Login</a>
137150
</li>
151+
138152
</ul>
153+
<form class="form-inline my-2 my-lg-0">
154+
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
155+
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
156+
</form>
157+
</div>
139158
</nav>
159+
140160
```
141161

142162
4. Create a partial file `footer.ejs`

‎views/partials/header.ejs‎

Lines changed: 27 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,31 @@
11
<!-- This code contains navigation for an HTML document and uses several classes from Bootstrap for styling. -->
22

33
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
4-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
5-
<span class="navbar-toggler-icon"></span>
6-
</button>
7-
<a class="navbar-brand" href="/">TechRolEmi</a>
8-
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
9-
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
10-
<li class="nav-item active">
11-
<a class="nav-link" href="/weatherbit">Weather <span class="sr-only">(current)</span></a>
12-
</li>
13-
<li class="nav-item active">
14-
<a class="nav-link" href="/about">About</a>
15-
</li>
16-
17-
<li class="nav-item">
18-
<a class="nav-link" href="#">Register</a>
19-
</li>
20-
<li class="nav-item">
21-
<a class="nav-link" href="#">Login</a>
22-
</li>
23-
24-
<!-- <li class="nav-item">
25-
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
26-
</li> -->
27-
</ul>
28-
<form class="form-inline my-2 my-lg-0">
29-
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
30-
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
31-
</form>
32-
</div>
33-
</nav>
34-
35-
<!-- <nav class="navbar navbar-expand-md navbar-dark bg-dark" style="overflow-x:auto;">
36-
37-
<div class="container-fluid">
38-
<a class="navbar-brand" href="/">TechRolEmi</a>
39-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
40-
<span class="navbar-toggler-icon"></span>
41-
</button>
42-
43-
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
44-
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
45-
<ul class="navbar-nav me-auto">
46-
<li class="nav-item">
47-
<a class="nav-link active" href="/weatherbit">Weather</a>
48-
</li>
49-
50-
</ul>
51-
</div>
52-
53-
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
54-
<ul class="navbar-nav ms-auto">
55-
<li class="nav-item">
56-
<a class="nav-link active" href="/about">About</a>
57-
</li>
58-
59-
<li class="nav-item">
60-
<a class="nav-link" href="#">Register</a>
61-
</li>
62-
<li class="nav-item">
63-
<a class="nav-link" href="#">Login</a>
64-
</li>
65-
</ul>
66-
</div>
67-
</div>
4+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
5+
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
6+
<span class="navbar-toggler-icon"></span>
7+
</button>
8+
<a class="navbar-brand" href="/">TechRolEmi</a>
9+
<div class="collapse navbar-collapse" id="navbarToggler">
10+
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
11+
<li class="nav-item active">
12+
<a class="nav-link" href="/weatherbit">Weather <span class="sr-only">(current)</span></a>
13+
</li>
14+
<li class="nav-item active">
15+
<a class="nav-link" href="/about">About</a>
16+
</li>
17+
18+
<li class="nav-item">
19+
<a class="nav-link" href="#">Register</a>
20+
</li>
21+
<li class="nav-item">
22+
<a class="nav-link" href="#">Login</a>
23+
</li>
24+
25+
</ul>
26+
<form class="form-inline my-2 my-lg-0">
27+
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
28+
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
29+
</form>
6830
</div>
69-
</nav> -->
31+
</nav>

0 commit comments

Comments
 (0)