So as I said in the title corners of a bootstrap button are not being rounded and I can't figure out why.
I looked up other posts but none of the found solutions worked for me.
Code (layout.hbs)
...
<!-- navbar-nav -->
<ul class="navbar-nav ml-auto">
<!--Sell Tickets-->
<button type="button" class="btn btn-primary" style="margin-right:20px;">Sell tickets</button>
<!--/Sell Tickets-->
<!-- Currency Dropdown -->
<li class="nav-item dropdown d-none d-md-flex">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownCurrency" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USD <i class="fa fa-caret-down fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownCurrency">
<button class="dropdown-item" type="button">USD</button>
<button class="dropdown-item" type="button">EUR</button>
</div>
</li>
<!-- /Currency Dropdown -->
<!-- Search Toggle -->
<li class="nav-item d-sm-none">
<i class="fa fa-search fa-lg"></i>
</li>
<!-- /Search Toggle -->
<!-- Shopping Cart Toggle -->
<li class="nav-item dropdown ml-1 ml-sm-3">
<a href="#" class="nav-link" data-toggle="modal" data-target="#cartModal">
<i class="fa fa-shopping-cart fa-lg"></i>
<span class="badge badge-pink badge-count">4</span>
</a>
</li>
<!-- /Shopping Cart Toggle -->
<!-- Notification Dropdown -->
<li class="nav-item dropdown ml-1 ml-sm-3">
<a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownNotif" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell fa-lg"></i>
<span class="badge badge-info badge-count">3</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownNotif">
<a class="dropdown-item has-icon" href="#"><i class="fa fa-envelope"></i> 1 New Message</a>
<a class="dropdown-item has-icon" href="#"><i class="fa fa-comment"></i> 2 New Comments</a>
</div>
</li>
<!-- /Notification Dropdown -->
...
Here is the website for full code http://ertagon.cf:3000/
Fixed by adding an inline style margin-right:20px
<button type="button" class="btn btn-primary" style="margin-right:20px; border-radius: 8px;">Sell tickets</button>
Thanks, #Chris W
Related
This is a question similar to this one, but it is for Bootstrap 4.
I am not able to add right-justified entries on the BS4 navbar that stay visible both when collapsed and not collapsed. I spent one full afternoon without success.
This is my goal:
Here my current code (that works only when not collapsed):
<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top">
<a class="navbar-brand text-capitalize text-blur" href="/">
<img class="mr-1" src="/images/logo/favicon-32x32.png" alt="Logo">
<span class="">Portami in Pista</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myTopMenu"
aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
<span class="sr-only">[Menu]</span>
<span class="navbar-toggler-icon" title="[Menu]"/>
</button>
<div class="collapse navbar-collapse" id="collapsableTopMen">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/Schools/">
<i class="fa fa-motorcycle fa-rotate-315 text-danger" aria-hidden="true"/>
<span class="text-blur-danger">PiP Reparto Corse</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Tracks/">
<i class="fa fa-flag-checkered text-primary" aria-hidden="true"/>
<span>Piste</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Blog/le-guide-del-giovedi/">
<i class="fa fa-mortar-board text-primary" aria-hidden="true"/>
<span>Le guide del giovedì</span>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!- START of section should be always visible -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="famfamfam-flags it" title="Italiano"/>
<span class="d-inline d-xl-none">Italiano</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="/AbpLocalization/ChangeCulture?cultureName=en&returnUrl=/">
<i class="famfamfam-flags gb" aria-hidden="true"/>
<span class="">English</span>
</a>
</div>
</li>
<!- END of section should be always visible -->
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"/> Log in</a>
</li>
</ul>
</div>
</nav>
Since you're using Bootstrap 4, this answer is more relevant to your question:
https://stackoverflow.com/a/41513784/171456 (see the last part)
The part that you always want to keep visible needs to be separate from any of the collapsible parts. Then use the order-* classes to position the items as desired:
Demo: https://codeply.com/p/ylDhhZtpiH
<nav class="navbar navbar-light navbar-expand-xl border-bottom mainmenu sticky-top justify-content-start">
<a class="navbar-brand text-capitalize text-blur" href="/">
<img class="mr-1" src="//placehold.it/32" alt="Logo">
<span class="">Portami in Pista</span>
</a>
<button class="navbar-toggler order-2 ml-1" type="button" data-toggle="collapse" data-target=".collapsable" aria-controls="collapsableTopMen" aria-expanded="false" aria-label="[Menu]">
<span class="sr-only">[Menu]</span>
<span class="navbar-toggler-icon" title="[Menu]"></span>
</button>
<!-- 1st collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 flex-xl-grow-1 order-last" id="collapsableTopMen">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/Schools/">
<i class="fa fa-motorcycle fa-rotate-315 text-danger" aria-hidden="true"></i>
<span class="text-blur-danger">PiP Reparto Corse</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Tracks/">
<i class="fa fa-flag-checkered text-primary" aria-hidden="true"></i>
<span>Piste</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Blog/le-guide-del-giovedi/">
<i class="fa fa-mortar-board text-primary" aria-hidden="true"></i>
<span>Le guide del giovedì</span>
</a>
</li>
</ul>
</div>
<!-- always visible portion -->
<ul class="navbar-nav order-1 order-xl-last ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-flag it" title="Italiano"></i>
<span class="d-inline d-xl-none">Italiano</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="#">
<i class="fas fa-flag-usa gb" aria-hidden="true"></i>
<span class="">English</span>
</a>
</div>
</li>
</ul>
<!-- 2nd collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
</li>
</ul>
</div>
</nav>
https://codeply.com/p/ylDhhZtpiH
I did a small important fix to the good answer from Zim.
I fixed the "always visible" portion of the menu as he did not overlap the whole menu when it was collapsed.
Adding a custom .navbar-always-overlapped class, fixed it.
<nav class="navbar navbar-light navbar-expand-lg border-bottom mainmenu sticky-top justify-content-start">
<!-- same code from Zim here>
...
<!-- always visible portion. Note the 'navbar-always-overlapped' -->
<ul class="navbar-nav navbar-always-overlapped order-1 order-lg-last ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownLang" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-flag it" title="Italiano"></i>
<span class="d-inline d-lg-none">Italiano</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownLang">
<a class="dropdown-item" href="#">
<i class="fas fa-flag-usa gb" aria-hidden="true"></i>
<span class="">English</span>
</a>
</div>
</li>
</ul>
<!-- 2nd collapse menu -->
<div class="collapse navbar-collapse collapsable flex-grow-0 order-last">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/Account/Login"><i class="fa fa-sign-in"></i> Log in</a>
</li>
</ul>
</div>
</nav>
and the code for .navbar-always-overlapped:
.navbar-always-overlapped .dropdown-menu {
position: absolute !important;
}
See https://codeply.com/p/9deLYTGblZ
I want to have my navigation bar stuck to the top of the screen, but then the dropdown button does not work correctly. But if I remove fixed-top the dropdown works, but its no longer stuck to the top of the screen.
Also I am trying to put a blank line between the HOME and Account in the dropdown and cant figure out how to do that with out breaking the dropdown.
<nav class="navbar navbar-expand-sm fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/testing/"><img class="img-responsive" src="/testing/users/images/logo.png"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav navbar-right links">
<li class="nav-item"><span class="fa fa-fw fa-home"></span> Home</li>
<li class="nav-item"><span class="fa fa-fw fa-user"></span> admin</li>
<li><i class="fa fa-envelope"></i> <span id="msgCount" class="badge" style="margin-top: -5px"></span></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown_main" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-fw fa-cogs"></span> <span class="caret"></span></a>
<div class="dropdown-menu dropdown-info" aria-labelledby="dropdown_main">
<a class="dropdown-item" href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a>
<a class="dropdown-item" href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span> Account</a>
<a class="dropdown-item" href="/testing/users/admin.php"><span class="fa fa-fw fa-cogs"></span> Admin Dashboard</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=users"><span class="fa fa-fw fa-user"></span> User Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=permissions"><span class="fa fa-fw fa-lock"></span> Permissions Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=pages"><span class="fa fa-fw fa-wrench"></span> Page Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=messages"><span class="fa fa-fw fa-envelope"></span> Messages Manager</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=logs"><span class="fa fa-fw fa-search"></span> System Logs</a>
<a class="dropdown-item" href="/testing/users/logout.php"><span class="fa fa-fw fa-sign-out"></span> Logout</a>
</div>
</li>
</ul>
</div>
<ul class="navbar-nav navbar-right">
<li class="nav-item dropdown hidden">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuHidden" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu</a>
<div class="dropdown-menu dropdown-info hidden-links" aria-labelledby="navbarDropdownMenuHidden">
</div>
</li>
</ul>
To make a divider in your drop-down menu you can use <div class="dropdown-divider"></div> and to align your ul to right you can use bootstrap class ml-auto Ijnstead of fixed-top you can use sticky-top as your navbar will be sticky through out your page scroll
.dropdown-divider {
border-top: 1px solid red!important;
}
li.nav-item {
padding: 0px 15px
}
#media only screen and (min-width: 767px) {
ul.navbar-nav {
padding: 0px 60px
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="#"><img class="img-responsive" src="/testing/users/images/logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><span class="fa fa-fw fa-home"></span> Home</li>
<li class="nav-item"><a href="/testing/users/account.php" class="nav-link"><span
class="fa fa-fw fa-user"></span> admin</a></li>
<li class="nav-item">
<a href="/testing/users/messages.php" class="nav-link">
<span class="fa fa-envelope"></span><i class="badge"></i> Message</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown_main" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-fw fa-cogs"></span> <span class="caret"></span>Settings</a>
<div class="dropdown-menu dropdown-info" aria-labelledby="dropdown_main">
<a class="dropdown-item" href="/testing/"><span class="fa fa-fw fa-home"></span> Home</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/testing/users/account.php"><span class="fa fa-fw fa-user"></span>
Account</a>
<a class="dropdown-item" href="/testing/users/admin.php"><span class="fa fa-fw fa-cogs"></span> Admin
Dashboard</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=users"><span class="fa fa-fw fa-user"></span>
User Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=permissions"><span
class="fa fa-fw fa-lock"></span> Permissions Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=pages"><span class="fa fa-fw fa-wrench"></span>
Page Management</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=messages"><span
class="fa fa-fw fa-envelope"></span> Messages Manager</a>
<a class="dropdown-item" href="/testing/users/admin.php?view=logs"><span class="fa fa-fw fa-search"></span>
System Logs</a>
<a class="dropdown-item" href="/testing/users/logout.php"><span class="fa fa-fw fa-sign-out"></span>
Logout</a>
</div>
</li>
<li class="nav-item dropdown menu">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span
class="fa fa-fw fa-lock"></span> menu
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<a class="dropdown-item mx-auto" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
</div>
</nav>
</body>
</html>
Is there a way to achieve the following result with Bootstrap 4 (with centered menu items in second row):
This was made with Bootstrap 3 but I cant get it to work with Bootstrap 4 (the right navbar (Upgrade, govel, ...) does not float, instead a scroll bar is added when there is not enough space).
My Bootstrap 4 code:
https://www.bootply.com/awN10dN1Ns
Any tips how to get the menu items float to a second row like on the screenshot above if there is not enough space for a one-line nav? How to center the menu items in the second row?
Link to Bootstrap 3 example is: https://www.lotsearch.de/
Please try below css.
#navbarSupportedContent {
text-align: center;
display: block !important;
}
#navbarSupportedContent ul.navbar-nav {
display: block !important;
}
#navbarSupportedContent ul.navbar-nav li {
display: inline-block;
}
Wrap the 2 rows in separate d-flex divs, and use w-100 to make them fill the width of the navbar. The use flex-column in the navbar to make the 2 divs stack vertically.
<nav class="navbar navbar-expand-md navbar-light flex-column" id="header">
<div class="w-100 d-flex">
<a href="/" class="navbar-brand">
<img src="/images/favicons/favicon_144x144.png" class="favicon-logo" alt="Logo">
</a>
<ul class="navbar-nav navbar-expand px-3 order-last">
<li class="nav-item">
<a class="nav-link text-nowrap nav-small-link" href="" title="Vorgemerkte Gebote auf Ihrer Bietliste">
<div class="icon-wrapper">
<i class="fa fa-gavel fa-fw"></i>
<span class="badge badge-orange" id="bidlist-counter">0</span>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap nav-small-link" href="" title="Merkzettel">
<div class="icon-wrapper">
<i class="fa fa-bookmark fa-fw"></i>
<span class="badge badge-orange" id="bookmark-counter">14</span>
</div>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link text-nowrap dropdown-toggle" href="#" id="navbarDropdownLanguage" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="flag-icon flag-icon-de"></span>
</a>
<div class="dropdown-menu dropdown-langauge dropdown-menu-right" aria-labelledby="navbarDropdownLanguage">
<a class="dropdown-item text-nowrap" href="" hreflang="en">
<span class="flag-icon flag-icon-gb"></span> GB </a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/user">
<i class="fa fa-user fa-fw"></i> Mein Account </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/bids/management/bidlist">
<i class="fa fa-user fa-fw"></i> Bietliste <span class="badge badge-orange" id="bidlist-counter">0</span>
</a>
<a class="dropdown-item" href="/bids/management/manual-bidlist">
<i class="fa fa-user fa-fw"></i> PDF-Gebote </a>
<a class="dropdown-item" href="/bids/management/placed-bidlist">
<i class="fa fa-user fa-fw"></i> Abgegebene Gebote </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/static/contact">
<i class="fa fa-envelope fa-fw"></i> Kontakt aufnehmen </a>
<a class="dropdown-item" href="/static/faq">
<i class="fa fa-graduation-cap fa-fw"></i> FAQ </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/user/logout">
<i class="fa fa-sign-out fa-fw"></i> Logout </a>
</div>
</li>
</ul>
<button class="navbar-toggler order-last" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav ml-auto">
<li>
<a class="nav-link text-nowrap orange" href="">
<i class="fa fa-arrow-circle-up"></i> Upgrade </a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 justify-content-md-center justify-content-start" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-nowrap" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-search"></i> Suche <span class="caret"></span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/">
<i class="fa fa-lightbulb-o fa-fw"></i> Suche (Aktuelle Auktionen) </a>
<a class="dropdown-item" href="/archive">
<i class="fa fa-archive fa-fw"></i> Suche (Archiv) </a>
</div>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/auction-catalogues">
<i class="fa fa-book fa-fw"></i> Kataloge </a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/category"><i class="fa fa-list-alt fa-fw"></i> Kategorien </a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/alert"><i class="fa fa-bell fa-fw"></i> Suchaufträge </a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/artist"><i class="fa fa-bar-chart fa-fw"></i> Künstler / Analysen </a>
</li>
<li class="nav-item">
<a class="nav-link text-nowrap" href="/blog"><i class="fa fa-newspaper-o fa-fw"></i> Blog </a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/TyYjq0u7B0
Note: The hidden-* classes don't exist in Bootstrap 4.
Also see: How can I have Brand and Navbar on separate lines?
you can change this:
#media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
}
by this:
#media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
}
this is what you expect?
Add this for ordering your nav:
#media (min-width: 768px) {
.navbar-expand-md .navbar-nav{
order:0
}
}
I have some values in a dropdown list but I want to disable some of them.
Here I found a solution like if we add disabled style to <a> it will be disabled. I tried same for dropdown element B but it didn't work.
Help if I am wrong somewhere.
Please find below code snippet for reference,
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item">A</a>
<a class="dropdown-item disabled">B</a>
<a class="dropdown-item">C</a>
</div>
</div>
try it with list items instead. working for me
<ul class="dropdown-menu pull-right">
<li>Normal</li>
<li class="dfgdfgdf disabled">Disabled</li>
<li class="active">Active</li>
<li>Normal</li>
</ul>
Check your lib js and css reference
just add href="#"
It's working fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item disabled" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
I'm trying to create a navbar header with a logo on the left, search box in the center, and a small menu on the right similar to Reverb's. Here:
I've gotten it pretty close but for some reason, my menu is being pushed down to a second line because my search bar is too long.
I've tried putting in the row and breaking the sections up into smaller col-sm-4 divs, but that messes things up more (FYI, I'm using Bootstrap 4).
Here is my html. Haven't done really any CSS other than change the default colors.
<header class="header">
<nav class="navbar navbar-expand-sm fixed top mb-3">
<div class="container">
<a href="#" class="navbar-brand">
NAVBAR
</a>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
By
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">User name</a>
<a class="dropdown-item" href="#">Member type</a>
<a class="dropdown-item" href="#">Company</a>
<a class="dropdown-item" href="#">Genre</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-bell-o" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav>
</header>
If your goal is to keep the icons to the right of the search from wrapping, then you could try something like this:
ul.justify-content-end {
min-width:200px;
}