search

mkenworthy / mkenworthy_old_webpage

My professional web pages using tufte-css
2 stars 0 forks source link

Navigation bar cannot be seen completely on a wide screen #1

Open dulbrich24 opened 2 weeks ago

dulbrich24 commented 2 weeks ago

Hi! I use your website template and I like it very much. Thanks a lot for providing it! However, there is one issue which I cannot solve.

On a wide screen, the navigation bar cannot be seen completely. The rightmost menu items seem to vanish in the right border of the browser window (see attached screenshot). Screenshot

If I make the browser window narrower, everything is fine.

Do you maybe have an idea how to solve this problem?

Best!

mkenworthy commented 2 weeks ago

Hi, many thanks for the question - unfortunately, I've tried to fix this, but I don't know enough about the rules of CSS to find the bug. If you do work it out, please let me know!

gcyrillus commented 2 weeks ago

you might update tufte_navbar.css with the following CSS at the end of the file:

@media (min-width: 970px) {
  header.header {
    position: sticky;
    top: 0;
    background: white;
    display: flex;
    justify-content: space-between;
    padding: 0.5em;
    align-items: center;
  }
  header.header ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 0.5em;
  }
}

It will override the float sides effects and will keep the navbar in the flow but still at top. This is a quick fix and uses sticky and flex instead fixed and float.

dulbrich24 commented 2 weeks ago

Thank you, I like that!