I just created a Materialize CSS navbar and I placed some icons to the text.
I tried to change the priority of the code but no luck.
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper grey darken-4">
<img src="logo.png" width="315" height="70">
<ul class="right hide-on-med-and-down">
<li><i class="small material-icons">home</i>Homepage</li>
<li><i class="small material-icons">store</i>Marketplace</li>
</ul>
</div>
</nav>
</div>
The main problem is that the text is floating off the nav bar:
https://i.gyazo.com/2130fead13cc9e03e8133b8a7466e9b2.png
The icon is pushing out the content i see.
nav > div.nav-wrapper > div > ul > li > a {
display: flex;
}
This is a dirty fix hope it helps, maybe theres better css for it but this works, you can also add some margin to the icon maybe.
nav > div.nav-wrapper > div > ul > li > a > i {
margin-right: 10px;
}
Related
I want to centralize the tab's items and the style to be the same, but I cannot modify my css currently.
I want the tab element to takes 100% width(to be stretched) and the li elements to be at the center of the tab element.
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women</li>
<li>Men</li>
</ul>
</div>
</div>
Thanks,
B.
The navbar links are set to float: left by default, you need to reset it to float: none so that text-align: center will have the necessary effect.
Also display: block on the list elements make them stack vertically. Set them to display: inline-block
.centered-tabs {
text-align: center;
}
.centered-tabs .nav-tabs > li {
float: none !important; /* Avoid !important, added for SO snippet priority */
}
.centered-tabs .nav > li {
display: inline-block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-lg-12 centered-tabs">
<ul class="nav nav-tabs">
<li class="active">Women
</li>
<li>Men
</li>
</ul>
</div>
</div>
I am going through a CSS example, and it has code like this:
.sa-list li label > span,
.sa-list li h3 > span,
.sa-list li h4 > span,
.sa-list li a > div{
position:relative;
display:table-cell;
vertical-align:middle;
padding:10px 20px;
}
Can someone explain what's the relationship between say li, a and div and which style goes where?
These rules all style a span that is direct child of a label, h3 and h4 and a div that is a direct child of an a tag, all of which are a descendant of an li that is also a descendant of an elements with the class of sa-list.
For instance:
<ul class="sa-list">
<li>
<label>
<span><!-- this span is styled --></span>
</label>
</li>
</ul>
<div class="sa-list">
<ul>
<li>
<div>
<h4>
<span><!-- this span is also styled --></span>
</h4>
</div>
</li>
</ul>
</div>
<ul class="sa-list">
<li>
<a>
<div><!-- this div is styled --></div>
<div><!-- as is this div --></div>
<section>
<div><!-- this div is not, b/c it is not a direct child of the a --></div>
</section>
</a>
</li>
</ul>
I want to align li values right most of the screen. but it does not appear.
Codepan: http://codepen.io/
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div>
</div>
text-align:right; or align="right" does not help
Try using the Bootstrap pull-right class inside of your ordered list tags like so:
<ul class="pull-right">The text you want aligned to the right</ul>
You need to apply the text-align: right to the anchor tags inside the list.
CodePen
CSS
.navbar-right li a {
text-align: right;
}
Add text-align: right; to the ul instead of the li
I have this site. As you can see, the menu bar is below the social networks buttons. Since the container div of social network buttons is set as display: inline-block and the navbar is set as display: inline, I expected both elements were in the same line like here, but no.. why?
<header class="tab-content cabecera">
<a class="logo pull-left" href="/">
<img src="images/logo1.png" width="250px" alt="ziiweb"/>
</a>
<div class="social">
<div class="fb-like" data-href="http://www.facebook.com/!!!" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>
<g:plusone align="middle"></g:plusone>
</div>
<nav style="display: inline">
<ul class="nav nav-pills">
<li class="active">Inicio</li>
<li>Qué ofrecemos</li>
<li>Trabajos</li>
<li>Contacto</li>
</ul>
</nav>
</header>
.social is set to display: block;
If you want both your <nav> and .social elements to appear next to one another, set them both to display: inline-block.
Or you may use float:left; to make whole nav element to be in same line.
Make a div and keep both .social and nav in it. Use display: inline-block; in that
Also use float: left; in .social
<div class="outer" style="display: inline-block; width: 700px;">
<div class="social" style="float: left;">...</div>
<nav>...</nav>
</div>
Other way is what André Dion answered.
I .social is set to display: inline-block; then set nav to display: inline-block; too.
Both elements nav and should have "vertical-align:top;", in default is vertical centred.
I'm creating a content slider with ul and li like:
<div id="tabs">
<ul>
<li id="left">content</li>
<li id="left">content</li>
<li id="left">content</li>
<li id="right">content</li>
<li id="right">content</li>
<li id="right">content</li>
</ul>
<ul id="content_show">
<li>content show</li>
....ect
</ul>
</div>
Now I want to show 3 contents on the left and 3 on the right and slider between of both.
I make to show all li id=(left and right) on the left and slider on the right but I cannot set li id="right" on the right listed.
How can display id="right" on the right of slider?
Like:
text text
text CONTENTSLIDER text
text text
you have to use style's or css file, and give the div tabs width, abd each li use float style
try to use class="left" and class="right"
#tabs { width:600px;} //example
.left { float:left;}
.right { float:right;}
I'm not sure I get what you really want but maybe you can use the float:right attribute for all the li you want to go to the right!