Skip to content
This repository was archived by the owner on Oct 19, 2022. It is now read-only.

Commit c481b0d

Browse files
author
Jos Poortvliet
authored
Merge pull request #188 from nextcloud/headerfix
fix header underlines
2 parents 56dcb06 + 850982a commit c481b0d

4 files changed

Lines changed: 152 additions & 186 deletions

File tree

‎assets/css/custom.css‎

Lines changed: 42 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -410,27 +410,31 @@ section#why-nextcloud {
410410
padding-top: 24px;
411411
font-size: 16px; }
412412
@media (min-width: 1200px) {
413-
.Header-Navigation .navbar li.active {
413+
.Header-Navigation .navbar li.active a {
414414
border-bottom: 3px solid white;
415415
padding-bottom: 15px; }
416416
.Header-Navigation .navbar li:last-child {
417417
padding-left: 30px;
418418
padding-right: 30px; }
419+
.Header-Navigation .navbar li:last-child:hover {
420+
/* we can set a hover effect for the install button here */ }
419421
.Header-Navigation .navbar li a {
420-
color: white; }
422+
color: white;
423+
/* hover effect for menu items: underline */ }
421424
.Header-Navigation .navbar li a:after {
422425
content: '';
423426
display: block;
424427
margin: auto;
425428
height: 2px;
426429
width: 0px;
427-
/* margin-top: 10px; this makes the button look weirdly heigh and unsymmetrical */
428430
background: transparent;
429431
transition: width .2s ease-out, background-color .5s ease; }
430432
.Header-Navigation .navbar li a:after:last-child {
431433
margin-top: 0; }
432434
.Header-Navigation .navbar li a:hover {
433-
text-decoration: none; }
435+
text-decoration: none;
436+
padding-bottom: 15px;
437+
border-bottom: 3px solid white; }
434438
.Header-Navigation .navbar .navbar-header {
435439
float: none; }
436440
.Header-Navigation .navbar .navbar-header .logo {
@@ -470,28 +474,35 @@ section#why-nextcloud {
470474
.Header-Navigation .navbar .active {
471475
font-weight: 600;
472476
z-index: 3; }
473-
.Header-Navigation .navbar .overlay-menu ul {
474-
float: right !important;
475-
padding-left: 0;
476-
margin-bottom: 0;
477-
list-style: none;
478-
margin-right: -15px;
479-
margin-bottom: 0; }
480-
.Header-Navigation .navbar .overlay-menu ul li {
481-
margin: 0 0 0 10px;
482-
padding: 10px 15px;
483-
position: relative;
484-
display: table-cell;
485-
vertical-align: middle; }
486-
.Header-Navigation .navbar .overlay-menu ul li:last-child {
487-
padding: 0px; }
488-
.Header-Navigation .navbar .overlay-menu ul .btn-primary {
489-
padding: 5px 5px; }
490-
.Header-Navigation .navbar .overlay-menu ul .btn-primary a {
477+
.Header-Navigation .navbar .overlay {
478+
display: inline-block;
479+
float: right !important; }
480+
.Header-Navigation .navbar .overlay .overlay-menu ul {
481+
float: right !important;
482+
padding-left: 0;
483+
margin-bottom: 0;
484+
list-style: none;
485+
margin-right: -15px;
486+
margin-bottom: 0; }
487+
.Header-Navigation .navbar .overlay .overlay-menu ul li {
488+
margin: 0 0 0 10px;
489+
padding: 10px 15px;
491490
position: relative;
492-
display: block;
493-
padding: 15px 45px;
494-
border-radius: 100px; }
491+
display: table-cell;
492+
vertical-align: middle; }
493+
.Header-Navigation .navbar .overlay .overlay-menu ul li:last-child {
494+
padding-left: 30px;
495+
padding-right: 30px; }
496+
.Header-Navigation .navbar .overlay .overlay-menu ul .btn-primary {
497+
padding: 5px 5px; }
498+
.Header-Navigation .navbar .overlay .overlay-menu ul .btn-primary a {
499+
position: relative;
500+
display: block;
501+
padding: 10px 15px;
502+
border-radius: 100px; }
503+
.Header-Navigation .navbar .overlay .overlay-menu ul .btn-primary a:hover {
504+
text-decoration: none;
505+
border-bottom: none; }
495506

496507
/**
497508
*Break Menu at 1200px
@@ -551,6 +562,10 @@ section#why-nextcloud {
551562
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.09); }
552563
.navbar.scrolled:not(.mobile-menu-open) a {
553564
color: #656565 !important; }
565+
.navbar.scrolled:not(.mobile-menu-open) a:hover {
566+
text-decoration: none;
567+
padding-bottom: 15px;
568+
border-bottom: 3px solid #656565; }
554569
.navbar.scrolled:not(.mobile-menu-open) .navbar-nav li:not(.btn-primary):not(.active):hover:before {
555570
width: 100%;
556571
background: #656565;
@@ -559,8 +574,8 @@ section#why-nextcloud {
559574
width: 100%;
560575
background: #656565; }
561576
@media (min-width: 1200px) {
562-
.navbar.scrolled:not(.mobile-menu-open) .active {
563-
border-bottom: 3px solid #656565 !important; } }
577+
.navbar.scrolled:not(.mobile-menu-open) .active a {
578+
border-bottom: 3px solid #656565; } }
564579
.navbar.scrolled:not(.mobile-menu-open) .btn-primary a {
565580
color: white !important; }
566581
@media (max-width: 1200px) {
@@ -655,32 +670,6 @@ section#why-nextcloud {
655670
border: 0;
656671
-webkit-box-shadow: none;
657672
box-shadow: none; } }
658-
.overlay {
659-
display: inline-block;
660-
float: right !important; }
661-
.overlay .overlay-menu ul {
662-
float: right !important;
663-
padding-left: 0;
664-
margin-bottom: 0;
665-
list-style: none;
666-
margin-right: -15px;
667-
margin-bottom: 0; }
668-
.overlay .overlay-menu ul li {
669-
margin: 0 0 0 10px;
670-
padding: 10px 15px;
671-
position: relative;
672-
display: table-cell;
673-
vertical-align: middle; }
674-
.overlay .overlay-menu ul li:last-child {
675-
padding-left: 30px;
676-
padding-right: 30px; }
677-
.overlay .overlay-menu ul .btn-primary {
678-
padding: 5px 5px; }
679-
.overlay .overlay-menu ul .btn-primary a {
680-
position: relative;
681-
display: block;
682-
padding: 10px 15px; }
683-
684673
/**
685674
*Mobile
686675
*/

‎assets/css/header.css‎

Lines changed: 42 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,31 @@
88
padding-top: 24px;
99
font-size: 16px; }
1010
@media (min-width: 1200px) {
11-
.Header-Navigation .navbar li.active {
11+
.Header-Navigation .navbar li.active a {
1212
border-bottom: 3px solid white;
1313
padding-bottom: 15px; }
1414
.Header-Navigation .navbar li:last-child {
1515
padding-left: 30px;
1616
padding-right: 30px; }
17+
.Header-Navigation .navbar li:last-child:hover {
18+
/* we can set a hover effect for the install button here */ }
1719
.Header-Navigation .navbar li a {
18-
color: white; }
20+
color: white;
21+
/* hover effect for menu items: underline */ }
1922
.Header-Navigation .navbar li a:after {
2023
content: '';
2124
display: block;
2225
margin: auto;
2326
height: 2px;
2427
width: 0px;
25-
/* margin-top: 10px; this makes the button look weirdly heigh and unsymmetrical */
2628
background: transparent;
2729
transition: width .2s ease-out, background-color .5s ease; }
2830
.Header-Navigation .navbar li a:after:last-child {
2931
margin-top: 0; }
3032
.Header-Navigation .navbar li a:hover {
31-
text-decoration: none; }
33+
text-decoration: none;
34+
padding-bottom: 15px;
35+
border-bottom: 3px solid white; }
3236
.Header-Navigation .navbar .navbar-header {
3337
float: none; }
3438
.Header-Navigation .navbar .navbar-header .logo {
@@ -68,28 +72,35 @@
6872
.Header-Navigation .navbar .active {
6973
font-weight: 600;
7074
z-index: 3; }
71-
.Header-Navigation .navbar .overlay-menu ul {
72-
float: right !important;
73-
padding-left: 0;
74-
margin-bottom: 0;
75-
list-style: none;
76-
margin-right: -15px;
77-
margin-bottom: 0; }
78-
.Header-Navigation .navbar .overlay-menu ul li {
79-
margin: 0 0 0 10px;
80-
padding: 10px 15px;
81-
position: relative;
82-
display: table-cell;
83-
vertical-align: middle; }
84-
.Header-Navigation .navbar .overlay-menu ul li:last-child {
85-
padding: 0px; }
86-
.Header-Navigation .navbar .overlay-menu ul .btn-primary {
87-
padding: 5px 5px; }
88-
.Header-Navigation .navbar .overlay-menu ul .btn-primary a {
75+
.Header-Navigation .navbar .overlay {
76+
display: inline-block;
77+
float: right !important; }
78+
.Header-Navigation .navbar .overlay .overlay-menu ul {
79+
float: right !important;
80+
padding-left: 0;
81+
margin-bottom: 0;
82+
list-style: none;
83+
margin-right: -15px;
84+
margin-bottom: 0; }
85+
.Header-Navigation .navbar .overlay .overlay-menu ul li {
86+
margin: 0 0 0 10px;
87+
padding: 10px 15px;
8988
position: relative;
90-
display: block;
91-
padding: 15px 45px;
92-
border-radius: 100px; }
89+
display: table-cell;
90+
vertical-align: middle; }
91+
.Header-Navigation .navbar .overlay .overlay-menu ul li:last-child {
92+
padding-left: 30px;
93+
padding-right: 30px; }
94+
.Header-Navigation .navbar .overlay .overlay-menu ul .btn-primary {
95+
padding: 5px 5px; }
96+
.Header-Navigation .navbar .overlay .overlay-menu ul .btn-primary a {
97+
position: relative;
98+
display: block;
99+
padding: 10px 15px;
100+
border-radius: 100px; }
101+
.Header-Navigation .navbar .overlay .overlay-menu ul .btn-primary a:hover {
102+
text-decoration: none;
103+
border-bottom: none; }
93104

94105
/**
95106
*Break Menu at 1200px
@@ -149,6 +160,10 @@
149160
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.09); }
150161
.navbar.scrolled:not(.mobile-menu-open) a {
151162
color: #656565 !important; }
163+
.navbar.scrolled:not(.mobile-menu-open) a:hover {
164+
text-decoration: none;
165+
padding-bottom: 15px;
166+
border-bottom: 3px solid #656565; }
152167
.navbar.scrolled:not(.mobile-menu-open) .navbar-nav li:not(.btn-primary):not(.active):hover:before {
153168
width: 100%;
154169
background: #656565;
@@ -157,8 +172,8 @@
157172
width: 100%;
158173
background: #656565; }
159174
@media (min-width: 1200px) {
160-
.navbar.scrolled:not(.mobile-menu-open) .active {
161-
border-bottom: 3px solid #656565 !important; } }
175+
.navbar.scrolled:not(.mobile-menu-open) .active a {
176+
border-bottom: 3px solid #656565; } }
162177
.navbar.scrolled:not(.mobile-menu-open) .btn-primary a {
163178
color: white !important; }
164179
@media (max-width: 1200px) {
@@ -253,32 +268,6 @@
253268
border: 0;
254269
-webkit-box-shadow: none;
255270
box-shadow: none; } }
256-
.overlay {
257-
display: inline-block;
258-
float: right !important; }
259-
.overlay .overlay-menu ul {
260-
float: right !important;
261-
padding-left: 0;
262-
margin-bottom: 0;
263-
list-style: none;
264-
margin-right: -15px;
265-
margin-bottom: 0; }
266-
.overlay .overlay-menu ul li {
267-
margin: 0 0 0 10px;
268-
padding: 10px 15px;
269-
position: relative;
270-
display: table-cell;
271-
vertical-align: middle; }
272-
.overlay .overlay-menu ul li:last-child {
273-
padding-left: 30px;
274-
padding-right: 30px; }
275-
.overlay .overlay-menu ul .btn-primary {
276-
padding: 5px 5px; }
277-
.overlay .overlay-menu ul .btn-primary a {
278-
position: relative;
279-
display: block;
280-
padding: 10px 15px; }
281-
282271
/**
283272
*Mobile
284273
*/

0 commit comments

Comments
 (0)