I am trying to create a responsive bootstrap sticky nav to go above the carousel. However the navbar covers the top proportion of the image. How can i change so that it sticks above for desktop/mobile, but doesn't overflow onto the image itself.
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar " color-on-scroll="400">
<div class="container">
<div class="navbar-translate">
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span><i class="fas fa-bars" style="
color: #ffffff;
"></i></span>
</button>
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" class="img-fluid" alt="Responsive image">
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation" >
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)" onclick="scrollToDownload()">
<p>Location</p>
Give margin-top:100px or what is the height of you navigation menu, applying that height to the slider parent div class and it works fine.
Solution:
I added body { padding-top: 90px; }
Related
I have a website with a horizontal navbar, works fine. At the appropriate breakpoints it collapses and you open it via the hamburger button.
Underneath I have a bootstrap row:
<div class="row">
<div class="col-xl-2 px-0">
<div class="container-fluid">
<div class="container show-not-on-mobile text-center pt-5"> <h5>Paintings</h5></div>
<nav class="navbar navbar-expand-xl navbar-light navbar-custom">
<div class="container mb-0 px-0 show-not-on-desktop">
<a class="navbar-brand" href="/paintings">Paintings</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mnav" aria-controls="mnav" aria-expanded="false" aria-label="Toggle navigation">
<span class="fancy-toggler navbar-toggler-icon"></span>
</button>
</div>
<div class="container mb-0 px-0">
<div class="collapse navbar-collapse" id="malereinav">
<ul class="navbar-nav mr-auto mx-auto flex-column">
<li class="nav-item">
<a class="nav-link active rounded" title="Movement" href="/paintings-movement">
Movement
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="col-xl-10">
Gallery Content shown with #Columns
</div>
</div>
Everything works fine, except this breakpoint:
#media screen and (min-width:992px) and (max-width: 1280.98px){
#columns[data-columns]::before {
content: '3 .col-lg-4';
}
}
At this breakpoint nothing happens with this navbar:
neither the navbar is displayed horizontally nor vertically.
Also no mobile version with hamburger is displayed.
No matter if I use navbar-expand-xl or navbar-expand-lg or navbar-expand-md ...
Maybe someone has an idea, I would be very happy.
I'm trying to get a picture (below I've tested with a single background color) to cover the navbar aswell as the showcase/jumbotron. However I can't get it to cover both correctly and the navbar is left untouched - even if I create a div that surround the navbar and jumbotron and assign a background picture to this.
Additionally when I try a picture it is stretched in a rather random way across the showcase, how do I get this to cover the elements correctly ?(image size is 1400x693 svg).
<header class="nav-header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<span class="navbar-brand"><i>Logo</i></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse"
aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">How it works</a></li>
</ul><!--//nav-->
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Profile</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-success" href="#">Log out</a>
</li>
</ul>
</div>
</div>
</nav><!--//header-->
</header>
<section>
<div class="showcase">
<div class="container">
<div class="jumbotron jumbotron-fluid showcase-content text-white">
<div class="row">
<div class="col-lg-6">
<h2 class="display-4">Some title.</h2>
<p class="lead">Some additional showcase text.</p>
<p>
<a class="btn btn-secondary text-white " href="#">Get Started -></a>
</p>
</div>
<div class="col-lg-6">
<image></image>
</div>
</div>
</div>
</div><!--//container-->
</div>
</section><!--//promo-->
Css
.showcase {
background-color: red;
background-size: cover;
}
.nav-header {
background-color: transparent;
}
.showcase-content {
background-color: transparent;
}
Codepen:
https://codepen.io/anon/pen/vjqvEE
The issue was having bg-light within the navbar which was overriding assigning the colour to the navbar too.
I want to add my logo in the navbar in bootstrap 4 beta framework.
The height of the navbar should be the same or nearly the same like the normal height without a logo, like you can see in the first example.
Example without and with logo
<nav class="navbar navbar-expand-md navbar-light" style="background-color: #CECFFF;">
<a class="navbar-brand" href="/"><img src="logo.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
....
</li>
</ul>
</div>
</nav>
https://codepen.io/anon/pen/gGpJLq
The solutions from another question here are only for bootstrap 4 alpha working.
You could specify the height of the image to ensure it doesn't increase the size of the navbar by adding a class to the img. Like this:
.logo {
max-height: 40px;
padding: 0;
}
<a class="navbar-brand" href="/">
<img src="https://www.lern-online.net/bilder/logo.png" style="height: 35px; padding: 0 auto;">
</a>
here as you can clearly see i gave an inline styling which you can manually modify further on what you need.
The problem here was that the image which you used was appearing in its defaulting size hence the navigation bar was modifying itself to accomodate it we can avoid this by ensuring the size of our image before-hand.
hope I helped.
I would like to know how to make an image fit bootstrap navbar height (proportionally), here's a descriptive image:
Any idea?
I'm using this structure:
<nav class="navbar navbar-default">
<divclass="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
If you're simply trying to adjust the size of an image to correspond to the height of a default navbar (min-height: 50px), simply use the below CSS as a base depending on how you want the image to fit.
In this example, the image will cover it's part of the navbar completely.
See working Snippet.
body {
padding-top: 70px;
}
.navbar.navbar-inverse {
border: none;
}
.navbar .navbar-brand {
padding-top: 0px;
}
.navbar .navbar-brand img {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <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" href="#">
<img src="http://placehold.it/350x150/f00/fff">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</nav>
<div class="container text-center">
<img src="http://placehold.it/350x150/f00/fff" />
<h4>The Same Image At Full Scale</h4>
</div>
in a previous project of mine I also encountered some issues with this. Here is how I solved the problem:
HTML:
<nav id="myNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="index.html" class="smoothScroll"><img src="img/logo.png" ondragstart="return false;" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" >
<li>
<a>Menu Item1</a>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container -->
</nav>
And the CSS for it:
.navbar-fixed-top {height: 40px;}
.navbar-brand img {height: 40px;}
So setting the navbar and the logo-image to the same height (and not giving it width, thus it will be automatically adjusted) solved the problem for me with good positioning. Two possible cases:
you want a fixed navbar:
.navbar-brand img {position:fixed;right:0;top:0}
you want a header on top:
.navbar-brand img {position:absolute;right:0;top:0}
In both cases I set it to top-right corner of the site, but you can adjust that easily. So the key is: same height navbar and image, with the image positioned well. (Then margin-padding or exact position of the image can easily be set in CSS)
Hope it helped,
Andrew
EDIT: Regarding fixed navbar please check the Bootstrap documentation (it has built-in class like navbar-fixed-top and such).
The top right fixed nav bar for bootstrap come below the logo when resizing the screen resolution. I uploaded the image on https://www.imageupload.co.uk/image/5bDD
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation" style="border:0; border-radius:0;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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" style="padding:2px;" href="index.php"><img src="img/searchimage.png" width="51" height="45" /> </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<i class="fa fa-home fa-2x"></i>
</li>
<li>
AboutUs
</li>
...
...
...
</ul>
</div>
</nav>
Please let me know how to solve this...
Thanks
You need to use media queries to specify a smaller font-size when the screen is smaller. Something like this:
#media (max-width: 900px) {
.navbar-inverse li a {
fonts size: 10px;
}
}
The 900px and 10px are for example purposes so you will have to check out which width and font-size will fix the layout problem.
Also, remove the inline-style padding for your list-item as that is not necessary for aligning the links