Open the following bootstrap theme in full page mode:
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav?p=preview
on the nav bar you will see six options:
Three are font-awesome icons and the other three are text "About, Download and Contact".
What I am trying to achieve is to place the font-aweome icons in the center of the navbar instead of towards the right.
I have tried various options, like placing them in etc.. but all that results in something or the other breaking.
<ul class="nav navbar-nav nav-advance-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
<a class="page-scroll" href="#flax"><i class="fa fa-leaf"></i></a>
</li>
<li>
<a class="page-scroll" href="#moist"><i class="fa fa-heart"></i></a>
</li>
<li>
<a class="page-scroll" href="#designs"><i class="fa fa-paw"></i></a>
</li>
</ul>
<ul class="nav navbar-nav nav-basic-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
Related
I am using Boostrap 4. I have a simple 4 tab horizontal navigation. On big screens, it should display like this: "Some text [font-awesome-icon]" x 4 tabs. On small screens, it should display like this: "[font-awesome-icon]". The display part works, however, on large screen the font-awesome-icon always shows on the second line. Here is what I see;
This is my html;
<!-- Nav tabs -->
<ul class="nav nav-tabs ">
<!-- profile -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
<!-- profile image -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile-image"><i class="fas fa-images"></i></a>
</li>
<!-- password -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#password"><i class="fas fa-unlock-alt"></i></a>
</li>
<!-- timezone -->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#timezone"><i class="fas fa-clock"></i></a>
</li>
</ul>
I have tried nowrap in all locations like UL, LI, A, SPAN but no luck. I have also moved the fa-clock part to inside the span, however, then the entire text and tab disappear on small screens.
Any help appreciated.
To stop making your id card from moving to next line, float your "Some text" to left.
<li class="nav-item" >
<a class="nav-link" data-toggle="tab" href="#profile" nowr>
<span style="float:left;" class="d-none d-md-block">Some text
</span>
<i class="fas fa-id-card">
</i>
</a>
</li>
I have a reactJS application which incorporates navbar for navigation. The initial view shows the 3 line menu icon in the top right hand corner which is what I want. It looks like this:
When I click on the menu icon, the drop down appears like this:
I am trying to get the dropdown to align the menu items to the right, not to the left. This is the code that generates the navbar:
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="nav navbar-nav pullRight">
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.accountinformation}>Basic Account Information</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.contributions}>Contributions</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.investmentelections}>Investment Elections</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.beneficiary}>Beneficiary Information</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.transfer}>Transfers</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.loans}>Loans</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.transactionhistory}>Transaction History</a>
</li>
<li className="nav-item">
<a className="nav-link menuItemColor" onClick={this.documents}>Documents</a>
</li>
<li class="active">
<a className="nav-link menuItemColor" onClick={this.logout}>Logout</a>
</li>
</ul>
</div>
I thought putting the pullRight in the classname would pull the items to the right. I guess not.
Any suggestions?
Thank you.
I am trying to get the dropdown to align the menu items to the right,
not to the left.
You can use flexbox to achieve that layout.
Something like this should work:
.pullRight .nav-item {
display: flex;
justify-content: flex-end;
}
I'm creating a small website and I'm stuck with the button alignment problem. I have a navbar list menu and I'd like to add a transparent Logout button near to them just in shape of another menu element, however, I couldn't be successful so far.
Here's a Bootply link you could see the problem; http://www.bootply.com/OXfRkJHEHs
I'd be grateful if you could help me.
<form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a style="color:#900C3F" href="index.php">Home</a>
</li>
<li>
<a style="color:#900C3F" href="festival.php">Festival</a>
</li>
<li>
<a style="color:#900C3F" href="contact.php">Contact</a>
</li>
<li>
<a style="color:#900C3F" href="map.php">Map</a>
</li>
<li>
<input type="submit" value="Logout" class="btn element" style="color:#900C3F; background-color: transparent; margin-top:7px" href="Logout.php">
</li>
</ul></div>
<div id="push"></div>
</form>
I'm using materialize as a UI framework in my rails app, and everything is working correctly except the 'material-icons' 'menu' option isn't working properly.
The full code is further below, but this is the piece that is not working appropriately:
<i class="material-icons">menu</i>
Instead of turning into a hamburger icon, when I shrink the browser to trigger the responsiveness, it just displays the text node 'menu'. I can't figure out what I am doing wrong. Everything else is working.
This is the entire nav/dropdown structure:
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<!-- Dropdown Structure -->
<ul id="dropdown2" class="dropdown-content">
<li>My Profile</li>
<li>My Courses</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<header>
<nav class="z-depth-2">
<div class="container">
<div class="nav-wrapper">
OppSim
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<!-- web view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">JTB<i class="material-icons right"></i></a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<!-- mobile view -->
<li>Courses</li>
<li>Signup</li>
<li>Login</li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown2">JTB<i class="material-icons right"></i></a></li>
</ul>
</div>
</div>
</nav>
</header>
Or maybe I should stick with golf.
To use icons in materalize you have to include this font
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
as per their official documentation here
I am using Foundation 5 (latest, as of time of writing: v5.5.3)
I have set up top-bar menu with some icons for each element.
Basically: top-bar menu works fine unless page width
is more than [640px] and less than [828px]!
I created a screenshot to better illustrate the problem:
screenshot of broken top-bar menu
I prepared a Fiddle illustrating my problem.
(https://jsfiddle.net/sLk0jf4L/146/)
Top-Bar HTML:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1>My super homepage</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span> Choose language</a>
<ul class="dropdown">
<li>Language 1</li>
<li class="active">Language 2</li>
<li>Language 3</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
Additional CSS to position icons
span.menu-item
{
font-size:1.25rem;
font-weight:500;
line-height:1.25rem;
}
a.link-item-new span.menu-item,
a.link-item-exclusive span.menu-item
{
position:relative;
top:0.1rem;
}
a.link-item-about span.menu-item
{
position:relative;
top:0.15rem;
}
a.link-item-flag span.menu-item
{
position:relative;
top:0.2rem;
}
What CSS rules I need to apply to remove this breakage?
It would be fine if menu just showed up as hamburger
icon instead of braking up.
Thank you for your time and knowledge.
I've made a slight modification to your html in that I've added a span around the "Choose language" text with a class of .lang-text so I can manipulate the content using #media queries.
The idea is that when the viewport size reaches the breaking point, only the "Choose language" text is hidden, retaining the flag icon (and the dropdown options with it).
Html:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1>My super homepage</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text"> Choose language</span></a>
<ul class="dropdown">
<li>Language 1</li>
<li class="active">Language 2</li>
<li>Language 3</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
#media queries:
#media only screen and (min-width: 40em) {
a.link-item-flag span.lang-text {
display: none;
}
}
#media only screen and (min-width: 46.5em) {
a.link-item-flag span.lang-text {
display: inline-block;
}
}
Updated Fiddle