将徽标与导航链接对齐并将徽标放在链接上方的响应模式中

Question

我试图将徽标与几个导航链接对齐，其中大多数网站的左侧都有徽标，正确的（就是我想要达到的目标）。

而且我有一个媒体查询，使标题徽标显示在导航链接上方。

但是它似乎没有工作。

我确实有一个外部JQuery，当浏览器点击宽度为600px时运行网站的响应部分。

我需要在两个方面有所帮助：

1. 对齐标识在参数与导航链接。徽标标记为JJ，第二个J倒置。
2. 当浏览器的宽度达到720px时，将徽标放置在导航链接的上方并将其与居中和导航链接对齐。

Code sample:http://jsfiddle.net/ERJp5/3/

谢谢。

Answer 1

您的“特殊框”上的浮动过渡边框将元素向下推。我添加了“margin-top：-13px;”它看起来好多了。

/*----Special box----*/ 
header nav ul li.menu-item-444 a { 
/*background: none repeat scroll 0 0 #34495e; 
border-radius: 15px;*/ 
font-family: Orena, Sans-Serif; 
font-size:25px; 
float: left; 
padding: 13px; 
margin-top: -13px; 
color:white; 
/*transition: color 0.25s ease-in;*/ 
} 

检查出来： http://jsfiddle.net/juhc4/

编辑：

这里有一个（稍微哈克），您就可以根据屏幕宽度移动您的标志：

设置标志，类大屏幕和类小屏幕之一：

一个DIV在ul面前，因为你希望它浮高于一切，类smallscreen：

<div id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444 smallscreen"> 
    <a href="index.html" title="Home">J<span class="mirror">J</span></a></div> 

和你li元素，类bigscreen：

<li id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444 bigscreen"> 
      <a href="index.html" title="Home">J<span class="mirror">J</span></a></li> 

接下来，我们建立@media在CSS中查询，打开一个徽标，另一个取决于屏幕的宽度：

@media screen and (max-width: 720px){ 
.bigscreen { 
    display:none !important; 
} 

} 

@media screen and (min-width: 721px){ 

.smallscreen { 
    display:none !important; 
} 
} 

希望这有助于！

http://jsfiddle.net/ERJp5/1/