Bootstrap 4 pin to top navbar element - html

I'm using bootstrap 4.1 navbar here. I want my div "#pin_to_top" to be always at the top of the navbar. So that on wider screens it is
Logo - Menu - "#pin_to_top" (all on the same row)
and on smaller devices it is like
Logo - "#pin_to_top#
Menu (menu is under my logo and div)
Also any other piece of advice about my code would be much appreciated :)
.navbar-brand img {
height: 2rem;
}
.phonecall {
border-radius: 2rem;
background-color: #28a745;
font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-light d-flex flex-column flex-md-row navbar-expand">
<a class="navbar-brand" href="#">
<p>LOGO</p>
</a>
<div class="d-flex">
<ul class="navbar-nav flex-fill pl-md-5 text-nowrap">
<li class="nav-item "><a class="nav-link" href="#">Menu1</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu2</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu3</a></li>
<li class="nav-item "><a class="nav-link" href="#">Menu4</a></li>
</ul>
</div>
<div id="pin_to_top" class="ml-auto d-flex flex-column flex-md-row align-self-start" >
<div class="p-2">
<a class="">Some info here</a>
</div>
<div class="navbar-text text-nowrap phonecall px-2">
<a class="text-white" href="tel:+78005553535">+7-(800)-555-35-35</a>
</div>
</div>
</nav>

Bootstrap 4 includes a fixed-top class to solve your problem. ;)

you should give position fix to your class and give this top:0;

use position absolute for parent and add some css for a good design on small screen
#include media-breakpoint-up(md) {
div#pin_to_top {
position: absolute;
left: auto;
right: 0px;
}
}

Related

Bootstrap 4 centered logo and tagline on nav collapse

I'm working on a Bootstrap 4 project where I have a nav bar with a centered logo and tagline, then some links to the left and right. It works pretty much as I would like, only ideally I would like the logo to stay centered after the nav links collapse.
Here is the code I have so far:
<nav class="navbar navbar-expand-lg navbar-light bg-white justify-content-between">
<div class="container-fluid ">
<div class="d-flex flex-column text-center order-lg-2">
<a class="navbar-brand" href="#">
<img src="http://via.placeholder.com/350x150" alt="">
</a>
<h2 class="tagline navbar-text">eco freindly clothing</h2>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse dual-nav w-50 order-lg-3">
<ul class="nav navbar-nav ml-auto">
<a class="nav-link" href="#">our ethics</a>
<a class="nav-link" href="#">contact</a>
<a class="nav-link" href="#">shop</a>
</ul>
</div>
<div class="navbar-collapse collapse dual-nav w-50 order-lg-1">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="">instagram</a></li>
<li class="nav-item"><a class="nav-link" href="">facebook</a></li>
<li class="nav-item"><a class="nav-link" href="">pinterest</a></li>
</ul>
</div>
</div>
</nav>
Currently after the links collapse the navbar toggle is on the right and logo and tagline on the left. How can I retain the logo and tagline in the center?
Here is a codeply
Thanks for any help!
The flexbox parent of the brand, logo, navbar toggler and 2 collapsable menus is .container-fluid, not the <nav>. So you need to do flex-direction: column; on small screens and flex-direction: row; with justify-content: space-between; on larger screens.
You can use bootstrap built-in classes for that too.
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid flex-column flex-lg-row justify-content-lg-between">
...
</div>
</nav>
fiddle: http://jsfiddle.net/aq9Laaew/144985/ (don't want to register with codeply)
You can do this really simply by creating a "centered" class for the div containing your logo and header text.
.centered {
margin:auto;
display:block;
}
Is this what you had in mind? See the codepen below.
https://www.codeply.com/go/nss8DJRYN3

Bootstrap - Position 1 item to the left while preserving another item's center position

I cannot think of a way to have the logo on the left of the navbar but for the items to be perfectly centered. I tried using margin auto for the items but then they move further right away from the center because of the logo taking up space.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse justify-content-center d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Second NavBar: -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<div class="collapse navbar-collapse d-flex">
<a class="navbar-brand">WIDE-LOGO-TEXT</a>
<ul class="navbar-nav" style="margin: 0 auto;">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/DUmlhXetYE
As you can see from the preview link above, the 2nd navbar items are in the exact same position at the first navbar items. The problem is that I want these to be perfectly centered as though the logo was never there. Therefore I need the nav items to shift to the left to be perfectly centered and unaffected by the logo.
How can I do this? Hope that makes sense!
EDIT: Image to illustrate issue more clearly:
There are 2 way to fix your problem.
1) Logo class apply css position: absolute and parent class apply css position: relative;
2) Menu Class navbar-nav apply css transform: translateX(-80px); you can get navigation center align. as per your expectation.
Use absolute positioning:
.navbar-brand {
position: absolute;
left: 16px;
}
Please use Bootstrap 4 for this kind of predefined library of css.
Copy paste the below code you found the result
enter image description here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-sm">
<button class="navbar-toggler mr-2" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-brand d-flex flex-fill">WIDE-LOGO-TEXT</span>
<div class="navbar-collapse collapse" id="navbar">
<ul class="navbar-nav justify-content-center d-flex flex-fill">
<li class="nav-item">
<a class="nav-link">Home</a>
</li>
<li class="nav-item">
<a class="nav-link">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link">Services</a>
</li>
<li class="nav-item">
<a class="nav-link">Contact Us</a>
</li>
</ul>
</div>
<div class="d-flex flex-fill"><!--spacer--> </div>
</nav>
<div class="container-fluid">
<h5 class="text-center">--center--</h5>
</div>
</body>
</html>
Best of luck :)

My navbar won't center itself

I am having a hard time getting my navbar to center. I want the entire navbar to be at the bottom of the screen always, and the logo to be in the very middle, and then two buttons on either side of it, spanning to the edges of the screen.
And here is the code I currently have:
.navigation {
font-size: 40px;
font-family: Roboto-Light;
color: black;
}
<nav class="navbar">
<div class="container">
<div class="navbar-nav nav-justified">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:200px;" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>
<!-- Navbar -->
I was under the impression that with the new boostrap 4, using nav-justified or nav-fill would do the job for me, just like in the instructional videos
Bootstrap 4 has built in utilities you can use.
<div class="navbar-nav mx-auto">
...
</div>
The class mx-auto for example adds auto margin on the x-axis of the navbar-nav, which should center the items.
.navigation {
font-size: 15px;
font-family: Roboto-Light;
color: black;
}
.navbar-nav {
width: 100%;
display: flex;
justify-content: space-around;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-xl ">
<div class="container">
<div class="navbar-nav mx-auto">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" style="width:100px;" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>
Found the answer with some help from #Brian !
I added a {flex-grow: 3} to his solution, which helped with the spacing.
Then, I declared the size of the logo image and made it an inline-block element, and made the entire navbar-nav the same line-height as the picture.
Solution code is below: (Font-size and image-size are scaled to fit here)
.navigation {
font-size: 15px;
font-family: Roboto-Light;
color: black;
}
.navbar-nav {
width: 100%;
display: flex;
justify-content: space-around;
}
.navbar-nav a:nth-of-type(1) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(2) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(3) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(4) {
flex-grow: 3;
}
.navbar-nav a:nth-of-type(5) {
flex-grow: 3;
}
img.foleyPerformance {
display: inline-block;
width: 100px;
}
.navbar-nav .nav-link {
padding-top: 0;
padding-bottom: 0;
height: 100px;
line-height: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-toggleable-xl">
<div class="container" style="margin-left:50px; margin-right:50px; width:100%;">
<div class="navbar-nav mx-auto">
<a class="navigation videoHub nav-item nav-link" href="#">VIDEO HUB</a>
<a class="navigation aboutSean nav-item nav-link" href="#">ABOUT SEAN</a>
<a class="navigation foleyLogo nav-item nav-link" href="#">
<img class="foleyPerformance" src="../Foley Performance Video Website Layout/FoleyPerformanceLogo.jpg" alt="Foley Logo" />
</a>
<a class="navigation schedule nav-item nav-link" href="#">SCHEDULE</a>
<a class="navigation askSean nav-item nav-link" href="#">ASK SEAN</a>
</div>
<!-- navbar-nav -->
</div>
<!-- Container -->
</nav>
<!-- Navbar -->

Centering navbar links in bootstrap

I want to center my links on mobile view (md and down view) of my navbar but I can't seem to find a solution for it. I am using bootstrap v4-alpha
<div class="container-fluid p-b-3">
<nav class="navbar navbar-full navbar-fixed-top navbar-light bg-faded">
<ul class="nav navbar-nav">
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a>
</li>
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a>
</li>
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a>
</li>
</ul>
</nav>
</div>
Here's the codepen link
You can achieve it using flexbox.
Here's a working pen I created: http://codepen.io/anon/pen/bwbpNx
CSS
.navbar-nav {
display: flex;
align-items: center;
justify-content: center;
}
I think this is one of the proper way to do it. So that, if you add another link. It will remain at center. Hope it helps. Cheers!
Use media query and override styles to make your links center aligned.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');
#media (max-width: 767px) {
.navbar ul {
text-align: center;
}
.navbar ul li {
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
.navbar ul li a {
margin-left: 0 !important;
}
}
<div class="container-fluid p-b-3">
<nav class="navbar navbar-full navbar-fixed-top navbar-light bg-faded">
<ul class="nav navbar-nav">
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" data-toggle="modal" data-target="#myModal" style="cursor:pointer;">LINK 3</a>
</li>
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#kontakti">LINK 2</a>
</li>
<li>
<a class="nav-item nav-link pull-xs-right m-l-2 font-weight-bold" href="#produktet">LINK 1</a>
</li>
</ul>
</nav>
</div>

How to display logo in center at boostrap for mobile device?

I am trying to develop a website using twitter bootstrap. I use a image as logo in navbar using this code
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class="img-responsive" src="images/bradley.png" alt="" /></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="home current-page">Swap</li>
<li class="episodes">Tales</li>
<li class="about">About</li>
<li class="contact">Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
It is ok for laptop. But for mobile device and tab i want that logo will be center. Please tell me How can i do that? This is my site https://dl.dropboxusercontent.com/u/168659703/project/index.html
.navbar-header {
margin: 0 auto;
display: table;
/* margin-right: 50px; */ remove this or add margin-right: auto !important;
}
http://jsfiddle.net/L64Pa/
Here's an update for Bootstrap 4 since the original accepted answer is now a broken fiddle.
The flexbox utils that are now included in Bootstrap 4 can be used to responsively change the alignment of content. For example, here the brand is centered on mobile:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand mx-0" href="#">
Brand
</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-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
<li class="nav-item">
Link
</li>
</ul>
</div>
</nav>
Demo: https://codeply.com/go/DPyf5WFg99
.navbar-header
{
display:block;
text-align:center;
}
You could do a semi "hack" style CSS in your main.css file with:
#media only screen and (max-device-width: 480px) {
.navbar-brand {
float:none !important;
}
.img-responsive {
margin:0 auto !important;
display:block !important;
}
}