Top menu overlapping site title in small screens

  • Resolved chriscarman

    (@chriscarman)


    5 years ago

    Hello! I run our school district’s website and I’m having a strange layout issue with Twenty Fourteen’s top menu when our site is displayed on mobile devices. For some reason, our left-most (first) Top Menu item is overlapping our site title, which is the name of our district. I created a custom CSS entry for this item so that it has a red background, but we were having the same issue before when the first menu item was different – I just didn’t bother to try to fix it then because it had a dark background and no one really noticed. Now that the background of the first Top Menu item is red, the layout issue is very obvious. Here’s a screenshot:

    https://snipboard.io/Z2MkAa.jpg

    I’ve played around with display: block; but I’m pretty bad at CSS and layout (I’m more of a PHP/SQL/server admin guy), so I haven’t been able to fix it. Any help would be greatly appreciated! We need to pass this bond issue so that we get air conditioning that works. ??
    -Chris

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael

    (@alchymyth)

    try:

    @media screen and (max-width: 783px) {
  .primary-navigation ul li:first-child
  { clear: left; }
}

    (tested in firefox and chrome with ‘inspect element’)

    Thread Starter chriscarman

    (@chriscarman)

    That worked, thank you very much for the quick solution!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Top menu overlapping site title in small screens’ is closed to new replies.