Currently having an issue while using Bootstrap and attempting to center it within my screen. I have the nav code wrapped in a container, I have display:flex and justify-content:center attached to them with no luck.
<div class="container nav-container">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
<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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home<span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item active">
Twitter
</li>
<li class="nav-item active">
Facebook
</li>
<li class="nav-item active">
Instagram
</li>
<li class="nav-item active">
Town Page
</li>
</ul>
</div>
</nav>
</div>
.nav-container {
display: flex;
justify-content: center;
}
It appears I may have been targeting the wrong element within the CSS. Upon targeting .navbar-nav I was able to get the contents of the navigation bar centered within the bar itself.
Related
I'm trying to make a simple navbar and I want the content of the navbar like "home" and "contact" to be shifted to the right a bit so that it works for mobile users too. This is what my navbar looks like and the red line I drew represents where I want the start of "Test" to be.
I'm not sure how to move "Test Home Contact Us" to the start of that red line. I tried putting style="left:200px" inside each of the texts' <a>...</a> section, but it didn't work. I'm using a bootstrap navbar so I basically just copy and pasted a navbar from bootstrap and here's the code for it:
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home_page') }}"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="market">Contact Us</a>
</li>
</ul>
</div>
</nav>
You're likely looking for style="padding-left: 200px;" instead of left.
Simply adding a container div next to <nav> tag would help.
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{{ url_for('home_page') }}"><b>Test</b></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home_page') }}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="market">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Source: https://getbootstrap.com/docs/4.6/layout/overview/#containers
You have to give padding-left to entire navtag. For exapmle:
nav {
padding-left: 200px;
}
I am trying to create a navbar overtop a carousel. The navbar should have two sets of links;
1: Links aligned to the left
2: Social media links aligned to the right
I have have done this successfully with the code below;
HTML
<nav class="navbar navbar-expand-lg navbar-light bg-light" id = "navigation">
<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" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">GALLERIES <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="navbar-brand" href="#">
<img src="images/icons/shopping-cart.png" class = "nav_icon" alt = "">
</a>
</li>
<li class="nav-item">
<a class="navbar-brand" href="#">
<img src="images/icons/twitter.png" class = "nav_icon" alt = "">
</a>
</li>
</ul>
</div>
</nav>
CSS
#navigation{
z-index: 999;
background:0 !important;
font-size: 1.5vw;
color: #fff !important;
/*position: absolute;*/
}
.nav_icon{
width: 2vw;
height: 2vw;
}
This yields the following result;
However, I want the navbar to be overtop my carousel (code for the carousel not included).
Adding 'position: absolute' interferes with my alignment like so;
Why is this happening? How can I get the same results without messing up the alignment of the links?
I am new to Angular/Bootstrap and currently trying to put an image on top of the navigation bar in the top left corner. Using padding/margin could fix the problem with a normal resolution/static screen size, changing the size put the image elsewhere.
I have tried to use padding and margin, but as I said, it was not possible, to make it "sticky" in the top left corner, when changing the browser sice.
Also using the bootstrap classes, for example "pull-right" (just for test-cases) did not work.
My current code looks like:
<header>
<div class="cloud">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark $green static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" class="pull-right" alt="" width="431.27" height="55.35">
</a>
<button class="navbar-toggler" 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 class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="first">
<h1>TestSite</h1>
</div>
</header>
I expected an image in the top left corner that is responsively staying there while changing browsersizes/devices
Please check this code to see, whether this is the desired result. Fully working demo is available here
Main Changes made on your code is.
added CSS class bg-dark and removed $green static-top on nav. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
fixed the width of brand image to 50%, using css. This can be changed to some other value.
removed width and height attributes from img tag.
.navbar-brand img{
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf">
</a>
<button class="navbar-toggler" 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 class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Impressum</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
aight hello there, so im using bootstrap 4 and trying to create a navbar menu
here is my code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
</ul>
</div>
<ul class="navbar-nav"><li class="nav-item">Login</li></ul>
</nav>
So what im trying here is I want a navbar menu and some items but I want some items not be collapsed and at the same time to be in the right.
I tried moving the item I want to be in the right moved to after toggler button and it's working exactly as I want, but in small devices and in desktop device it shows back to the left.
I tried moving the item I want to be in the right after the div collapse element but it collapses in small devices.
The problem was solved by separating the navbars into two separate divs, using bootstrap4 row and col, and giving a padding of 0 to the two separate divs. I used an in-line style to position the Login item but this is just for illustration purposes. It would be better to convert the in-line style into a class.
<div class="container-fluid">
<div class="row">
<div class="col-8 p-0">
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="height:4rem;">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
</ul>
</div>
</nav>
</div>
<div class="col-4 p-0 ">
<nav class="navbar-nav navbar-light bg-light" style="height:4rem;">
<ul class=" list-unstyled mr-4" style="margin-top:1rem;"> <li class=" float-right">Login</li>
</ul>
</nav>
</div>
</div>
</div>
I've created a nav bar that collapses, based on the browser size. I cannot seem to stop the nav bar from stacking, and the icon goes beneath the nav bar brand when the browser size is reduced. I would like to get it to show on the right side of the nav bar, rather than underneath the brand.
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top navbar-custom" id="mainNav">
<a class="navbar-brand" href="#home">
<img class="logo" src="img/unicornActive.png" onmouseover="hover(this);" onmouseout="unhover(this);" alt="logo">
</a>
<button class="navbar-toggler navbar-toggler-left" 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" id="navbarSupportedContent" role="navigation">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-toggle="tab">About</a></li>
<li class="nav-item"><a class="nav-link" href="#work" data-toggle="tab">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#technique" data-toggle="tab">Technique</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-toggle="tab">Contact</a></li>
</ul>
</div>
</nav>
Any help would be really appreciated! I've tried floating it right and it doesn't seem to work.
Which version of bootstrap and jquery do you use?
I created an instance on jsfiddle with the newest version of the bootstrap framework and I do not get your issue.
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
https://code.jquery.com/jquery-3.2.1.slim.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js
JSFiddler