Mobile Navigation Text

Question

I have attached a screenshot of the issue I am trying to fix. I used some css to get my logo to show up in the navigation while viewing in mobile. But now it doesn't look very good because it says Job Spark below in text as well.

Can anyone see a way to change the "Job Spark" text to "Menu".

Also on a side note.... I am getting a bit of white pixels showing up on the very bottom of the navigation and cant see what is causing this.

www.jobspark.ca is my website. Thanks for taking a look.

UPDATE: Trying to change this menu text with javascript. Tried this code out but didn't seem to work.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script type="text/javascript">Y.one("#mobile-navigation-title").set("text", "Menu");</script>

Answer 1

Using CSS, just hide #mobile-navigation-title and reposition the existing #mobile-navigation-label which is hidden behind the logo element.

#mobile-navigation-title { display: none !important; }
#mobile-navigation-label { position: static !important; }

You can use more specific selectors if you'd rather not use !important (fair enough) but for the sake of brevity, there you go.

Scrap all that JavaScript too, it's redundant.

Answer 2

That text isn't displayed at all until the page switches to a mobile format, so all you have to do is change it in the HTML. If you can't find it, the element is around line 167:

<nav id="mobile-navigation">
  <span id="mobile-navigation-title">Job Spark</span>
  <span id="mobile-navigation-label"></span>
  ...

To change the text with Javascript, try:

<script type="text/javascript">
    Y.on("domready", function() {
        Y.one("#mobile-navigation-title").set("text", "Menu");
    });
</script>