html - 对齐导航中的 Logo 并粘贴标题？

Question

如何垂直对齐 Logo 旁边的导航？但是logo和nav的响应式设计不会输。 My site

像这样:

这是我当前导航的演示

Codepen

Logo 的 CSS

 #masthead .site-branding{ 
float: left; 
padding: 15px 0;
}
#masthead .site-branding img{
height: auto !important;
width: auto !important;
display: block;
}

Answer 1

您发送的图片显示您的导航位置正确，但响应大小有问题。是吗？

j查询:

$(document).ready(function(){
   window_height = $(window).height();
   if(window_height<500) {   //you should adjust that the function run in an appropriate size of window
       //here you can write that your logo and navigation div doesn't have any float so that each of them place in a line. for example:
       $("#logo").css("float" , "none");
       $("#navigation").css("float" , "none");
   }
});

或者 css:

@media screen and (max-width: 800px) {  */ when the size of screen got smaller than 800px*/
    */your css*/
}

并注意将此标记添加到您的头部:

<meta name="viewport" content="width=device-width, initial-scale=1.0">