Bootstrap Move elements inside navigation bar - html

I have created navigation bar as follows:
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
<a class="navbar-brand text-white font-weight-bold nav-link">Car Shop</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
Cars
Tools
<button type="submit" class="btn">Pay</button>
</div>
</div>
</nav>
Right now, all the elements are visually sorted from the left side of the screen. That is fine, except for the Pay button, which I would like to have in the right corner of the navigation bar. I tried doing so by adding
style="margin-right: 0px;
to it, but this doesn't seem to be working (it remains at the same place). Can you see my problem?

I used position: absolute; for your class called btn and made it 5px from the top and the right. You can adjust as you would like, but the top and right styling only works if you tell the html that the position is absolute.
.btn {
right: 5px;
top: 5px;
position: absolute;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
<a class="navbar-brand text-white font-weight-bold nav-link">Car Shop</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
Cars
Tools
<button type="submit" class="btn">Pay</button>
</div>
</div>
</nav>

Related

how to make my content area to the right of my menu?

Hello im trying to put my content area to the right of my vertical nav bar using bootstrap 4. in my current code the content area is under the menu. any suggestions on how to fix it so its next to the menu on the right side.
Thank you
<div class="container-fluid">
<div class="col-3">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style>
<ul class="navbar.flex-column">
<li class="nav-item">
<a class="nav-link" href="index.html">Index</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container-fluid">
<div class="col-9">
<p>Main Content area</p>
</div>
</div>
Copy the col-9 div and place it after the col-3 div ends. Add d-flex flex-row classes with container-fluid class.

HTML navigation bar inline items on mobile

This is my navigation bar (uses Bootstrap 4):
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
<a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
Cars
Engine
<button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 0px; right: 15px; top: 11px;">Log Out</button>
</div>
</div>
</nav>
So except the main title Cars Shop, there are three more items:
Cars (aligned from the left)
Engine (aligned from the left)
Log Out button (in the top right corner)
On desktop it looks good, but when I switch to mobile (or resize window appropriately), the three items disappear completely. Is there any way to make this navbar a bit more user friendly?
As far ad I understand the problem is that you are using a collapsed navbar without the ability to open it after it collapses. I fixed it like this for a collapsed menu (you will need to change up your style a bit to make it look good):
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom" style="height: 60px;">
<a class="navbar-brand text-blue font-weight-bold nav-link">Car Shop</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-angle-double-down"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-collapse collapse" id="navbarSupportedContent">
Cars
Engine
<button type="submit" class="btn" name="create" style="background-color: #ffec00!important; position: absolute; margin-right: 3em; right: 15px; top: 11px;">Log Out</button>
</div>
</div>
</nav>
I would also recommend doing the CSS in a separate file if you aren't already and maybe try to use em, vh, vw instead of px.

Align navigation bootstrap center

I want to center align the navigation links from Bootstrap but since I'm not using the list structure, all solutions don't work.
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHeader">
<ul class="navbar-nav">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</ul>
</div>
</nav>
</div>
</section>
I tried everything: text-center, text-align: center, justify-content-center and nothing works.
Your HTML is invalid. ul can only have li as children. Try using a div instead.
Then use the flexbox helper classes available to you in BS4.
<div class="navbar-nav d-flex justify-content-center">
Then we just make the menu full width by adding flex:1. The reason the list items wouldn't center is because the menu was not full width and itself, left aligned.
View in Full Page mode.
.navbar-nav {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon">Toggle</span>
</button>
<div class="collapse navbar-collapse " id="navbarHeader">
<div class="navbar-nav d-flex justify-content-center">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</div>
</div>
</nav>
</div>
</section>
Just CSS code added. hope this help you.
.navbar-nav {
text-align: center;
width: 100%;
float: left;
display: inline-block;
}
.nav-link {
float: none;
display: inline-block;
padding:0 10px;
}
<section id="menuNavigation">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="´button" data-toggle="collapse" data-target="#navbarHeader">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarHeader">
<ul class="navbar-nav">
Uniongs
Sobre
Seja Assinante
Blog
Publicidade
</ul>
</div>
</nav>
</div>
</section>

How to create a panel that opens from the right when a collapsed Navbar icon is clicked?

I've been trying to replicate a few designs from already existing websites. How do I implement a panel that opens from the right when a collapsed Navbar is clicked ?
This is what I'm trying to acheive.
Target Navbar
I'm using Bootstrap 4 and I've tried a lot, messing with the alignment and padding but did not get a way to implement this. Do note that I don't need a right panel when the navbar is not collapsed (smaller viewports). Any suggestions ?
This is my current HTML code for the navbar
<nav class="navscroll navbar navbar-expand-sm bg-transparent navbar-dark fixed-top wow">
<a class="navbar-brand d-sm-none d-md-block d-none d-sm-block" href="#">
<img src="img/vamoslogo2.png" width="170" height=auto alt="">
</a>
<button class="navbar-toggler ml-auto hidden-sm-up float-xs-right" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Work
</li>
<li class="nav-item">
Contact Us
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Blog
</li>
</ul>
</div>
I tried adding another class (.sidenav) so it becomes
<div class="collapse navbar-collapse sidenav" id="navbarCollapse">
And gave .sidenav the following CSS
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
As suggested by a post on w3schools. However, on doing this, all my navbar elements are not visible and my collapsed navbar does not work.
When the collapsed navbar is clicked, Bootstrap will probably change some classnames on the navbar element. Check this out in the inspector. Try to understand what happens and then write css that overrules what bootstrap does.
I'm don't know which classes bootstrap adds, but let's assume it adds a class 'collapsed', then you could write something like this and add your transition and other styling.
.sidenav {
position: absolute;
right: 0;
left: auto;
}
.collapsed .sidenav {
left:100vw;
right:auto;
}

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