I have navigation in div size col-md-4 , and I have 6 tabs, I can't to aline all tabs.
I can aline when I change font-size of text tabs, thats not good solution for me.
I tried to set width for each tabs, but not working.
How can I set width for some tabs to be small but second to be bigger.
Also i have padding when I hover on the end of navbar
http://i.imgur.com/9Px4qqk.png
<nav class="row">
<ul class="nav nav-tabs">
<li class="tab1"> <span class="glyphicon glyphicon-user"></span> Name    <span class="glyphicon glyphicon-chevron-down"></span> </li>
<li><span class="glyphicon glyphicon-flag"></span>Text Link </li>
<li> <span class="glyphicon glyphicon-envelope"></span> Message </li>
<li> <span class="glyphicon glyphicon-oil"></span>10 </li>
<li class="tab5"><span class="glyphicon glyphicon-asterisk"></span> </li>
<li><span class="glyphicon glyphicon-home"></span> </li>
</ul>
</div>
CSS
.nav-tabs li .tab5{
width:4%;
}
Your selector is wrong, you have to do this:
.nav-tabs li.tab5 {
width: 4%;
}
The class .tab5 is on the li tag, therefore you have to connect them.
Working Example
UPDATE
If you want to fit all in one row, try playing with the padding, like this:
.nav>li>a {
padding: 10px 3px;
}
Updated Example
Related
I started very recently to study/practicing with HTML, typescript, CSS and angular5, and I'm developing a test app to try what I've learned so far. But I am a little bit confused on how I can solve this problem:
Basically I need to set the color of the text inside of a element (the color of the dropdown button text must be different from the one the menu text has).
<ul class="nav navbar-nav ">
<li class="dropdown" appDropdown>
drop1<span class="caret"></span>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
I want "drop1" text in white, while the "menu" element text can be of the default color.
Now if I put in the CSS this:
ul li a {
color: white;
}
Each text is colored in white. Now I know I can set directly the style property in HTML tag to override the style from CSS, but since I have several dropdown I would like to set everything in the CSS. How can I do it?
Try to use > css selector using class like
ul.navbar-nav>li>a
It will selects all <a> elements where the parent is a .navbar-nav class
Stack Snippet
ul.navbar-nav>li>a {
color: white;
background: red;
}
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
Another solution is to use :not pseudo class
Stack Snippet
ul:not(.dropdown-menu)>li>a {
color: white;
background: red;
}
<ul class="nav navbar-nav">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle" role="button">
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
Referece Link
child-selector
:not() selector
You can try this simple idea:
<ul class="nav navbar-nav ">
<li class="dropdown" appDropdown>
<a href="#" class="dropdown-toggle white-text" role="button" >
drop1
<span class="caret">
</span>
</a>
<ul class="dropdown-menu">
<li>menu1</li>
<li>menu2</li>
</ul>
</li>
</ul>
With this CSS
.white-text {
color: white!important;
}
That means you can utilise this class throughout your site if you need the text to be white
edit
If you're worried about using !important inside the class you can just remove that, but just ensure that the class is the last entry in the class stack, for example:
<a href="#" class="dropdown-toggle white-text" role="button" >
rather than
<a href="#" class="white-text dropdown-toggle" role="button" >
Target the class of your element.
.dropdown-toggle {
color: black; // all your toggle menu (main menu) will have a black color;
}
.dropdown-menu a {
color: white; // all your dropdown menu (sub menu) will have a white color;
}
Don't use !important;
You myst either use a CSS file or use the style="" element inside your HTML tag.
i.e.:
First way: <button style="color: red; background-color: green;">Log in</button>
Second way:
HTML file:
<button class="mybtn">Log in</button>
CSS file:
.mybtn {
color: red;
background-color: green;
}
You work like this with all tags and all elements you that want to style.
This question already has answers here:
Center a flex item in a row when there are a different number of items on each side
(5 answers)
Closed 5 years ago.
JSFiddle
The point is to make left ul with max-width align left, center block without specified width be always centered (content of this ul may vary) and right ul be always floated to right with max-width in my top navbar.
The main problem is that when I specify widths for ul's flex properties dont't work as I expect: 3rd ul must be aligned to right while the 2nd should take as much space as posible in one line. It's ok with alignment but 3rd ul takes too much space (more than needed) and visually isn't floated to right. If a specify it's width to fix this center aligmnment of 2nd ul won't work. All elements have different width, as far as I know flex can handle only elements with equal width.
However, I guess this is a right bahaviour for flex.
HTML
<nav class="nav_wrapper" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li data-item-id="nav-profile-menu">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li data-item-id="nav-profile-menu">
<a class="summary" data-toggle="tooltip" title="" data-placement="bottom" data-original-title="usd">
<span class="summary-item">USD</span>
<span>
<i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
99 <span class="small-text hidden-sm hidden-xs">-0,0474</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu">
<a class="summary">
<span class="summary-item">Brent</span>
<span>
<i class="fa fa-arrow-circle-o-down red hidden-sm hidden-xs" aria-hidden="true"></i>
99 <span class="small-text hidden-sm hidden-xs">-0,86%</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu" class="hidden-xs">
<a class="summary">
<span class="summary-item">Ni</span>
<span>
<i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
105,00 <span class="small-text hidden-sm hidden-xs">1,29%</span>
</span>
</a>
</li>
<li data-item-id="nav-profile-menu" class="hidden-xs">
<a class="summary">
<span class="summary-item">Al</span>
<span>
<i class="fa fa-arrow-circle-o-up green hidden-sm hidden-xs" aria-hidden="true"></i>
2131,50 <span class="small-text hidden-sm hidden-xs">0,35%</span>
</span>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-auth">
<li data-item-id="nav-profile-menu">
<span>reg</span> <i class="fa fa-user-plus"></i><span></span>
</li>
<li data-item-id="nav-profile-menu" data-toggle="tooltip" title="" data-placement="bottom">
<span>auth</span> <i class="fa fa-sign-in"></i>
</li>
</ul></nav>
why you don't use flex + absolute and u use float?
Much cleaner and no need for clear after floats.
.nav_wrapper {
position: relative;
display: flex;
justify-content: center;
}
.navbar-left {
position: absolute;
left: 0;
}
.navbar-auth {
position: absolute;
right: 0;
}
and you can remove the width of ul
I'm looking to add a bit of spacing between my username and logout button as well as my login and signup button.
I've tried adding spaces (doesn't do anything) and I've also tried using list items and inserting an empty paragraph tag. What can I do to add two or three horizontal spaces?
<ul class="nav navbar-nav navbar-right">
<div style="margin-right: 10px; margin-left: 15px; margin-top: 15px; margin-bottom: 5px;" class="container-fluid">
{% if session.logged_in %}
Welcome {{session['username']}}
<span class="glyphicon glyphicon-log-out"></span> Logout
{% else %}
<span class="glyphicon glyphicon-log-in"></span> Login
<span class="glyphicon glyphicon-pencil"></span> Sign up
{% endif %}
</div>
</ul>
These items are wrapped in
<div id="navbar" class="collapse navbar-collapse">
along with my other links on the left side.
Here's a picture of what I have now:
Current
To achieve expected result , use below two options
Option1:
Use unordered list tags ul , li
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
Option 2:
Use padding for the anchor tag with the existing code
<div class="row nav navbar-nav navbar-right test">
<span class="glyphicon glyphicon-user"></span> Sign Up<span class="glyphicon glyphicon-log-in"></span> Login
</div>
CSS:
.test a{
padding:10px;
}
For comparison, I have used both options in one codepen, please check it once
https://codepen.io/nagasai/pen/aypdXZ
I think you should apply a display: inline-block; or display: block; to <a></a> elements and then you can set the margins. That should do the work.
Or you can use <div></div> as their parent tag and then apply the margins to them. Just like that:
<div class="sample"><a></a></div>
And CSS:
sample {display:
inline-block;
}
I am using Twitter Breadcrumb in my html page. But the breadcrumb keeps appearing in a new line. How can I make it come next to the glyphicon?
This is the div section:
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<ul class="breadcrumb list-unstyled">
<li ng-repeat="crumb in breadcrumb track by $index">
{{crumb}}
</li>
</ul>
<hr>
<p>
<ul ng-repeat="node in nodes" class="list-unstyled">
<li ng-repeat="value in node">{{value}}</li>
</ul>
</p>
</div>
How it looks now:
There are unwanted spaces in the top and bottom. But I want the list to appear next to the glyphicon as if they are in a new line.
Just add some CSS inline. <ul> elements are automatically block-level elements. I believe that Bootstrap automatically adds glyphicons to be display: inline-block as well so it can apply with and margins to the icon.
Fiddle for you
span.glyphicon-folder-close,
ul.breadcrumb {
display: inline;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
.....
.....
Addition:
Here's another way of doing it. Wrap the span and ul in it's own separate container so they float together. You have to remove the padding for the ul.breadcrumb as it's auto applied.
Add containers fiddle
ul.breadcrumb {
padding: 0;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<div class="col-xs-1">
<span class="glyphicon glyphicon-folder-close"></span>
</div>
<div class="col-xs-11">
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
</div>
....
....
Addition #3 (worked best for OP)
Here's an even better way. Just use psuedo selector for the breadcrumb and remove the span altogether. Also remove the <hr> tag and add border to the breadcrumb itself
Fiddle w/ psuedo
ul.breadcrumb {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
ul.breadcrumb:before {
position: absolute;
content: '\e117';
font-family: 'Glyphicons Halflings';
left: -10px;
top: 8px;
width: 20px;
height: 20px;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
....
....
It may be due to the parent div width is not enough for show all.
I'm working with some custom bootstrap css for a collapsible navbar (https://github.com/IronSummitMedia/startbootstrap/tree/master/templates/grayscale). I tried adding a search bar up top, and I want the search bar to be in line with the icon, with the links underneath: 174.37.193.115/chrome/
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">
<i class="fa fa-bolt fa-lg"></i>
</a>
<div class="input-group col-lg-6 col-lg-offset-0">
<input type="text" class="form-control" placeholder="Look for people, groups, and anything">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
News
</li>
<li>
Profile
</li>
<li class="dropdown">
Something
<ul class="dropdown-menu">
<li>One
</li>
<li>Two
</li>
<li>Three
</li>
</ul>
</li>
<li>
Bamn
</li>
<li>
Pewpew
</li>
<li>
Vroom
</li>
<li>
Wheeeew
</li>
<li>
Bzzzt
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Unfortunately, I can't seem to get the search bar to go into the right place, and something really funky seems to be going on. In general, I'm also confused as to which elements can stack in line with each other (I can't seem to force it via col).
Any help in getting the search bar in line with the bolt, and links underneath would be appreciated! An explanation of how elements stack in line would be an added bonus!
To get the nav links under the above stuff:
.nav>li>a {
padding: 10px 30px 10px 0;
}
To make hoverstates look nicer, perhaps this is better:
.nav>li>a {
padding: 10px 0;
margin-right: 30px;
}
Or, if you just want to compensate for the padding offset, you can move the whole navbar to the left:
.navbar-nav {
margin-left: -15px;
}
To get the search bar inline with the logo:
.col-lg-6 {
margin-top: 12px;
}
Just add these rules to your own css file that you will call after the bootstrap ones. You might also to similar things for other responsive variations (or switch to percents).