Geek asks and answers

How to make suitable right navigation bar icons?

I wanted to keep some icons on the left and some on the right, and so I liked it

<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
    <ul class="nav navbar-nav">
       <li><a href="#">Link</a></li>
       <li><a href="#">More</a></li>
       <li><a href="#">Options</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
       <li class="active"><a href="#">Home</a></li>
             <li><a href="#">Options</a></li>

    </ul>
</div>

But the problem is mobile browsing. The icons on the right side descend and remain at the correct level, and increases throughout the size of the navigation bar. Is it possible to keep the navigation bars on the right on large screens, but on small screens all the icons will reduce

It is bootply

+3
source share
1 answer

using css media queries you can create your own class and use it instead of pull-right

@media (max-width: 500px) {
   .your_class {
       float: left;
   }
}

@media (min-width: 501px) {
   .your_class {
      float: right;
   }
}

and then just use your class

(...)
<ul class="nav navbar-nav your_class">
   <li class="active"><a href="#">Home</a></li>
         <li><a href="#">Options</a></li>

</ul>
(...)
0
source

More articles:


All Articles