How to align navbar links to the right - html

I am creating a landing page for a homework. One of the requirements is to have a navbar with at least 3 buttons. I did it, but the nav-links don't to align on the right of the viewport.
I tried many css properties to align them on the such as float, position. Bootstrap class mr-right but nothing seems to work.
https://codepen.io/HacNass/pen/ZgLqLV
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<header id="header">
<div class="nav-bar">
<nav class="navbar navbar-expand" style="background-color: #F05204">
<div id="logo">
<a href="#">
<img src="https://media.glassdoor.com/sqll/807564/enhancesys-innovation-solutions-pvt-ltd-squarelogo-1449759499797.png" alt="">
</a>
</div>
<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>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li id="1" class="nav-item active">
Home
</li>
<li id="2" class="nav-item active">
Our Product
</li>
<li id="3" class="nav-item active">
Contact Us
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="presentation">
<h2 class="h2">
Sales Network Operations Center (S-NOC)
</h2>
<p class="h5 text-muted">
Automated Transparency
</p>
<p id="description">
Wish to have visibility and control over your Extensive Sales and Distribution network? Develop a highly efficient and automated sales and distribution channel by ensuring proper stock management across the network.
</p>
</div>
<div id="prod-video">
<p>To know more about our product, please check-out the vide</p>
<iframe src="https://www.youtube.com/embed/R6zd9ZRd0nU?showinfo=0&rel=0" width="600" height="400" frameborder="0"></iframe>
</div>
<div class="form-container">
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input type="email" name="email" placeholder="Enter your email here..." required>
<input class="btn-primary" id="submit" type="button" value="Submit">
</form>
</div>
</div>

.navbar-nav{
justify-content: flex-end;
width: 100%;
}

This is happening due to you are using all library classes and assign them for links, so when you are going to apply new changes by custom class it doesn't work.
Try applying custom class and make sure you have not used class from library for child class of that tag

change mr-auto to ml-auto
When you want the navbar-nav to push to the right you should use ml-auto.
If you want to add some space to the right of navbar-nav you can add mr-md-5

At this line:
<ul class="navbar-nav mr-auto">
Change mr-auto to ml-auto

please try these steps..
css
.navbar-nav {
width: 100%;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}

Related

How do I make buttons center in the middle under navbar-expand-sm?

Below is picture of where I am now. I always face this problem of not being able to place things flexibly using bootstrap. In this case, I would like to place all the buttons in the center using justify-content: center, but the built-in class of navbar-expand-sm apparently defaults to justify-content: flex-start. What should I do? Thanks
![Text](https://stacenter image description here
<nav class="navbar bg-danger navbar-dark position-relative">
<div class="navbar-expand-sm">
<div class="container-xxl">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<!-- How to put the buttons in the middle? -->
<ul class="navbar-nav">
<li class="nav-item ml-3">
Login
</li>
<li class="nav-item">
Other Service
</li>
<li class="nav-item">
My Blog
</li>
<li class="nav-item">
Contact Us
</li>
</ul>
</div>
</div>
</nav>
Either add justify-content-center next to navbar-expand-sm and see if this is working
Or trying adding the respective CSS
.navbar-expand-sm { justify-content: center !important; }

Why is my bootstrap navbar-expand-sm navigation covering content?

We are having trouble with our responsive navigation covering content.
When the user toggles the navigation button, we want it to push the H1 and down the screen. I am thinking that our css for the body is effecting this. I cannot think of a decent solution for this, but I have considered having the navigation have a background, but it will still cover our "Denver Moving and Storage" content.
We're still learning how to use stackoverflow and we're thankful for any help you guys may be able to offer.
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
This is our code:
<!-- container with bg img -->
<div class="cover">
<div class="container">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
<!-- Nav end -->
</div>
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I don't know if your body CSS is affecting it or not, since you didn't post that out. But just by looking at your HTML, I see something wrong with your button toggler:
<button ... data-bs-toggle="collapse" data-bs-target="#responsive-navbar" />
Where did you get this kind of syntax from? In Bootstrap documentation, there is no -bs on the data attribute.
In order for the toggler to work properly, you need to remove -bs.
Minor improvement
Your "free estimate" button. Bootstrap has a button style to make an anchor tag look like a button. You don't need to wrap a button with an anchor tag. You can change it to something like:
<li class="nav-item">
<a class="btn btn-success" href="free-estimate.html">Free Estimate</a>
</li>
demo: https://jsfiddle.net/davidliang2008/p4ofdcae/8/

Bootstrap: Inline Form with button unaligns when navbar collapses

Been trying to learn Web Development and am currently messing around with BootStrap 4.0. I have a search field to the right of the navbar which is inline until the dimensions change to that of a phone and my nav links collapse. In the new format my search field and button are no longer inline. To be clear at tablet dimensions it works fine just not at what I would consider phone size. Any Help would be greatly appreciated.
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<!-- Brand and Name -->
<a href="#" class="navbar-brand">
<img src="https://logoobject.com/wp-content/uploads/edd/2018/02/Free-Coffee-Logo-1-820x820.png" width = "30" height="30" class="d-inline-block align-top" alt="">
Koffee
</a>
<!-- For hamburger menu -->
<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>
<!-- Collapsable nav -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left hand side content use margin-right (mr) -->
<ul class="navbar-nav mr-auto">
<!-- Active Link -->
<li class="nav-item">About Us</li>
<!-- Dropdown Menu -->
<li class="nav-item dropdown">
Features
<div class="dropdown-menu" aria-labelledby = "navbarDropdown">
Cultural
The best Cocoa
For the workers
<!-- Just a line :) -->
<div class="dropdown-divider"></div>
Pricing
</div>
</li>
<!-- Disabled link -->
<li class="nav-item">Reviews</li>
</ul>
<!-- Right Hand side content use margin-left (ml) -->
<ul class="navbar-nav ml-auto">
<form class="form-inline">
<input class="form-control" type="search" placeholder="Search..." aria-label="Search">
<button type="button" class="btn btn-outline-success">Go!</button>
</form>
</ul>
</div>
</div>
</nav>
DEMO
Use d-flex instead of form-inline for the search form...
https://jsfiddle.net/ahotm7uv/
<ul class="navbar-nav ml-auto">
<form class="d-flex">
<input class="form-control" type="search" placeholder="Search..." aria-label="Search">
<button type="button" class="btn btn-outline-success">Go!</button>
</form>
</ul>
These are parts of styles that are applied to your .form-control class:
.form-control {
width: 100%;
}
#media (min-width: 576px)
.form-inline .form-control {
width: auto;
}
By default it has width: 100% which is not what you want. But when the screen size is getting bigger than 576px width: auto overlaps it. So changing the default width: 100% to width: auto should do the trick.

Bootstrap When lowering resolution navbar overlaps logo and it gets messed up

When I am moving down to tablet resolution from 991px to the phone resolution, my menu items overlap the logo and everything gets messed up. I am still learning Bootstrap so I would need some help with it, I'd like to fix it and make it actually look good.
The worst part is that I will have to make 2 more list items at the end of the navbar, but this has already messed it up.
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobile-menu">
<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 hidden-xs" id="logo" href="#"><img src="images/Logo.png" alt="Recipe Website"></a>
<center><a class="navbar-brand visible-xs" id="logo-xs" href="#"><img src="images/Logo-xs.png" alt="Recipe Website"></a></center>
</div>
<div class="collapse navbar-collapse" id="mobile-menu">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Recipes
<ul class="dropdown-menu">
<li>Appetizers</li>
<li>Beverage</li>
<li>Bread</li>
<li>Fruit</li>
<li>Meat</li>
</ul>
</li>
<li>F.A.Q</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</form>
</ul>
</div>
</div>
</nav>
Your HTML pasted here looks fine: http://www.bootply.com/I7jobETm52
You should post your custom CSS too. Without seeing it, it's hard to know for sure, but I would bet is has something to do with #logo and #logo-xs which I am guessing you've customized. Do they have set heights/widths/max/min/etc?
If so, remove those, and let the size of the image itself dictate (presumably, that's why you have two sizes). Also position, top, left, could all contribute to this problem if you're using them. First test would be, kill those IDs from the html and if the problem goes away you know where to focus.
Otherwise, try killing the visible-xs/hidden-xs options for test. And finally, try pulling the visible-xs item out of <center> and just put it in a regular div (with class="center-block" if you must).

Twitter Bootstrap Collapsing Menu not in front of other elements

I'm using twitter bootstrap 2.3 and when I make my browser smaller it collapses correctly but when I click on the button to do the dropdown it doesn't appear in front of the other items. Here is a working demo: http://www.thehighlightnetwork.com/ I've been trying to fix it in the developer tools in Chrome but to no avail.
Here is the relevant code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://i.imgur.com/8dN9Ck1.png" alt="small logo" style="height:50px;"></a>
<div class="nav-collapse collapse" style="height:0px;">
<ul class="nav">
<li>The Highlight Network</li>
<li>Official Blog</li>
<li>Profile</li>
<li>Logout</li>
<li>Sign Up!</li>
<li>Upload</li>
</ul>
<ul class="nav pull-right">
<li>
<div class="center-it">
<form class="form-search" action="/search" method="GET" style="margin:0; margin-top:15px;">
<input type="text" name="search_tag" placeholder="search..." class="input-medium search-query pull-right">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
In the official demo site it pushes down all the other elements which I would be happy with or if I can simply make it so that it is in front of the other elements.
The static position of your fixed navbar is causing this, the following css will override that and fix your problem (confirmed in chrome)
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative !important;
}