Global header alignment, padding and sticky(?)
See original GitHub issue@Gregoor looks like the header elements are aligned at the top rather than at their middle. For padding the top and bottom should increase to 1.25rem (20px). See screenshot from Zeplin below.
Additionally, how do you feel about making the navigation sticky on scroll? This would allow for access to translation, stats and navigation at all times. On scroll, in addition to sticking it would be good to add a simple shadow – box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.03)
did the trick for me when playing in dev tools but let me know your thoughts. Noticing on mobile that our header shadow is a bit darker and harsher, possible to lighten and match to the value above?
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
How to Create a Sticky Header with Divi's Sticky Options
Go to the Divi Theme Builder and start building a new global or custom header. sticky header. Section #1 Settings. Gradient Background. Once ......
Read more >Table header to stay fixed at the top when user scrolls it out of ...
I fixed this script so that it can handle <th> elements that have border and padding (otherwise it sets the fixed header <th>...
Read more >position - CSS: Cascading Style Sheets - MDN Web Docs
To see the effect of sticky positioning, select the position: sticky ... position: absolute; position: fixed; position: sticky; /* Global ...
Read more >Sticky Footer, Five Ways | CSS-Tricks
The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is...
Read more >Bridge Documentation and Tutorials | 6. Header Setup
When the sticky header appears, the logo is aligned left and the navigation is ... These skins are defined globally in WP Admin...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I don’t really have an opinion about mobile, as I rarely access the web from mobile devices. So yes, my worry is desktop-related.
I like the idea of a sticky-on-scroll-up header on mobile. What do you thin kabout that @jf99? It sounds like your worry is more desktop-related?