::before css in replacing a text replace

tfink's Avatar


09 Jun, 2014 05:17 PM


I am currently trying to make our website responsive. You can see what I'm doing here<http://www.westshore.edu/responsive/p_students/index.html>. It's very rough at the moment. The part I'm working on right now is the top navigation in below 600px. The way it looks is exactly how I want it, the only issue is that the links are not clickable on the elements. Doing a inspect element, I see that using the ::before on the li#button_01_global_nav moves the link one list item down. The reason that I used a ::before element is because the navigation, and the logo, are set up with text-replaces. Do you guys know a way to make the link line back up with the right elements? Or know a better way to get rid of the text replaces at the smaller screen size and replace them with hyperlinked text?

Sorry if this is confusing,


  1. 1 Posted by Ryan Griffith on 08 Jul, 2014 01:50 PM

    Ryan Griffith's Avatar

    Hi Tim,

    My apologies for the lack of response, I was going over some older discussions and noticed this one was still open. Were you able to get your top links to work in under 600px?

    When testing, I noticed (in Chrome) the text itself is clickable, but the rest of the item is not. Generally, this can be resolved by making the <a> tags block level elements using display: block so their width is based on the parent element (ie 100%).

    Please feel free to let us know if you have any other questions.


  2. 2 Posted by tfink on 08 Jul, 2014 05:51 PM

    tfink's Avatar

    Hi Ryan,

    Thanks for the response. I actually scrapped the whole top navigation and built it from the ground up using CSS. It works perfectly now.



  3. 3 Posted by Ryan Griffith on 09 Jul, 2014 12:04 PM

    Ryan Griffith's Avatar

    Not a problem at all, Tim, thank you for following up. I am glad to hear you were able to rework the navigation.

    Have a great day!

  4. Ryan Griffith closed this discussion on 09 Jul, 2014 12:04 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac