1) I tested this on a laptop running Chrome and the navigation links were not clickable. Is there a reason this might be happening? It works fine on my desktop.
2) On smaller screen sizes I'm getting text over lapping on itself. The title block is bumping off of the social block, completely ignoring the presence of the subtitle and navigation links. If you shrink the window and look at the nav, you should see what I'm talking about pretty obviously.
1. Hmm. I have tested with iPad for checking the mobile navigation and it is working fine. I then checked it on my laptop using Chrome and found the issue of text overlapping as your question #2.
2. It is because the logo, tagline and the copyright text are taking much space so the menu is overlapped by the surrounded elements. Please try to reduce the size of each element to have more space. Or, you can use custom CSS like this to adjust it:
In case you would like to use custom CSS for other elements, I would recommend Developer Tools on Chrome or Firebug on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.
Hello,
I'm running into a few issues with a recent install at http://blueridgeiron.com/
1) I tested this on a laptop running Chrome and the navigation links were not clickable. Is there a reason this might be happening? It works fine on my desktop.
2) On smaller screen sizes I'm getting text over lapping on itself. The title block is bumping off of the social block, completely ignoring the presence of the subtitle and navigation links. If you shrink the window and look at the nav, you should see what I'm talking about pretty obviously.
thanks,
John
Hi John!
1. Hmm. I have tested with iPad for checking the mobile navigation and it is working fine. I then checked it on my laptop using Chrome and found the issue of text overlapping as your question #2.
2. It is because the logo, tagline and the copyright text are taking much space so the menu is overlapped by the surrounded elements. Please try to reduce the size of each element to have more space. Or, you can use custom CSS like this to adjust it:
#side-container { padding-top: 70px; } #side-footer-wrapper { bottom: 70px; } #logo-wrapper { margin-bottom: 50px; } @media screen and (max-height: 800px) { #logo-wrapper h1 { font-size: 20px; } } @media screen and (max-height: 600px) { #side-container { padding: 30px 40px; } #side-footer-wrapper { bottom: 30px; } } @media only screen and (max-width: 1367px) { #logo-wrapper h1 { font-size: 20px; } }
In case you would like to use custom CSS for other elements, I would recommend Developer Tools on Chrome or Firebug on Firefox to inspect the elements on the page. Then you can know which CSS selector to adjust.
Regards,
Paul