In my header I have added three elemets. Arrow, fb icon , twitter icon.
Fiddle: Fiddle
Html:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="email-input navbar-left">
<div id="error-msg" class="help-block">
</div>
</div>
<p class="navbar-text navbar-right">
Login
<i class="fa fa-play"></i>
<i class="fa fa-facebook-square fa-2x"></i>
<i class="fa fa-twitter-square fa-2x"></i>
</p>
</div>
Problem with this is Login text and Arrow (>) dont aligns in middle of header.
I tried changing their top-bottom margin and padding but no change.
Any help is appreciated.
Add a class in css:
.text {
float: left;
margin: 4px;
}
then wrap your login text with arrow like this:
<span class="a">Login <i class="fa fa-play"></i></span>
Related
I have created FAB button on page that has scroll bar. My expectation is FAB button will be sticky on right down corner when page is getting scrolled. However, the button also scroll with page. This gives indication that z-index of FAB is at same level as other HTML tags but in CSS, I have specifically given z-index of FAB as 1000 (so I expect it to be higher than other element on page)
I have created fiddle to replicate issue. Can anyone please check and provide corrective action
https://jsfiddle.net/jh7mv590/2/
<div class="container">
<div class="row">
<div id="inbox">
<div class="fab btn-group show-on-hover dropup">
<div data-toggle="tooltip" data-placement="left" title="Compose" style="margin-left: 42px;">
<button type="button" class="btn btn-danger btn-io dropdown-toggle" data-toggle="dropdown">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x fab-backdrop"></i>
<i class="fa fa-plus fa-stack-1x fa-inverse fab-primary"></i>
<i class="fa fa-pencil fa-stack-1x fa-inverse fab-secondary"></i>
</span>
</button></div>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><i class="fa fa-coffee"></i></li>
<li><i class="fa fa-comments-o"></i></li>
<li><i class="fa fa-hand-o-up"></i></li>
<li><i class="fa fa-ticket"></i></li>
</ul>
</div>
</div>
</div>
A bit late, but position: fixed; is probably what you are looking for.
.show-on-hover {
position: fixed;
bottom: 50px;
right: 50px;
}
I'm trying to make a Bootstrap navbar that contains icons on the right and left with a centered title. I'm not able to get the text to center properly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</div>
<!-- Center the contents of this element in the navbar -->
<div class="navbar-header nav-element-center">
<span class="h4 ">Centered Title</span>
</div>
<div class="navbar-header pull-right">
<i class="fa fa-user-plus" aria-hidden="true"></i>
</div>
</div>
</div>
</nav>
test example: https://jsfiddle.net/goyosoyo/aw0219a4/
Note: I've given the divs a colorized border so that I could see what was happening.
What am I missing?
You can do it like this:
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-header pull-left">
<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
</div>
<div class="navbar-header pull-right">
<i class="fa fa-user-plus" aria-hidden="true"></i>
</div>
<!-- Center the contents of this element in the navbar -->
<div class="nav-element-center">
<span class="h4 ">Centered Title</span>
</div>
</div>
</div>
</nav>
CSS:
.nav-element-center {
text-align: center;
margin-top: 14px;
}
JSFIDDLE
Sorry for posting such a simple question, but I've tried everything I can think of. How can I select my font-awesome icons in css? I'm trying to make them into an inline list, and do some other styles, but am struggling to properly select them.
My HTML:
<div class="container">
<div class="row">
<div class="twelve columns">
<ul class="social-icons list-inline">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
I'm using skeleton and am thinking it's messing me up a bit with doing the selectors right as it's my first time using it.
Your HTML looks fine. I think you just forgot to include the Font Awesome stylesheet.
Then, if you want to modify a particular class like making the list inline, just do:
.fa-twitter {
font-size: 50px !important;
}
.list-inline li {
display: inline;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="twelve columns">
<ul class="social-icons list-inline">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
You can use selectors .fa-twitter, .fa-facebook, .fa-instagram, .fa-linkedin... here's the fiddle "https://jsfiddle.net/DTcHh/15521/"
"https://jsfiddle.net/DTcHh/15521/"
if you want to style all of your FA icons then the selector you want is .fa
.fa {display:inline;}
I want when user hover over Egipat that price is also hovered. Is that possible only with CSS or I need to use JQuery?
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5>
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5>
</div>
</div>
No, its not possible you can't go to parents in css, you can only go to next or to child elements
only if you check the hover of the first div in your html code
col-sm-10:hover > div > h5{
/*do something*/
}
As there is no parent selector in CSS, you can hover the parent itself + using adjacent sibling selectors:
.tabela:hover, /* "Egipat" container */
.tabela:hover + div + div /* "price" container */
{
color: red;
}
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5>
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5>
</div>
</div>
You can achieve this using the general sibling selector ~; You can read more about it here :
.tabela:hover {
background-color: #ccc;
}
.tabela:hover ~ .tabela3 {
background-color: #ccc;
}
<div class="col-sm-10 col-xs-12">
<div class="col-sm-6 col-xs-5 tabela">
<h5>Egipat 14.6-14.7</h5><--hover
</div>
<div class="col-sm-2 col-xs-4 tabela2">
<h5>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star blue"></i>
<i class="fa fa-star blue"></i>
</h5>
</div>
<div class="col-sm-3 col-xs-3 tabela3">
<h5>Price: 385 kn</h5><--hover
</div>
</div>
This gives you more flexibility than the adjacent sibling selector, since the ordering of the elements doesn't matter as much. You could stick another element after the tabela2 div, and still have it work.
I have a set of social media icons in one row that keep aligning to the left on wider breakpoints.
I would like them to be in the middle of the page when on wide breakpoint.
Also, on smaller breakpoints they turn into a vertical column and appear on top of each other. Is there a way to align them in one row horizontally and centrally on the page on smaller break points as well?
I have tried the following but its still not helping.
#media screen and (min-width: 320px) {
#social {
display: inline-block;
}
}
The following is the html that I see in the template:
<div id="social">
<div class="container">
<div class="row centered">
<div class="col-lg-2">
<a href="url" title="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="skype" target="_blank">
<i class="fa fa-skype"></i>
</a>
</div>
<div class="col-lg-2">
<a href="url" title="instagram" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</div>
</div><!-- --/row ---->
</div><!-- --/container ---->
</div>
Any suggestions? Thanks in advance!
Instead of aligning them in separate divs use unordered lists as follow:
HTML
<div id="social">
<div id="container">
<ul>
<li>
<a href="url" title="linkedin" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a href="url" title="twitter" target="_blank">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a href="url" title="skype" target="_blank">
<i class="fa fa-skype"></i>
</a>
</li>
<li>
<a href="url" title="instagram" target="_blank">
<i class="fa fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
And here is the CSS part
#social #container {
text-align: center;
}
#social #container ul {
float: left;
}
#social #container ul li {
float: left;
padding-left: 10px;
list-style-type: none;
}
And for making the image to be aligned horizontally even in a smaller screen you need to give a percentage width or height to not move down.