Web site two-line top navbar obscures content

I'm building a Web site consisting of just a few pages using RMarkdown. However, the top fixed navbar element obscures the content if it expands to more than one line, which it does if the browser window width is between 768px and about 1400px.

Is it possible to either:

  1. Keep the drop-down navbar menu used for small devices until the window is wide enough for just one line of site navigation bar? or:

  2. Have the site navigation menu appear above or as part of the page navigation menu, which always appears on the left?

And if so, how?

Here's the _site.yml:

name: "Introduction To R"
navbar:
#  title: "An Introduction To R"
  left:
    - text: "Home"
      href: index.html
    - text: "How To Use This Series"
      href: How.html
    - text: "Part 1: R For Data Science"
      href: Part1_R_Data_Science.html
    - text: "Part 2: R Programming"
      href: Part2_R_Programming.html
    - text: "R Learning Resources"
      href: R_Learning_Resources.html
output:
  html_document:
    theme: united
    highlight: tango
    toc: yes
    toc_depth: 6
    toc_float:
      collapsed: yes
      smooth_scroll: yes
    css: styles/intro.css
    df_print: paged
  word_document:
    toc: yes
    toc_depth: 6
  pdf_document:
    toc: yes
    toc_depth: 6
editor_options: 
    chunk_output_type: inline

The site as it is now is viewable here.

I had a look at the site (great content by the way!) and I'm not seeing the issue. My guess is that you found a solution in the intervening months since posting the question here. Would you mind sharing the solution if others had run into this issue?

Hi Rich,

Thanks for the review! I didn't find a solution, but adopted the workaround of condensing the titles of the sections so the top navbar wouldn't go over two lines. I suspect some CSS modifications may work.

Stuart

1 Like