I have a problem and I couldn't solve it. How to show social icons one line in collapsed menu? I added below code to my css file and nothing changed? Any idea? Thanks in advance
.navbar-right li {
display: inline-block;
}
Here is my navbar code:
<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.js" type="text/javascript"></script>
</head>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light style="background-color: #ffffff;">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"></span>
<a class="navbar-brand d-none d-lg-inline-block" href="https://testsite.com">
<img src="images/logo.png" height="150" dir="ltr" alt="logo">
</a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="https://testsite.com">
<img src="images/logo.png" height="100" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-center" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-facebook fa-lg"></i></li>
<li><i class="fa fa-instagram fa-lg"></i></li>
<li><i class="fa fa-twitter fa-lg"></i></li></ul>
</div>
</div>
</nav>
you can just add bootstrap class names d-inline-flex flex-row to your ul tag with class navbar-nav navbar-right which your social icons are in it it will be like :
<ul class="nav navbar-nav navbar-right d-inline-flex flex-row">
<li><i class="fa fa-facebook fa-lg"></i></li>
<li><i class="fa fa-instagram fa-lg"></i></li>
<li><i class="fa fa-twitter fa-lg"></i></li></ul>
if you need to you can even limit it by width like : d-sm-inline-flex and d-lg-flex for example
or You can give display css : display : inline-flex; and flex-direction : row ; to your ul
.navbar-right {
display: inline-flex;
flex-direction : row;
}
I will do this in your css class
.navbar-right li {
display: flex;
flex-direction: row;
}
Related
I have two nav bars, one of the nav bar has a red background and the other nav bar has blue background with multiple anchor tags.
When I reduce the screen, the second nav bar is not displaying correctly when compared to before. Can anyone help me with your best solution?
Please find issue image,
Please find my code below,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" type="text/css" href="CSS/Header.css">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class=" navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active mt-auto mb-auto col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</Div>
</nav>
</header>
</body>
</html>
After I try this code without header.css and styles.css
No have problem with your code
I will shared snippet on here
Please give the Header.css and Styles.css in here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class=" navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active mt-auto mb-auto col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</Div>
</nav>
</header>
</body>
</html>
EDIT - By removing all my previous answer
You are facing this issue because there are too many items in your nav. So the width is too big.
You can consider updating the navbar-expand-sm class to navbar-expand-md in order to change the breakpoint on which you want the menu collapsing under the "burger menu".
Otherelse, you can hide menu texts when the screen is small, and add those texts into the title properties of your icons or its wrappers to see the "menu description" on hover.
Moreover, mt-auto mb-auto col classes for each <li></li> are not needed. In fact, margin / padding should be added only on the wrapper. And the navbar classes automatically arrange your items. The col onto your items are breaking the responsiveness of your nav wrapper.
Keep col but updating nav to navbar-expanded-md:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-md container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class="navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Removing col but Keeping nav to navbar-expanded-sm:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class="navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active">
<a class="nav-link navicon" href="Start.html">
<div class="text-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="text-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Consents.html">
<div class="text-center">
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Purpose.html">
<div class="text-center">
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Personal.html">
<div class="text-center">
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Assets.html">
<div class="text-center">
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Declarations.html">
<div class="text-center">
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Income.html">
<div class="text-center">
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Preview.html">
<div class="text-center">
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
On this second snippet, I added the class text-center to your icon wrappers.
I have followed a snippet from this question Bootstrap 4 - Navbar items outside the collapse which helped me create a couple of none collapsible items for when the viewport shrinks. However I have a drop down menu inside one of these non collapsible items and when this item is exapnded it expands the whole Navbars and does not pop out ontop of it. you can see it in the sample int the link below
http://codeply.com/go/U0GQYJd2JO
navbar code:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" id="mainNav">
<a class="navbar-brand" href="/">
MY Site
</a>
<div class="d-flex flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row">
<li style="width:250px;">
<select data-placeholder="Jump to site..." id="quickjump-menu" class="form-control form-control-chosen">
<option value=""></option>
<option value="/sites/site/139/">protein</option>
<option value="/sites/site/138/">shake</option>
<option value="/sites/site/159/">soup</option>
<option value="/sites/site/115/">test 1</option>
<option value="/sites/site/116/">test 2</option>
</select>
</li>
<li class="nav-item dropdown">
<a class="nav-link p-2 dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-lg"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>Admin</strong>
</div>
<a class="dropdown-item" href="/admin/" target='_blank'>
<i class="fa fa-user fa-fw"></i> Admin
</a>
<a class="dropdown-item" href="/user_info/">
<i class="fa fa-users fa-fw"></i> User Info
</a>
<div class="dropdown-header text-center">
<strong>Settings</strong>
</div>
<a class="dropdown-item" href="/app_settings/">
<i class="fa fa-gears fa-fw"></i> App Settings
</a>
<div class="dropdown-header text-center">
<strong>User</strong>
</div>
<a class="dropdown-item" href="/edit_profile/1/">
<i class="fa fa-user fa-fw"></i> User Profile
</a>
<a class="dropdown-item" href="/logout/?next=/login">
<i class="fa fa-gear fa-fw"></i> Log out
</a>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="menu">
<li>...</li>
</ul>
</div>
</nav>
sample image when the the view port shrinks
Just add the position-absolute class to dropdown-menu. No extra CSS is needed.
<div class="dropdown-menu dropdown-menu-right position-absolute">
...
</div>
https://www.codeply.com/go/Q2wqmJnrlB
As you can see on this Bootstrap 4 GitHub issue, the intended behavior of dropdowns inside the "mobile" (once less than the expand-* breakpoint is reach) Navbar is to contain the dropdown inside the Navbar, and not float over it.
To improve the Navbar layout, you may also want to add flex-row flex-nowrap to the navbar-nav so it doesn't stack and make the Navbar too tall.
You can overcome this issue by overriding the responsive position: static set on the dropdown-menu:
css:
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
You need to override bootstrap default css. please check below example
#media (max-width: 991px) {
.custom-navbar .navbar-nav .dropdown-menu {
position: absolute;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light custom-navbar" id="mainNav">
<a class="navbar-brand" href="/">
MY Site
</a>
<div class="d-flex flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row">
<li style="width:250px;">
<select data-placeholder="Jump to site..." id="quickjump-menu" class="form-control form-control-chosen">
<option value=""></option>
<option value="/sites/site/139/">protein</option>
<option value="/sites/site/138/">shake</option>
<option value="/sites/site/159/">soup</option>
<option value="/sites/site/115/">test 1</option>
<option value="/sites/site/116/">test 2</option>
</select>
</li>
<li class="nav-item dropdown">
<a class="nav-link p-2 dropdown-toggle" data-toggle="dropdown" href="#" role="button"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-lg"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>Admin</strong>
</div>
<a class="dropdown-item" href="/admin/" target='_blank'>
<i class="fa fa-user fa-fw"></i> Admin
</a>
<a class="dropdown-item" href="/user_info/">
<i class="fa fa-users fa-fw"></i> User Info
</a>
<div class="dropdown-header text-center">
<strong>Settings</strong>
</div>
<a class="dropdown-item" href="/app_settings/">
<i class="fa fa-gears fa-fw"></i> App Settings
</a>
<div class="dropdown-header text-center">
<strong>User</strong>
</div>
<a class="dropdown-item" href="/edit_profile/1/">
<i class="fa fa-user fa-fw"></i> User Profile
</a>
<a class="dropdown-item" href="/logout/?next=/login">
<i class="fa fa-gear fa-fw"></i> Log out
</a>
</div>
</li>
</ul>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="menu">
<li>...</li>
</ul>
</div>
</nav>
</body>
</html>
My html markup is:
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li>Home</li>
<li>Features</li>
<li>Lifestyle</li>
<li>Travel</li>
<li>Music</li>
<li>About</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div><!-- row -->
</div>
<!-- container -->
</nav>
While resizing window, the lists stack probably because i have used the grid system.
But what I want to achieve is that the responsive menu(the three lines) be pulled to the left and the icons remain at their place.
I am trying to learn web development on my own. Any help/suggestion would be appreciated.
Edit 1:
After using media query to set the position of the icons to relative, i have achieved this.
I want the icons to be on the right side and the menu to be on the left side.
set position:relative to the parent div then Try with this
#media (max-width:767px){
#social-icons {
position:absolute;
top:15px; /*or whatever you need*/
}
}
Try with the code snippet
.navbar-toggle {
background: #000;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.navbar-toggle {
background: #000;
float:left;
}
#social-icons {
position: absolute;
top: 15px;
right: 15px;
}
</style>
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav menu">
<li>Home</li>
<li>Features</li>
<li>Lifestyle</li>
<li>Travel</li>
<li>Music</li>
<li>About</li>
<li>Contact Me</li>
</ul>
</nav>
</div>
<!-- navbar-collapse -->
<div class="col-sm-4 navigation" id="social-icons">
<ul class="menu">
<i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> <i class="fa fa-pinterest"></i> <i class="fa fa-heart"></i> <i class="fa fa-google-plus"></i> <i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div>
<!-- container -->
</nav>
<!--/.nav-collapse -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Logo Centered Inside Navbar
I try to achieve it using bootstrap..
But I don't want to collapse the logo part, only collapse other li.
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li style="margin-right: 80px"><a href="articles.html"><i class="fa fa-pagelines" aria-hidden="true"></i>
Articles</a></li>
<li style="margin-left: 80px"><a href="signIn.html"><i class="fa fa-sign-in" aria-hidden="true"></i>
Sign in</a></li>
<li class="active"><a href="signUp.html"><i class="fa fa-sign-in" aria-hidden="true"></i>
Sign up</a></li>
</ul>
</div>
<div style="float:none">
<img src="../image/uoblogo.png" height="60px" width="200px" >
</div>
</div>
</nav>
</header>
This has basically been answered on SO before. You'll need to tweak the CSS for your image height, etc.., and keep the navbar-brand out of the navbar-collapse
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
.navbar-brand > img {
display: initial;
}
.navbar-toggle {
z-index:3;
}
http://www.codeply.com/go/G5uYBjmKkf
Move image inside the ul and apply vertical-align to each li would fix your issue
check this codepen
change your mark up to the following
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="#">
<span class="glyphicon glyphicon-home icon" aria-hidden="true"></span> Home</a>
</li>
<li>
<i class="fa fa-pagelines icon" aria-hidden="true"></i>Articles
</li>
<li>
<i class="icon fa fa-sign-in" aria-hidden="true"></i>Sign in
</li>
<li class="img">
<img src="https://lh6.googleusercontent.com/-lLR_c-yGAKc/AAAAAAAAAAI/AAAAAAAAGoY/3TnWGhgp4-0/s0-c-k-no-ns/photo.jpg" height="60px" width="200px">
</li>
<li class="active">
<i class="icon fa fa-sign-in" aria-hidden="true"></i>Sign up
</li>
</ul>
</nav>
</header>
and css to the following
ul li a{
line-height:50px!important;
vertical-align:bottom;
}
Hope it helps
I have the following code
<div class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<h1><img src="images/logo.png" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li><i class="fa fa-2x fa-facebook"></i></li>
<li><i class="fa fa-2x fa-twitter"></i></li>
<li><i class="fa fa-2x fa-youtube-play"></i></li>
</ul>
</div>
</div>
</div>
When I run it in normal mode - it does this..
but when I go into mobile mode - the icons get weirdly aligned.
It becomes like so
How can I make it so the icons are aligned left or right in the mobile mode (when it gets collapsed)
This is what you are looking for
.navbar-brand img{
max-height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1000px-Google_2015_logo.svg.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><i class="fa fa-2x fa-facebook"></i></li>
<li><i class="fa fa-2x fa-twitter"></i></li>
<li><i class="fa fa-2x fa-youtube-play"></i></li>
</ul>
</div>
</div>
I don't find any problem check the snippet, if you want to show the url I can check it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">
<h1 style="padding:0px;margin:0px;line-height:20px;;"><img src="http://scholar.google.it/intl/it/scholar/images/1x/googlelogo_color_270x104dp.png" style="height:40px;" alt="logo"></h1>
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li><i class="fa fa-2x fa-facebook"></i></li>
<li><i class="fa fa-2x fa-twitter"></i></li>
<li><i class="fa fa-2x fa-youtube-play"></i></li>
</ul>
</div>
</div>
</div>