Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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.

screen shot 2018-04-26 at 5 37 51 pm

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:closed
  • Created 5 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

jf99commented, Apr 27, 2018

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.

Gregoorcommented, Apr 27, 2018

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found