I'm looking to have the 'non-collapsed' navbar menu overlayed on the `. basically a navigation overtop a large main image. However, when the menu is collapsed, I want it to push all the content from the top of the page. Where the default nav pushes the content from below the navbar.
html
Navbar
<div class="collapse navbar-collapse" id="navbarToggleExternalContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="bg-img" class="container-fluid px-0">
<div id="main-wrap" class="container">
</div>
</div>
css
#bg-img {
background-color: red;
min-height: 75vh;
width: 100%;
}
Related
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 3 years ago.
I'm using bootstrap classes and I need the logo to be in the left but nav items at the right.
To be responsive as well.
https://imgur.com/zL8LrTG
navbar now
<!-- Logo -->
<a class="navbar-brand" href="#">
<img class="img-fluid" src="images/header-logo.png" alt="logo">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Nav items -->
<div class="collapse navbar-collapse" id="collapsibleNavbar"> <!-- Collapse navbar -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
You can add ml-auto to your ul class, which gives your ul a margin-left of auto. It will look like this:
<ul class="navbar-nav ml-auto">
You can use float right to move nav bar right side
#collapsibleNavbar{
float: right;
margin: 0 10px 0 0;
}
You can try this:
// CSS code
nav #collapsibleNavbar{
width: n%; // n = o que achar melhor
margin: n n;
display: block;
}
nav #collapsibleNavbar .navbar-nav{
display: block;
width: auto; // or what You think is better for your project
margin: n n;
float: right;
}
I think you can try that and to encapsulate in a div your Logo and Toggler/collapsibe Button, setting div to float left. Maybe you'll need add some "!important".
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
Hello I'm using kind of standard bootstrap code from tutorials and such trying to get my head around bootstrap. However I've searched everywhere and I can't find code that actually solves my problem.
<header>
<!-- Toggler/collapsible Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-default fixed-top">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<section id="home" class="carousel slide" data-ride="carousel">
<div id="container">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#home" data-slide-to="0" class="active"></li>
<li data-target="#home" data-slide-to="1"></li>
<li data-target="#home" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#home" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#home" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
This is a navbar with a standard carousel under.
The problem is I want a sticky navbar that always stays on top.
But as it is now it overlaps the carousel so I would like it to start below the navbar. I've tried adding padding-top and such with no lucky Ive also tried the codes that handle smaller resolution and ended up with big white spaces in between no matter how much padding I added. My navbar seems to be 56px in height.
I'm guessing this is easy if you have soem basic knowledge about Bootstrap.
There is also other questions I mark these with number if you are able to help.
Home link doesnt go all the way to the top. Is there anyway to fix this.
How do you handle so that multiple pages doesnt show up on one page. Is there a way to make f.ex have a min-height of display height?
add this to your css or download bootstrap.min.css from https://bootswatch.com/
1. for sticky navbar
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
2.
<header id="top">
<a class="nav-link" href="#top">Home</a>
#navbar {
overflow: hidden;
background-color: #333;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px;
text-decoration: none;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%
}
.sticky + .content {
padding-top: 60px;
}
add new class in section for identification not-navbar
<section id="home" class="carousel slide not-navbar" data-ride="carousel"> </section>
add CSS for not-navbar class, default height Bootstrap navbar is 50px (without padding) and 70px (with padding). translateY(56px) because your navbar height is 56px.
.not-navbar {
transform: translateY(56px);
}
So, your content will be exactly below navbar, without overlap with your top content.
I am working on a clients website on Shopify and for some reason the dropdown menu seems to go underneath the product display and filter. I have tried changing the z-index but have had no luck.
Would anyone know what the issue might be? Here is a link to the page having trouble: https://livingtextiles.com/collections/test-collection
<header id="header" style="background-color:#fff!important;">
<div class="header-top pbf-header-top">
<div class="container pbf-container">
<div class="col-md-10 col-sm-9 col-xs-12">
<div class="logo">
<img src="https://cdn.shopify.com/s/files/1/1568/4679/files/wholesale-logo.png?16165857088723477752">
</div>
<nav class="menu-top">
<ul>
<li class="level-1 dropdown">
<a class="dropdown-toggle a1 pbf-ws-text" data-toggle="dropdown" title="Living Textile Brands" style="color:#0c3056!important;font-size: 23px;padding-right:20px;">SHOP BY BRANDS</a>
<ul class="menu-level2 dropdown-menu pbf-column">
<div>
<li class="level2"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/living-textile-ws-logo.png?15789627674492600681"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/lolli-living-ws-logo.png?11306798353806545224"></li>
<li class="level2"><img src="https://cdn.shopify.com/s/files/1/1568/4679/files/poppi-living-ws-logo.png?11306798353806545224"></li>
</div></ul>
<li class="level-1 dropdown">
Collections
<ul class="menu-level2 dropdown-menu">
/*** CSS ***/
#header {
display: block;
float: left;
width: 100%;
}
set position:relative and z-index:99 to the #header, this will fix your problem
#header {
position:relative;
z-index:99;
}
I've followed this post accepted answer to vertical align my navbar links with my logo.
But my SignIn link also follow the vertical size and span to the full 50px of the navbar height:
How can I set a normal height to my Sign In button?
Thanks.
HTML:
<!-- /navbar -->
<nav class="navbar navbar-static-top bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header"
aria-controls="navbar-header">
☰
</button>
<!-- Logo -->
<a class="navbar-brand" href="/en/">
<img class="img" height="50px" src="/static/images/logo.png"/>
</a>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<ul class="nav navbar-nav">
<!-- logged-in nav items -->
<!-- <a class="nav-item nav-link " href="/en/product/">Product</a> -->
<!-- <a class="nav-item nav-link " href="/en/pricing/">Pricing</a> -->
<!-- <a class="nav-item nav-link " href="/en/clients/">Clients</a> -->
<a class="nav-item nav-link " href="/en/about/">About Us</a>
</ul>
<!-- to designers: I am not sure about the 'float: right' style -->
<ul class="nav navbar-nav" style="float: right">
<!-- ... -->
<a class="nav-item btn btn-primary" href="/en/accounts/login/">Sign In</a>
</ul>
</div>
</nav>
And CSS:
.navbar {
background-color: white;
border-bottom-color: lightgray;
border-bottom-style: solid;
border-bottom-width: thin;
}
.nav-item {
line-height: 50px;
}
You are applying the CSS class nav-item which sets line-height: 50px to "Sign in" button. Simply remove it like so:
<a class="btn btn-primary" href="/en/accounts/login/">Sign In</a>
That will make the button height normal. But you ll still have to add something like a top margin to vertically align the button with other links and logo.
.navbar-nav .btn {
margin-top: 10px; // Adjust the actual number of pixels accordingly
}
However you HTML code is also no quite valid. If the hackish code was not intentional you should refer Bootstrap Docs to correctly apply their HTML structures and CSS classes.