Styling Update for Header and Footer Elements #2502
Conversation
|
Tagging @HaoK for content review. |
|
I'm over in Azure land these days @deepchoudhery, @halter73 can review or redirect as appropriate |
There was a problem hiding this comment.
Can we get before and after screenshots of the headers and footers for Bootstrap 3, 4 and 5 with wide and narrow screen widths?
I'm not a CSS expert. Maybe @JeremyLikness @danroth27 @SteveSandersonMS and/or @javiercn might be better to review this.
| html { | ||
| font-size: 14px; | ||
| } | ||
| @media (min-width: 768px) { | ||
|
|
||
| @media (min-width: 576px) { |
There was a problem hiding this comment.
Why did you reduce the min width?
There was a problem hiding this comment.
because the layout uses bootstrap small size which is 576
if you want to use 768 here, the layout has to be changed to use large bootstrap breakpoints instead
| white-space: normal; | ||
| text-align: center; | ||
| word-break: break-all; | ||
| } |
| <nav class="navbar navbar-expand-sm navbar-light navbar-toggleable-sm bg-white border-bottom box-shadow mb-3"> | ||
| <div class="container"> | ||
| <nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3"> | ||
| <div class="container-fluid"> |
There was a problem hiding this comment.
Why use "container-fluid" here but not on line 48? Why use it at all? Is having fixed widths that bad?
| position: relative; | ||
| min-height: 100%; | ||
| .header { | ||
| background-color: var(--bs-body-bg); |
There was a problem hiding this comment.
Why not inherit a background-color like before? Do we use var(--bs-body-bg) anywhere else? Is this available in Bootstrap3? Why are there no non-whitespace changes in the Bootstrap3 site.css?
| .footer { | ||
| position: absolute; |
There was a problem hiding this comment.
Why remove the position: absolute, width: 100, bottom: 0 for smaller width footers? Did you test on smaller screen sizes?
| /* Set the fixed height of the footer here */ | ||
| height: 60px; | ||
| line-height: 60px; /* Vertically center the text there */ | ||
| line-height: 45px; |
There was a problem hiding this comment.
What's wrong with 60px? Why don't need the height: anymore?
| @@ -19,8 +19,8 @@ | |||
| </head> | |||
| <body> | |||
| <header> | |||
| <nav class="navbar navbar-expand-sm navbar-light navbar-toggleable-sm bg-white border-bottom box-shadow mb-3"> | |||
| <div class="container"> | |||
| <nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3"> | |||
There was a problem hiding this comment.
What's wrong with navbar-light and bg-white for the bar?
| position: fixed; | ||
| bottom: 0; | ||
| width: 100%; | ||
| z-index: 9; |
There was a problem hiding this comment.
Why is z-index necessary? Because the footer is now fixed? Do we really want a fixed footer?
|
hey thanks for the review, this is still a work in progress ! |
Summary of the changes (Less than 80 chars)
Enhanced header and footer styling for consistency and transparency fixes.
Description
This pull request brings important styling updates to the header and footer elements within the codebase, designed to enhance visual uniformity and user experience. The following changes have been enacted:
Header:
Introduced the sticky-sm-top class to establish a sticky header behavior during scrolling.
Adjusted the background color of the header to eliminate transparency issues and match the desired appearance.
Footer:
Harmonized the background color of the footer with the global body background color.
Refrained from transparency effects in the footer's styling.
Implemented a media query that triggers for screens wider than Bootstrap's small (576px) breakpoint. This ensures consistent behavior with other areas and queries utilizing Bootstrap's breakpoint system.