Skip to content

Commit 8defdd4

Browse files
ashish10677anistark
ashish10677
authored and
anistark
committed
fix: update navbar as per latest website
Signed-off-by: Ashish Kumar Mishra <[email protected]> fix: style mobile nav bar Signed-off-by: Ashish Kumar Mishra <[email protected]> fix: navbar for mobile Signed-off-by: Ashish Kumar Mishra <[email protected]> fix: remove unnecessary !important Signed-off-by: Ashish Kumar Mishra <[email protected]> fix: remove orange border from menu items Signed-off-by: Ashish Kumar Mishra <[email protected]> fix: add padding to menu items Signed-off-by: Ashish Kumar Mishra <[email protected]>
1 parent 89dfab5 commit 8defdd4

File tree

4 files changed

+190
-45
lines changed

4 files changed

+190
-45
lines changed

‎content/images/2025/mobile_nav_burger.svg

Lines changed: 16 additions & 0 deletions
Loading

‎themes/inpycon2025/static/css/style.css

Lines changed: 111 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,8 @@ header {
4040
}
4141

4242
a:focus {
43-
border: 1px solid #f97316 !important;
44-
outline: 1px solid #f97316 !important;
43+
border: none !important;
44+
outline: none !important;
4545
}
4646

4747
.no-focus:focus {
@@ -129,8 +129,30 @@ header .navbar-light .navbar-nav .nav-link.active,
129129
}
130130

131131
header .navbar-expand-lg .navbar-nav .nav-link {
132-
padding: 8px 30px !important;
132+
padding: 8px 30px;
133+
}
134+
135+
.navbar-nav .nav-link:focus,
136+
.navbar-nav .nav-link:active,
137+
.dropdown-item:focus,
138+
.dropdown-item:active,
139+
.dropdown-toggle:focus,
140+
.dropdown-toggle:active {
141+
outline: none;
142+
border: none;
143+
box-shadow: none;
133144
}
145+
146+
.dropdown-item {
147+
padding: 1rem !important;
148+
border-top-left-radius: .5rem;
149+
border-top-right-radius: .5rem;
150+
}
151+
152+
.dropdown-menu {
153+
padding: 0rem !important;
154+
}
155+
134156
.menu-icon ul {
135157
display: flex;
136158
justify-content: center;
@@ -140,7 +162,6 @@ header .navbar-expand-lg .navbar-nav .nav-link {
140162
}
141163
.banner-sec .container {
142164
position: relative;
143-
/* z-index: 99!important; */
144165
}
145166
.banner-sec .container-fluid {
146167
position: relative;
@@ -609,7 +630,7 @@ thead th {
609630
}
610631
.dropdown-item:focus,
611632
.dropdown-item:hover {
612-
background-color: #ffbeac !important;
633+
background-color: #d7ff7b !important;
613634
}
614635
.speaker-laybox img {
615636
margin-top: -29% !important;
@@ -960,6 +981,47 @@ path {
960981
.navbar-toggler:focus {
961982
box-shadow: none !important;
962983
}
984+
.navbar-toggler {
985+
border: none;
986+
padding: 0.25rem 0.5rem;
987+
background: transparent;
988+
position: relative;
989+
}
990+
.navbar-toggler img {
991+
display: block;
992+
width: 24px;
993+
height: 24px;
994+
transition: opacity 0.3s ease;
995+
}
996+
.navbar-toggler .close-icon {
997+
display: none;
998+
border: none;
999+
background: rgba(255, 255, 255, 0.2);
1000+
padding: 12px;
1001+
border-radius: 50%;
1002+
transition: all 0.3s ease;
1003+
cursor: pointer;
1004+
position: absolute;
1005+
top: 50%;
1006+
left: 50%;
1007+
transform: translate(-50%, -50%);
1008+
}
1009+
.navbar-toggler .close-icon:hover {
1010+
background: rgba(255, 255, 255, 0.3);
1011+
}
1012+
.navbar-toggler .close-icon svg {
1013+
color: white;
1014+
width: 24px;
1015+
height: 24px;
1016+
}
1017+
.navbar-toggler[aria-expanded="true"] .hamburger-icon {
1018+
display: none !important;
1019+
}
1020+
.navbar-toggler[aria-expanded="true"] .close-icon {
1021+
display: flex !important;
1022+
align-items: center;
1023+
justify-content: center;
1024+
}
9631025

9641026
.marquee-bg {
9651027
background-position: 100% 110% !important;
@@ -982,7 +1044,40 @@ path {
9821044
}
9831045
.navbar-collapse ul li {
9841046
width: 100% !important;
985-
text-align: center !important;
1047+
text-align: left !important;
1048+
border-radius: 0.5rem;
1049+
border: 1px solid hsla(0, 0%, 100%, .2);
1050+
background-color: hsla(0, 0%, 100%, .1);
1051+
margin-top: 1rem;
1052+
padding: 0.1rem;
1053+
}
1054+
header .navbar-expand-lg .navbar-nav .nav-link {
1055+
padding: 0.7rem !important;
1056+
}
1057+
.navbar-collapse .btn-lime {
1058+
display: block;
1059+
width: 100%;
1060+
border-radius: 0.5rem;
1061+
padding: 0.7rem;
1062+
text-align: center;
1063+
margin: 0;
1064+
}
1065+
.navbar-collapse .dropdown-menu {
1066+
background-color: #d7ff7b !important;
1067+
border: none;
1068+
border-radius: 0.5rem;
1069+
padding: 0.25rem !important;
1070+
}
1071+
.navbar-collapse .dropdown-item {
1072+
color: #000000 !important;
1073+
padding: 0.5rem !important;
1074+
border-radius: 0.25rem;
1075+
}
1076+
.navbar-collapse .dropdown-item:hover {
1077+
background-color: rgba(0, 0, 0, 0.1) !important;
1078+
}
1079+
.dropdown-list {
1080+
margin: 0rem !important;
9861081
}
9871082
.horizontal-scrolling-items__item ul li p {
9881083
font-size: 70px !important;
@@ -1467,35 +1562,31 @@ path {
14671562
}
14681563

14691564
.btn-lime {
1470-
background-color: #c5f700; /* Custom lime */
1471-
color: black;
1472-
border: 1px solid black;
1565+
background-color: rgba(215, 255, 123, .9);
1566+
color: #000000;
1567+
border: none;
14731568
padding: 0.5rem 1rem;
1474-
border-radius: 9999px; /* pill shape */
1475-
transition: all 0.3s ease;
1569+
border-radius: 9999px;
1570+
transition: all 200ms;
14761571
display: inline-flex;
14771572
align-items: center;
14781573
gap: 0.5rem;
14791574
text-decoration: none;
1575+
font-size: 0.875rem;
1576+
font-weight: 500;
14801577
}
14811578

14821579
.btn-lime:hover {
1483-
background-color: #b2e600;
1484-
transform: translateY(-2px);
1485-
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
1580+
background-color: rgba(215, 255, 123, 1);
1581+
color: #000000;
14861582
}
14871583

14881584
.btn-lime .text-label {
1489-
font-size: 1.125rem; /* ~text-lg */
1585+
font-size: 0.875rem;
14901586
white-space: nowrap;
1491-
transition: transform 0.2s ease;
14921587
color: black;
14931588
}
14941589

1495-
.btn-lime:hover .text-label {
1496-
transform: translateX(-4px);
1497-
}
1498-
14991590
.arrow-circle {
15001591
width: 2rem;
15011592
height: 2rem;
@@ -1508,13 +1599,6 @@ path {
15081599
transition: transform 0.3s ease;
15091600
}
15101601

1511-
.btn-lime:hover .arrow-circle {
1512-
transform: rotate(40deg);
1513-
}
1514-
1515-
.btn-lime:hover .arrow-icon {
1516-
transform: scale(1.1);
1517-
}
15181602

15191603
.arrow-icon {
15201604
width: 1rem;

‎themes/inpycon2025/templates/base.html

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
{%include "components/footer.html" %}
1515

1616
<!-- bootstrap -->
17-
<script src="js/bootstrap.bundle.min.js"></script>
17+
<script src="{{ SITEURL }}/theme/js/bootstrap.bundle.min.js"></script>
1818
<script src="{{ SITEURL }}/theme/js/font-awesome.js" rel="stylesheet"></script>
1919
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
2020
<script src="{{ SITEURL }}/theme/js/aos.js" rel="stylesheet"></script>
@@ -37,14 +37,29 @@
3737
window.addEventListener('scroll', handleScroll);
3838
</script>
3939
<script>
40-
// on clicking element with id "navbar-toggler-icon", add class "show" to element with id navbarSupportedContent
41-
document.getElementById("navbar-toggler-icon").addEventListener("click", function() {
40+
document.addEventListener('DOMContentLoaded', function() {
4241
var navbarContent = document.getElementById("navbarSupportedContent");
43-
if (navbarContent.classList.contains("show")) {
44-
navbarContent.classList.remove("show");
45-
} else {
46-
navbarContent.classList.add("show");
47-
}
42+
var togglerButton = document.getElementById("navbar-toggler-icon");
43+
var isToggling = false;
44+
45+
// Listen for Bootstrap collapse events - these fire at the right time
46+
navbarContent.addEventListener('show.bs.collapse', function() {
47+
togglerButton.setAttribute("aria-expanded", "true");
48+
isToggling = true;
49+
});
50+
51+
navbarContent.addEventListener('shown.bs.collapse', function() {
52+
isToggling = false;
53+
});
54+
55+
navbarContent.addEventListener('hide.bs.collapse', function() {
56+
togglerButton.setAttribute("aria-expanded", "false");
57+
isToggling = true;
58+
});
59+
60+
navbarContent.addEventListener('hidden.bs.collapse', function() {
61+
isToggling = false;
62+
});
4863
});
4964
</script>
5065
<script>

‎themes/inpycon2025/templates/components/header.html

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
class="w-full d-flex align-items-center justify-content-center"
66
id="main-navbar"
77
>
8-
<div class="col-lg-2 col-md-2 d-none d-lg-block">
8+
<div class="col-lg-1 col-md-1 d-none d-lg-block">
99
<a href="https://in.pycon.org/2025/" class="no-focus">
1010
<img
1111
src="{{ SITEURL }}/theme/images/logo 2.png"
@@ -14,7 +14,7 @@
1414
/>
1515
</a>
1616
</div>
17-
<div class="col-lg-8 col-md-12 w-full">
17+
<div class="col-lg-9 col-md-12 w-full">
1818
<nav class="navbar navbar-expand-lg navbar-light">
1919
<div class="container-fluid">
2020
<a
@@ -37,27 +37,57 @@
3737
aria-label="Toggle navigation"
3838
id="navbar-toggler-icon"
3939
>
40-
<span class="navbar-toggler-icon"></span>
40+
<img src="{{ SITEURL }}/images/2025/mobile_nav_burger.svg" alt="Menu" width="24" height="24" class="hamburger-icon">
41+
<div id="mobile-close-btn" class="close-icon" style="display: none;">
42+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
43+
<line x1="18" y1="6" x2="6" y2="18"></line>
44+
<line x1="6" y1="6" x2="18" y2="18"></line>
45+
</svg>
46+
</div>
4147
</button>
4248

4349
<div class="collapse navbar-collapse" id="navbarSupportedContent">
4450
<ul class="navbar-nav m-auto align-items-center mb-2 mb-lg-0">
51+
<li class="nav-item dropdown">
52+
<a class="nav-link dropdown-toggle" href="#" id="aboutDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
53+
About
54+
</a>
55+
<ul class="dropdown-menu" aria-labelledby="aboutDropdown">
56+
<li class="dropdown-list"><a class="dropdown-item" href="https://in.pycon.org/2025/about/faqs">FAQs</a></li>
57+
</ul>
58+
</li>
4559
<li class="nav-item">
46-
<a class="nav-link" href="https://in.pycon.org/2025/">Home</a>
60+
<a class="nav-link" href="https://in.pycon.org/2025/cfp/">CFP</a>
4761
</li>
4862
<li class="nav-item">
49-
<a class="nav-link" href="https://in.pycon.org/2025/cfp/"
50-
>Call for Proposal</a
51-
>
63+
<a class="nav-link" href="https://in.pycon.org/2025/venue/">Venue</a>
64+
</li>
65+
<li class="nav-item dropdown">
66+
<a class="nav-link dropdown-toggle" href="#" id="programDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
67+
Program
68+
</a>
69+
<ul class="dropdown-menu" aria-labelledby="programDropdown">
70+
<li class="dropdown-list"><a class="dropdown-item" href="https://in.pycon.org/2025/program/lightning-talks">Lightning Talks</a></li>
71+
</ul>
5272
</li>
5373
<li class="nav-item">
54-
<a class="nav-link" href="https://in.pycon.org/2025/coc/"
55-
>Code of Conduct</a
56-
>
74+
<a class="nav-link" href="https://in.pycon.org/2025/why-sponsor/">Sponsors</a>
75+
</li>
76+
<li class="nav-item dropdown">
77+
<a class="nav-link dropdown-toggle" href="#" id="cocDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
78+
CoC
79+
</a>
80+
<ul class="dropdown-menu" aria-labelledby="cocDropdown">
81+
<li class="dropdown-list"><a class="dropdown-item" href="https://in.pycon.org/2025/coc/guidelines">Code of Conduct Policy</a></li>
82+
<li class="dropdown-list"><a class="dropdown-item" href="https://in.pycon.org/2025/coc/reporting">Code of Conduct Reporting</a></li>
83+
</ul>
5784
</li>
5885
<li class="nav-item">
5986
<a class="nav-link active" href="{{ SITEURL }}">Blog</a>
6087
</li>
88+
<li class="nav-item ms-lg-3">
89+
<a class="btn-lime" href="https://in.pycon.org/2025/tickets/">Get Tickets</a>
90+
</li>
6191
</ul>
6292
</div>
6393
</div>

0 commit comments

Comments
 (0)