MediaWiki:Navbar.css: Difference between revisions
From The Seven Sages of Rome
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* Base navbar styling */ | |||
#mw-navigation { | #mw-navigation { | ||
z-index: 999; | z-index: 999; | ||
| Line 13: | Line 14: | ||
} | } | ||
/* Top tier navbar styling */ | |||
.navbar-top { | |||
background-color: rgba(255, 255, 255, 1) !important; | |||
border-bottom: 1px solid #e5e7eb; | |||
padding: 0.5rem 2rem; | |||
z-index: 1000; | |||
} | |||
@media (max-width: 799px){ | |||
.navbar-top { | |||
padding: 0.5rem 0.5rem; | |||
} | |||
} | |||
.navbar-top .navbar-brand { | |||
font-family: 'Playfair Display', Georgia, serif; | |||
font-size: 1.25rem; | |||
font-weight: 400; | |||
color: #000000; | |||
} | |||
.navbar-top .nav-link { | |||
color: black !important; | |||
padding: 0.5rem 1rem; | |||
text-decoration: none; | |||
} | |||
.navbar-top .nav-link:hover { | |||
color: black !important; | |||
font-weight: 600 !important; | |||
} | |||
.navbar-top .nav-link:active { | |||
color: black !important; | |||
background: transparent !important; | |||
font-weight: 600 !important; | |||
} | |||
/* Second tier navbar (main MediaWiki navbar) */ | |||
.p-navbar.scrolled { | .p-navbar.scrolled { | ||
border-bottom: 1px solid #e5e7eb; | border-bottom: 1px solid #e5e7eb; | ||
| Line 32: | Line 72: | ||
} | } | ||
.p-navbar .navbar-toggler { | .p-navbar .navbar-toggler, | ||
.navbar-top .navbar-toggler { | |||
color: rgb(0, 0, 0) !important; | color: rgb(0, 0, 0) !important; | ||
border-color: rgba(0, 0, 0, 0.5) !important; | border-color: rgba(0, 0, 0, 0.5) !important; | ||
} | |||
/* Make second navbar stick below the top navbar */ | |||
.sticky-top:not(.navbar-top) { | |||
top: 0; | |||
z-index: 998; | |||
} | } | ||
| Line 63: | Line 110: | ||
.navbar-expand-custom .navbar-toggler { | .navbar-expand-custom .navbar-toggler { | ||
display: none; | display: none; | ||
} | |||
} | |||
/* Apply consistent padding to both navbars */ | |||
.navbar-top .container, | |||
.navbar-horizontal .container { | |||
padding-left: 2rem; | |||
padding-right: 2rem; | |||
} | |||
@media (max-width: 799px){ | |||
.navbar-top .container, | |||
.navbar-horizontal .container { | |||
padding-left: 0.5rem; | |||
padding-right: 0.5rem; | |||
} | } | ||
} | } | ||
Revision as of 20:45, 12 January 2026
/* Base navbar styling */
#mw-navigation {
z-index: 999;
background-color: rgba(255, 255, 255, 1) !important;
padding: 0.5rem 2rem !important;
}
@media (max-width: 799px){
#mw-navigation {
z-index: 999;
background-color: rgba(255, 255, 255, 1) !important;
padding: 0.5rem 0.5rem !important;
}
}
/* Top tier navbar styling */
.navbar-top {
background-color: rgba(255, 255, 255, 1) !important;
border-bottom: 1px solid #e5e7eb;
padding: 0.5rem 2rem;
z-index: 1000;
}
@media (max-width: 799px){
.navbar-top {
padding: 0.5rem 0.5rem;
}
}
.navbar-top .navbar-brand {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.25rem;
font-weight: 400;
color: #000000;
}
.navbar-top .nav-link {
color: black !important;
padding: 0.5rem 1rem;
text-decoration: none;
}
.navbar-top .nav-link:hover {
color: black !important;
font-weight: 600 !important;
}
.navbar-top .nav-link:active {
color: black !important;
background: transparent !important;
font-weight: 600 !important;
}
/* Second tier navbar (main MediaWiki navbar) */
.p-navbar.scrolled {
border-bottom: 1px solid #e5e7eb;
}
.p-navbar .nav-link {
color: black !important;
}
.p-navbar .nav-link:hover {
color: black !important;
font-weight: 600 !important;
}
.p-navbar .nav-link:active {
color: black !important;
background: transparent !important;
font-weight: 600 !important;
}
.p-navbar .navbar-toggler,
.navbar-top .navbar-toggler {
color: rgb(0, 0, 0) !important;
border-color: rgba(0, 0, 0, 0.5) !important;
}
/* Make second navbar stick below the top navbar */
.sticky-top:not(.navbar-top) {
top: 0;
z-index: 998;
}
/* Custom navbar breakpoint */
@media (min-width: 1350px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .dropdown-menu {
position: absolute;
}
.navbar-expand-custom .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom > .container {
flex-wrap: nowrap;
}
.navbar-expand-custom .navbar-collapse {
display: flex !important;
flex-basis: auto;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
/* Apply consistent padding to both navbars */
.navbar-top .container,
.navbar-horizontal .container {
padding-left: 2rem;
padding-right: 2rem;
}
@media (max-width: 799px){
.navbar-top .container,
.navbar-horizontal .container {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}