I have two <ul> tags with links to pages and links to social icons. How ever they are not aligned when I created second <ul> tag to have social icons like this:
Here's my site: https://bgrnature.herokuapp.com/#/contact-us
<footer>
<div id="footer">
<div class="container">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about-us">About Us</a></li>
<li><a ui-sref="faqs">FAQS</a></li>
<li><a ui-sref="contact-us">Contact us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right footer-icons">
<li>Copyright © 2016 </li>
<li><i class="fa fa-facebook fa-inverse" aria-hidden="true"></i></li>
<li><i class="fa fa-youtube fa-inverse" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-inverse" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</footer>
Applying padding-bottom or margin-top is not effective at all. How do I fix this?
Please put the i inside a and also give .social class some margin.
HTML
<ul class="nav navbar-nav navbar-right footer-icons">
<li>Copyright © 2016 </li>
<li><i class="fa fa-facebook fa-inverse" aria-hidden="true"></i></li>
<li><i class="fa fa-youtube fa-inverse" aria-hidden="true"></i></li>
<li><i class="fa fa-linkedin fa-inverse" aria-hidden="true"></i></li>
</ul>
CSS
.social{
margin-top:10px;
}
Create class for the li's of the social icons and give margin-top:15px
.social{
margin-top:15px;
}
Codepen-http://codepen.io/nagasai/pen/NrpGzL
Related
How would I go about modifying the CSS to delete the bullet I got for every item menu of the navbar Bootstrap 4/Jhipster? Now there's both the bullet and the picture <i class="fa fa-home" aria-hidden="true"></i> and I want to delete the bullet. This is the code snippet:
<nav>
<div class="jh-logo-container float-left">
<a class="jh-navbar-toggler d-lg-none float-right" href="javascript:void(0);" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleNavbar()">
<!--<i class="fa fa-bars"></i>-->
</a>
</div>
<div id="navbarResponsive" [ngSwitch]="isAuthenticated()">
<ul>
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" routerLink="/" (click)="collapseNavbar()">
<span>
<i class="fa fa-home" aria-hidden="true"></i>
<span jhiTranslate="global.menu.home">Home</span>
</span>
</a>
</li>
...
</ul>
</div>
</nav>
For Font Awesome you should use its built in way to do lists with icons.
Example:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Check the docs for more info.
I have hideable sidebar with nav menu. Everything's use flexbox and everything's alright except expandable menu (second from above). Menu crop in the beginning in Firefox and crossing with social icons in Chromium? How to fix this? I use PostCSS's cssnext and cssfixes.
Full code: https://codepen.io/arch2/pen/dNgKxq
<input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" />
<div class="sidebar" id="sidebar">
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation_item">ГЛАВНАЯ</li>
<li class="navigation_item dropdown__toggle">ТЕКСТЫ
<ul class="navigation__list dropdown">
<li class="navigation_item">***</li>
<li class="navigation_item">САГА О РОНИНЕ</li>
<li class="navigation_item">МАЛО</li>
<li class="navigation_item">КЛЮВИКИ НОТ</li>
<li class="navigation_item">В КЛЮВИКАХ</li>
<li class="navigation_item">КРАСНАЯ ПЕСНЯ</li>
<li class="navigation_item">ЛЕС</li>
<li class="navigation_item">ЧЕРНОКНИЖНИЦА</li>
<li class="navigation_item">ТЕРЕМ</li>
<li class="navigation_item">ГЕРБАРИЙ</li>
<li class="navigation_item">ВНУТРИ ГЕРБАРИЯ</li>
<li class="navigation_item">ТЕПЛО БЕЗДОННОЕ</li>
<li class="navigation_item">МАЛЬЧИК-БАТИСКАФ</li>
<li class="navigation_item">ИГРУШКИ</li>
</ul>
</li>
<li class="navigation_item">О ГРУППЕ</li>
</ul>
</nav>
<address class="soc-link">
<a class="soc-link__item" href="https://vk.com/caddysmelledliketrees" title="https://vk.com/caddysmelledliketrees">
<i class="fa fa-vk" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw" title="https://youtube.com/channel/UCDUU-xPtMQ2VOpYaMv-OvLw">
<i class="fa fa-youtube" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://instagram.com/caddysmellslike" title="https://instagram.com/caddysmellslike">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8" title="http://last.fm/ru/music/%D0%9A%D1%8D%D0%B4%D0%B4%D0%B8+%D0%BF%D0%B0%D1%85%D0%BD%D0%B5%D1%82+%D0%B4%D0%B5%D1%80%D0%B5%D0%B2%D1%8C%D1%8F%D0%BC%D0%B8">
<i class="fa fa-lastfm" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://soundcloud.com/caddysmelledliketrees" title="https://soundcloud.com/caddysmelledliketrees">
<i class="fa fa-soundcloud" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="https://caddysmelledliketrees.bandcamp.com" title="https://caddysmelledliketrees.bandcamp.com">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</a>
<a class="soc-link__item" href="mailto:info#caddysmellsliketrees.ru?subject=Общие%20вопросы"><i class="fa fa-envelope" aria-hidden="true"></i></a>
</address>
</div>
.navigation and .soc-link should not be display: flex; you want these two to be normal block elements. The flex is causing them to overlap because they aren't respecting their children's sizes.
how can i set the active-color of a i with fa to #9b0722?
My HTML looks like the following:
<div class="topbar">
<div class="container">
<!-- Topbar Navigation -->
<ul class="loginbar pull-right">
<li class="active">
<a href="#" title="Startseite">
<i class="fa fa-home"></i>
</a>
</li>
<li class="topbar-devider"></li>
<li>Kontakt</li>
<li class="topbar-devider"></li>
<li><i class="fa fa-phone"></i> +49 7147 273729</li>
<li class="topbar-devider"></li>
<li>Impressum</li>
</ul>
<!-- End Topbar Navigation -->
</div>
</div>
As simple as this:
i.fa{color:#9b0722}
if you mean on hover, then
i.fa:hover{color:#9b0722}
Assuming you mean changing the color of the icon when it's hovered, put the icon inside the anchor.
For example:
<li>
<i class="fa fa-phone"></i> +49 7147 273729
</li>
Then in your CSS then you can change the color when it's hovered like this:
a:hover i.fa {
color:#9b0722;
}
Hi I Have a navigation bar that has a drop down menu. I would like the drop down menu to
make another drop down menu but how would I do this? Here is my code.
<ul id="navbarr">
<li class="current-page">
<i class="icon-home"></i><br />Home
</li>
<li>
<i class="icon-camera"></i><br />Cities
</li>
<li>
<i class="icon-comments"></i><br />Blog
</li>
<li><i class="icon-tasks"></i><br />Categories<ul>
<li><i class="icon-tasks"></i><br />Demographic</li>
<li><i class="icon-tasks"></i><br />Crimes</li>
<li><i class="icon-tasks"></i><br />Schools</li>
<li><i class="icon-tasks"></i><br />Lifestyles</li>
</ul>
</li>
<li>
<i class="icon-user"></i><br />About
</li>
<li>
<i class="icon-envelope-alt"></i><br />Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
How about making another unordered list inside the list element?
Like this:
<li class="current-page">
<ul>
<li>
<i class="icon-home"></i><br />Home
</li>
</ul>
</li>
Using Twitter Bootstrap, is it possible to show menu item icons when the viewport shrinks rather than collapsing the menu altogether and just showing the three-bar button?
I have not changed the default css (other than applied the Flatly theme).
<nav id="navigation_bar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- <div class="col-xs-10 col-xs-offset-1">-->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="/">Hawksmoor</a>
</div>
#if(Auth::check())
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-home"></i> Home</li>
<li class="dropdown">
<i class="fa fa-clock-o"></i> Timecard <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Timecard</li>
<li>CICO</li>
<!-- <li class="divider"></li>-->
<!-- <li>Separated link</li>-->
</ul>
</li>
<li class="dropdown">
<i class="fa fa-tasks"></i> Tasks <span class="badge alert-danger">2</span><b class="caret"></b>
<ul class="dropdown-menu">
<li>View Tasks</li>
<li>Add a Task</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li><i class="fa fa-users"></i> People</li>
<li class="dropdown">
<i class="fa fa-file-text-o"></i> Policies <b class="caret"></b>
<ul class="dropdown-menu">
<li role="presentation" class="dropdown-header">Work</li>
<li><i class="fa fa-suitcase"></i> Business Conduct</li>
<li><i class="fa fa-recycle"></i> Environment</li>
<li><i class="fa fa-fire-extinguisher"></i> Health & Safety</li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Home</li>
<li><i class="fa fa-plane"></i> Holiday</li>
<!-- <li class="divider"></li>-->
<li role="presentation" class="dropdown-header">Other</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
#if (Auth::guest())
<!-- Not needed as employees will already be registered -->
<!-- <li>Sign up</li> -->
<!-- <li>Sign in</li> -->
#else
<li class="dropdown">
<i class="fa fa-user"></i> {{ Auth::user()->profile->nickname }} <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> View Profile</li>
<li><i class="fa fa-pencil"></i> Edit Profile</li>
<li><i class="fa fa-envelope"></i> Webmail</li>
<li class="divider"></li>
<li><i class="fa fa-cog"></i> Preferences</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Sign out</li>
</ul>
</li>
#endif
</ul>
</div><!-- /.navbar-collapse -->
#endif
<!-- </div>-->
</div><!-- /.container-fluid -->
</nav>
If someone could point me in the right direction it would be much appreciated.
There are two basic tasks you need to do here: 1) disable collapse 2) hide menu text
Demo: http://www.bootply.com/MWsmEO9bb4#
1) Disable the collapsing menu and hamburger icon. You'll do this by overriding bootstrap CSS like so:
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
NOTE: using !important is the simplest way to do this, but it's also a bit of nuclear option as it can make your menu hard to manipulate later on. Deeper digging into bootstrap css will likely reveal some media queries you can override with more granularity... but that's more digging than I have patience for right now:)
EDIT: It just occured to me, what I suggested below is unneecessary. No custom #media-query triggered class needed, just use Bootstrap's hidden-xs like so:
2) Hide menu text at a given breakpoint like so:
<i class="fa fa-home"></i><span class="hidden-xs"> Home</span>
That's it! EDIT OVER
2) Hide menu text at a certain breakpoint. You'll do this by wrapping the text in a span with custom media query Bootstrap's hidden-xs like so:
<i class="fa fa-home"></i><span class="hidemobile"> Home</span></a></li>
CSS
#media (max-width: 992px) { /* or whatever breakpoint you want */
.hidemobile {
display:none;
}
}
There is still some behaviour there that you may want to tweak (eg: how to handle your left/right split menu, when to bring the icons closer together to avoid second menu row, etc) but this should get you going in the right direction.
PS - I updated my bootply too...