[英]How to make fixed-top bootstrap menu background sticky only to right or left?
I want to make fixed top menu in bootstrap, which is sticky only to right in browser. 我想在引导程序中固定顶部菜单,该菜单仅在浏览器中处于粘滞状态。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" title="website" rel="home" class="navbar-brand">Logo</a>
</div>
<div class="navbar-collapse collapse"><ul id="main-menu" class="nav navbar-nav"><li id="menu-item-421" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-421"><a href="#">History</a></li>
<li id="menu-item-410" class=" menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-408 current_page_item active menu-item-410 active "><a href="#">Offer</a></li>
<li id="menu-item-404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-404"><a href="#">About</a></li>
<li id="menu-item-28" class="homePage menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="#">HOME PAGE</a></li>
<li id="menu-item-21" class="info-contact menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="#">Contact</a></li>
<li id="menu-item-23" class="info-help menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="#">Help</a></li>
<li id="menu-item-333" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-333"><a href="#">Order</a></li>
</ul></div> </div><!-- .col-md-12 -->
</div><!-- row -->
</div><!-- container -->
</nav>
I did it with class .container-fluid on the navigation, but when I'm change window size, navigation looks bad. 我在导航中使用类.container-fluid做到了,但是当我更改窗口大小时,导航看起来很糟糕。 How I can do that navigation items will be in .container like a content, and navigation background will be sticky to te right ?
我如何才能使导航项像内容一样位于.container中,并且导航背景会很粘滞?
My menu looks the same code like this: http://codepen.io/anon/pen/raeXxo 我的菜单看起来像这样的代码: http : //codepen.io/anon/pen/raeXxo
I think you're looking for the navbar-right
class, if I understand your question correctly. 如果我正确理解您的问题,我认为您正在寻找的是
navbar-right
类。 Edit your ul
element to the following: 将您的
ul
元素编辑为以下内容:
<ul id="main-menu" class="nav navbar-nav navbar-right">
The menu should now be fixed to the right side of the screen. 现在,菜单应该固定在屏幕的右侧。
If I correctly understand and you want to create menu which background is sticky to the right side of browser edge and have left side sticky to the parent container you should add sibling to menu , set parent position to relative, new created should have position: absolute and after that if you set top: 0 and right: 0 - (width of li) and proper width in %, and height of the to the element it will cover all space between and right browser edge. 如果我正确理解并且要创建菜单,该菜单的背景在浏览器边缘的右侧是粘滞的,而左侧在父容器上是粘滞的,则应将同级添加到menu,将父位置设置为相对,新创建的位置应具有position:absolute之后,如果您设置top:0和right:0-(li的宽度),并以%为单位设置适当的宽度,以及元素的高度,它将覆盖浏览器右边缘之间的所有空间。 I think it should resolve your problem.
我认为这应该可以解决您的问题。 Good Luck :)
祝好运 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.