试图修复移动设备的导航栏 [英] Trying to fix my navigation bar for mobile devices
问题描述
我正在设计一个响应式网站，现在我有点问题。基本上，徽标设置在导航的中间位置，但当我尝试在移动设备上查看它或设置移动设备时，它看起来像这样。
http://i255.photobucket.com/albums/hh140/testament1234/responsive_zps3a22ab61.jpg
这是全屏显示的样子。
http： //s255.photobucket.com/user/testament1234/media/desktop_zps4c60a09c.jpg.html
如何在导航顶部设置徽标时在移动设备中查看。
这是我的代码，用于标记或HTML。
< div class =container>
< div id =nav-container>
< div class =六栏导航>
< ul>
< li>< a href =＃title =Home>主页< / a>< / li>
< li>< a href =＃title =Home> Project< / a>< / li>
< li>< a href =＃title =Home>博客< / a>< / li>
< / ul>
< / div>
< div class =four columns>
< h1>徽标< / h1>
< / div>
< div class =六栏导航>
< ul>
< li>< a href =＃title =图库>图库< / a>< / li>
< li>< a href =＃title =Gallery>关于< / a>< / li>
< li>< a href =＃title =图库>联系人< / a>< / li>
< / ul>
< / div>
< / div>
< / div>
这是我的CSS代码
＃nav-container {margin-top：20px;}
.navigation {text-align：center; background-color：＃D1673A;}
.navigation li {display：inline; }
.navigation a {text-decoration：none;颜色：黑色;显示：内联块; padding：20px 20px 20px}
.navigation a：hover {color：white;背景颜色：黑色}
我在构建自适应网站时使用框架框架。关于我的问题，我是否在媒体查询中设置了一些样式或更改标记？
看看这个更新的答案是否适合你： http ：//jsfiddle.net/panchroma/HBhNt/
HTML与您发布的内容完全相同，除了我添加了类徽标的徽标。
CSS 除了您发布的内容是： $ b
.navigation {
position：relative;
}
.logo {
height：60px;
}
@media仅限屏幕和（最大宽度：767px）{
.logo {
位置：绝对;
top：0;
剩下：0;
}
。导航{
top：60px;
}
.navigation ul li a {
width：100％;
}
}
=========== ===================
原始答案在下面
<一种选择是在导航容器的头部添加第二个徽标，并将其显示为仅用于移动设备，同时隐藏移动设备上的现有徽标。
请参阅下文，了解如何在HTML和CSS中执行此操作。
您可能需要使用@media设置来获得您想要的结果，例如您可能需要将徽标隐藏在导航中风景智能手机甚至平板电脑。
祝您好运！
HTML $ b
< div class =container>
< div id =nav-container>
< div class =four columns display-mobile>
< h1>徽标< / h1>
< / div>
< div class =六栏导航>
< ul>
< li>< a href =＃title =Home>主页< / a>< / li>
< li>< a href =＃title =Home> Project< / a>< / li>
< li>< a href =＃title =Home>博客< / a>< / li>
< / ul>
< / div>
< div class =四列hide-mobile>
< h1>徽标< / h1>
< / div>
< div class =六栏导航>
< ul>
< li>< a href =＃title =图库>图库< / a>< / li>
< li>< a href =＃title =Gallery>关于< / a>< / li>
< li>< a href =＃title =图库>联系人< / a>< / li>
< / ul>
< / div>
< / div>
< / div>
CSS
/ *为display-mobile和hide-mobile设置默认值* /
.display-mobile {
display：none;
}
.hide-mobile {
display：inherit;
}
/ *＃媒体查询
============================ ====================== * /
/ *小于标准960（设备和浏览器）* /
@只有媒体屏幕和（最大宽度：959px）{}
/ *将标准960（设备和浏览器）的平板肖像尺寸* /
@media仅屏幕和（最小宽度： （设备和浏览器）* /
@media仅屏幕和（最大宽度：767px）{}
$ b $ *移动横向大小到平板电脑纵向（设备和浏览器）* /
@media仅限屏幕和（最小宽度：480px）和（最大宽度：767px）{}
根据您网站CSS的具体情况，您可能需要使用！重要的以下* / b *移动纵向尺寸到移动横向尺寸（设备和浏览器）* /
/
@media屏幕和（最大宽度：479px）{
.display-mobile {
display：inherit;
}
.hide-mobile {
display：none;
}
}
I'm designing a responsive website and right now i have bit of a problem. Basically logo is set in the middle of the navigation but when i tried viewing it in mobile or set my browser for mobile it looks like this.
http://i255.photobucket.com/albums/hh140/testament1234/responsive_zps3a22ab61.jpg
This is what it looks like in full screen.
http://s255.photobucket.com/user/testament1234/media/desktop_zps4c60a09c.jpg.html
How do I set the logo on top of the navigation when viewed in a mobile device.
This is my code for the markup or HTML.
<div class="container">
<div id="nav-container">
<div class="six columns navigation">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Home">Project</a></li>
<li><a href="#" title="Home">Blog</a></li>
</ul>
</div>
<div class="four columns">
<h1>Logo</h1>
</div>
<div class="six columns navigation">
<ul>
<li><a href="#" title="Gallery">Gallery</a></li>
<li><a href="#" title="Gallery">About</a></li>
<li><a href="#" title="Gallery">Contact</a></li>
</ul>
</div>
</div>
</div>
And this is my code for my CSS
#nav-container{margin-top:20px;}
.navigation{text-align:center; background-color:#D1673A;}
.navigation li{display:inline; }
.navigation a{text-decoration:none; color:black; display:inline-block; padding:20px 20px 20px}
.navigation a:hover{color:white; background-color:black}
My using skeleton framework in building my responsive website. Regarding my question do i set some styling in the media queries or change my markup?
EDIT
See if this updated answer would work for you: http://jsfiddle.net/panchroma/HBhNt/
The HTML is exactly the same as what you posted, with the excetion that I added the class of logo to the logo div.
CSS in addition to what you posted is:
.navigation{
position:relative;
}
.logo{
height:60px;
}
@media only screen and (max-width: 767px) {
.logo{
position:absolute;
top:0;
left:0;
}
.navigation{
top:60px;
}
.navigation ul li a{
width:100%;
}
}
==============================
Original answer below
One option would be to add a second logo at the head of your nav container and have it display only for mobile, while at the same time hiding your existing logo on mobile.
See below for a draft of how you would do this in the HTML and CSS.
You will likely need to play with the the @media settings to get the results you want, for example you may need to hide the logo in the middle of your navigation for landscape smartphones or even tablets.
Good luck!
HTML
<div class="container">
<div id="nav-container">
<div class="four columns display-mobile">
<h1>Logo</h1>
</div>
<div class="six columns navigation">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Home">Project</a></li>
<li><a href="#" title="Home">Blog</a></li>
</ul>
</div>
<div class="four columns hide-mobile">
<h1>Logo</h1>
</div>
<div class="six columns navigation">
<ul>
<li><a href="#" title="Gallery">Gallery</a></li>
<li><a href="#" title="Gallery">About</a></li>
<li><a href="#" title="Gallery">Contact</a></li>
</ul>
</div>
</div>
</div>
CSS
/* set defaults for display-mobile and hide-mobile */
.display-mobile{
display:none;
}
.hide-mobile{
display:inherit;
}
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/* depending on the specifics of your site CSS, you may need to use !important with the following */
@media only screen and (max-width: 479px) {
.display-mobile{
display: inherit;
}
.hide-mobile{
display:none;
}
}
这篇关于试图修复移动设备的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http： //s255.photobucket.com/user/testament1234/media/desktop_zps4c60a09c.jpg.html](\"http://s255.photobucket.com/user/testament1234/media/desktop_zps4c60a09c.jpg.html\"){kind=link}
