移动导航文本

Question

我附上了我要修复的问题的屏幕截图。在移动设备上观看时，我使用了一些css来让我的徽标显示在导航中。但现在它看起来并不是很好，因为它在文本中也会显示 Job Spark 。

任何人都可以看到将“ Job Spark ”文字更改为“菜单”的方法。

另外还有一个注意事项....我在导航的最底部出现了一些白色像素，无法看到导致这种情况的原因。

www.jobspark.ca是我的网站。谢谢参观。

更新：尝试使用javascript更改此菜单文本。试过这个代码，但似乎没有用。

<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

在页面切换为移动格式之前，该文本根本不显示，因此您只需在HTML中更改它即可。如果找不到，则该元素位于第167行：

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

要使用Javascript更改文本，请尝试：

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

Answer 2

使用CSS，只需隐藏#mobile-navigation-title并重新定位隐藏在徽标元素后面的现有#mobile-navigation-label。

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

如果你不想使用!important（足够公平），你可以使用更具体的选择器，但为了简洁起见，你可以去。

废弃所有JavaScript，这是多余的。