Skip to content

Commit 55c38d4

Browse files
weizhi-linweizhi-lin
authored
Update nav.css
1 parent f78a248 commit 55c38d4

File tree

1 file changed

+142
-144
lines changed

1 file changed

+142
-144
lines changed

‎assets/css/nav.css

Lines changed: 142 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,161 +1,159 @@
1-
/* Add a black background color to the top navigation */
1+
/* Base styling for the top navigation */
22
.topnav {
3-
background-color: #002D72;
4-
overflow: hidden;
5-
position:fixed;
6-
z-index:999;
7-
width:100%;
3+
background-color: #1a2a5b; /* Darker blue background */
4+
overflow: hidden;
5+
position: fixed;
6+
z-index: 999;
7+
width: 100%;
8+
padding: 15px 0; /* Increased padding for larger height */
9+
}
10+
11+
/* Container for the links in the navigation bar */
12+
.topnav #myLinks {
13+
display: inline;
14+
}
15+
16+
/* Hide the menu icon by default */
17+
.topnav a.icon {
18+
display: none;
19+
}
20+
21+
/* Logo image styling */
22+
.topnav img {
23+
margin-bottom: -16.5pt;
24+
margin-top: -12.5pt;
25+
margin-left: 30%;
26+
}
27+
28+
/* Styling for navigation links */
29+
.topnav a.normal {
30+
float: right;
31+
color: #ffffff; /* White text color */
32+
text-align: center;
33+
padding: 18px 20px; /* Increased padding for a larger clickable area */
34+
text-decoration: none;
35+
font-size: 20px; /* Increased font size */
36+
display: inline-block;
37+
transition: background-color 0.3s, color 0.3s;
38+
}
39+
40+
/* Hover effect for links */
41+
.topnav a.normal:hover {
42+
background-color: #3b5998; /* Slightly lighter blue on hover */
43+
color: #ffffff; /* White text color on hover */
44+
}
45+
46+
/* Add margin to the rightmost link */
47+
.topnav a.right {
48+
margin-right: 30%;
49+
}
50+
51+
/* Responsive styles for smaller screens */
52+
@media screen and (max-width: 1000px) {
53+
.topnav img {
54+
margin-left: 3%;
55+
}
56+
57+
.topnav a.right {
58+
margin-right: 3%;
859
}
960

61+
.topnav a.normal {
62+
padding: 12px 10px;
63+
font-size: 18px;
64+
}
65+
}
1066

11-
.topnav #myLinks {
12-
display: inline;
67+
@media screen and (min-width: 1001px) and (max-width: 1200px) {
68+
.topnav img {
69+
margin-left: 6%;
1370
}
1471

15-
.topnav a.icon {
16-
display: none;
72+
.topnav a.right {
73+
margin-right: 6%;
74+
}
1775
}
1876

77+
@media screen and (min-width: 1201px) and (max-width: 1400px) {
1978
.topnav img {
20-
margin-bottom:-16.5pt;
21-
margin-top:-12.5pt;
22-
margin-left:30%;
79+
margin-left: 12%;
2380
}
24-
25-
/* Style the links inside the navigation bar */
26-
.topnav a.normal {
27-
float: right;
28-
color: #f2f2f2;
29-
text-align: center;
30-
padding: 10px 9px;
31-
text-decoration: none;
32-
font-size: 17px;
81+
82+
.topnav a.right {
83+
margin-right: 12%;
84+
}
85+
}
86+
87+
@media screen and (min-width: 1401px) and (max-width: 1600px) {
88+
.topnav img {
89+
margin-left: 16%;
3390
}
34-
35-
/* Change the color of links on hover */
36-
.topnav a.normal:hover {
37-
background-color: #ddd;
38-
color: black;
91+
92+
.topnav a.right {
93+
margin-right: 16%;
3994
}
40-
41-
/* Add a color to the active/current link */
95+
}
96+
97+
@media screen and (min-width: 1601px) and (max-width: 1800px) {
98+
.topnav img {
99+
margin-left: 19%;
100+
}
101+
42102
.topnav a.right {
43-
margin-right:30%;
103+
margin-right: 19%;
104+
}
105+
}
106+
107+
@media screen and (min-width: 1801px) and (max-width: 2000px) {
108+
.topnav img {
109+
margin-left: 22%;
110+
}
111+
112+
.topnav a.right {
113+
margin-right: 22%;
114+
}
115+
}
116+
117+
/* Hide links on very small screens */
118+
@media screen and (max-width: 480px) {
119+
.topnav #myLinks {
120+
display: none;
44121
}
122+
}
45123

46-
@media print, screen and (max-width: 1000px) {
124+
/* Styles for mobile view (max-width: 960px) */
125+
@media screen and (max-width: 960px) {
126+
.topnav #myLinks {
127+
display: none;
128+
}
47129

48-
.topnav img {
49-
margin-left:3%;
50-
}
130+
.topnav a.normal {
131+
color: white;
132+
float: none;
133+
padding: 16px 20px;
134+
text-decoration: none;
135+
font-size: 18px;
136+
display: block;
137+
}
138+
139+
.topnav a.icon {
140+
color: white;
141+
display: block;
142+
padding: 12px 20px;
143+
font-size: 22px; /* Larger icon size */
144+
position: absolute;
145+
right: 0;
146+
top: 0;
147+
margin-right: 5%;
148+
}
51149

52-
.topnav a.right {
53-
margin-right:3%;
54-
}
55-
56-
.topnav a.normal {
57-
padding: 10px 5px;
58-
}
59-
60-
}
61-
62-
@media print, screen and (max-width: 1200px) and (min-width: 1001px) {
63-
64-
.topnav img {
65-
margin-left:6%;
66-
}
67-
.topnav a.right {
68-
margin-right:6%;
69-
}
70-
71-
}
72-
73-
@media print, screen and (max-width: 1400px) and (min-width: 1201px) {
74-
75-
.topnav img {
76-
margin-left:12%;
77-
}
78-
.topnav a.right {
79-
margin-right:12%;
80-
}
81-
82-
}
83-
84-
85-
@media print, screen and (max-width: 1600px) and (min-width: 1401px) {
86-
87-
.topnav img {
88-
margin-left:16%;
89-
}
90-
.topnav a.right {
91-
margin-right:16%;
92-
}
93-
94-
}
95-
96-
@media print, screen and (max-width: 1800px) and (min-width: 1601px) {
97-
98-
.topnav img {
99-
margin-left:19%;
100-
}
101-
.topnav a.right {
102-
margin-right:19%;
103-
}
104-
105-
}
106-
107-
@media print, screen and (max-width: 2000px) and (min-width: 1801px) {
108-
109-
.topnav img {
110-
margin-left:22%;
111-
}
112-
.topnav a.right {
113-
margin-right:22%;
114-
}
115-
116-
}
117-
118-
119-
@media print, screen and (max-width: 480px) {
120-
.topnav #myLinks {
121-
display: none;
122-
}
123-
}
124-
125-
@media print, screen and (max-width: 960px) {
126-
.topnav #myLinks {
127-
display: none;
128-
}
129-
130-
.topnav a.normal {
131-
color: white;
132-
float: none;
133-
padding: 14px 16px;
134-
text-decoration: none;
135-
font-size: 17px;
136-
display: block;
137-
}
138-
139-
.topnav a.icon {
140-
color: white;
141-
display: block;
142-
padding: 10px 16px;
143-
font-size: 17px;
144-
position: absolute;
145-
float: right;
146-
right: 0;
147-
top: 0;
148-
margin-right:5%;
149-
}
150-
151-
.topnav a.right {
152-
color: white;
153-
float: none;
154-
padding: 14px 16px;
155-
text-decoration: none;
156-
font-size: 17px;
157-
display: block;
158-
margin-right:0;
159-
}
160-
}
161-
150+
.topnav a.right {
151+
color: white;
152+
float: none;
153+
padding: 16px 20px;
154+
text-decoration: none;
155+
font-size: 18px;
156+
display: block;
157+
margin-right: 0;
158+
}
159+
}

0 commit comments

Comments
 (0)