html - Bootstrap (data toggle) drop down menu on navbar not displaying as a block -
for reason when click pancake button, have been able menu display block using z-index on list of elements of menu. "block" not entire navbar rather section lists links other pages , ma not sure why. have tried drill css , use block elements no luck.
here html navbar:
<nav class="navbar navbar-default"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/hug/">hug tree</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav pull-right"> <li><a href="{% url 'about' %}">about</a></li> {% if user.is_authenticated %} <li><a href="{% url 'profile' %}">profile</a></li> <li><a href="{% url 'favourites' %}" class="fav">f<span style="color:#e48666">a</span>vourites</a></li> <li><a href="{% url 'logout' %}">logout</a></li> {% else %} <li><a href="{% url 'register' %}">register</a></li> <li><a href="{% url 'login' %}">login</a></li> {% endif %} </ul> </div> </nav>
and css:
.navbar-default { background-color: #fff; border-color: #e9e7b6; margin: 25px; height: 100px; } .navbar-default .navbar-text { font-family: 'raleway', sans-serif; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { font-family: 'raleway', sans-serif; color: #5aa47d; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { font-family: 'raleway', sans-serif; color: #5aa47d; } .navbar-default .navbar-link { font-family: 'raleway', sans-serif; color: #5c606b; } .navbar-default .navbar-link:hover { font-family: 'raleway', sans-serif; color: #5aa47d; } .navbar-toggle { margin-top: 33px; } ul.nav.navbar-nav.pull-right{ z-index: 2; position: relative; } .nav.navbar-nav.pull-right li{ display: block; z-index: 1; background-color: #fff; } /*** navbar - icon ***/ img.brand { display: block; margin-left: auto; margin-right: auto; } /*** navbar - brand/logo ***/ .navbar-default .navbar-brand{ font-family: 'oswald', sans-serif; float: left; color: #426085; padding: 35px 15px 0px 25px; height: 50px; font-size: 30px; line-height: 25px } .navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{ color: #5aa47d; } /*** navbar - list ***/ .navbar-default .navbar-nav > li > { font-family: 'raleway', sans-serif; font-size: 16px; color: #5c606b; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:active { font-family: 'raleway', sans-serif; color: #5aa47d; } .navbar-nav>li>a { padding-top: 39px; padding-right: 20px; }
any insight great.
thanks.
i think you're trying jsfiddle
pull-right
deprecated of v3.1.0 , replaced navbar-right
.
Comments
Post a Comment