<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a></div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
.footer {
width: 100%;
margin-top: 30px;
margin-bottom: 0px;
z-index: 12;
background-color: rgb(134, 147, 158);
}
As you can see my footer does not stick to the bottom. I have the same exact code for other pages and it worked but for this page it does not. Can someone tell me what is wrong? I want it to be at the end of the page.
You can achieve that with positioning. Make the footer position: fixed; and give it bottom: 0; so it will stick to the bottom of the viewport:
.footer {
width: 100%;
height: 200px;
margin-top: 30px;
margin-bottom: 0px;
z-index: 12;
background-color: rgb(134, 147, 158);
position: fixed;
bottom: 0;
}
<div class="row">
<nav class="navbar navbar-default footer">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"></button>
<a class="navbar-brand" href="#">
<img src="images/Logobott.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="foot-stylee">
Apps
</li>
<li>
Gadgets
</li>
<li>
Sience
</li>
<li>
Nature
</li>
<li>
Creative
</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-r">
<li>
© 2016 Great Simple
</li>
</ul>
</div>
</div>
</nav>
</div>
Edit
If you want your footer to be on the bottom of your page rather than on the bottom of the viewport, just remove the position: fixed; give the element above the footer a min-width of 100% minus the height of the footer, e.g.:
min-height: calc(100% - 200px);
When you are first having a <html> that may not fill the window's height, and neither the <body> element, also the .container element... if you want to have a sticky footer, you could try
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100px;
}
body {
padding-bottom: 100px;
}
Edit 1 -
There are 2 ways to not use the fixed position, the first one is using the calc function of CSS:
html, body { min-height: 100vh; }
nav { min-height: 10vh; height: auto; }
footer { min-height: 100px; height: 100px; }
main { min-height: calc(90vh - 100px); }
The other way ia using <table>, <tr> and <td> or display: table, display: table-row and display: table-cell with min-height CSS property.
You may want to look at my answer of this question for more info: Sticky footer that extends when at website-bottom and scrolling further
Edit 2 -
I found that this could be done via the display: flex; easily.
body {
display: flex;
flex-direction: column;
flex-wrap: no-wrap;
min-height: 100vh;
}
header { height: 100px; }
content { flex-grow: 1; }
footer { height: 100px; }
Try on: https://jsfiddle.net/89ucrec5/6/
I found a decent solution to this a few months ago... You have to wrap your page content and footer into separate wrappers and do a little bit of CSS magic with :after to get it right.
html:
<html>
<body>
<div class="content-wrapper">
my content
</div>
<div class="footer-wrapper">
my footer
</div>
</body>
</html>
css:
html, body {
height: 100%;
}
.content-wrapper {
min-height: 100%;
margin-botton: -100px; //set to anything as long as it matches footer-wrapper height
}
.content-wrapper:after {
content: "";
display: block;
}
.footer-wrapper, .content-wrapper:after {
height: 100px;
}
html:
<div class="your-container">
<div class="content">
</div>
<div class="footer">
</div>
</div>
css:
.your-container {
min-height: 100vh;
position: relative;
}
.footer {
position: absolute;
bottom: 0px;
right: 0px;
left: 0px;
}
You will need to make proper padding from main content
Another way is setting flex container so your content would take all remaining space
html:
<div class="your-container">
<div class="content">
</div>
<div class="footer">
</div>
</div>
css:
.your-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
content {
flex-grow: 1;
}
Related
I'm developing a website in Blazor with Bootstrap version 5.1. So I set an image within that navbar. Now I want to align the other items of the navbar just before and after the image in the center. I tried using the Bootstrap 5.0 ms-auto and me-auto to a div and put the nav items in it, but it only aligned the items to the right or left corner of the navbar.
Here is the code of the website:
#page "/"
<style>
.navbar {
position: relative;
padding-top: 0;
opacity: 80%
}
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
}
.img-responsive {
height: auto;
width: auto;
max-height: 156px;
max-width: 250px;
top: 109px;
}
.circle
{
width: 249px;
height: 285px;
border-radius:250px;
font-size:50px;
line-height:500px;
text-align:center;
background:#000
}
body {
background: url(assets/hack2.jpg) no-repeat center center fixed;
background-size: cover;
}
</style>
<div class=bodyContainer>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="circle bg-light navbar-brand">
<a href="#" class="navbar-brand">
<img class="img-responsive navbar-brand" src="assets/logo.png" alt="logo">
</a>
</div>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
Home
Über uns
Aktuelles
Genossenschaft
Nochagfrogt
Kontakt
</div>
<div class="navbar-nav ms-auto">
Login
</div>
</div>
</div>
</nav>
</div>
If it helps (because I created a container class for the body):
.bodyContainer {
height: calc(100vh - 60px);
}
I made your .navbar-nav a font-color black just so I could see it better, and added white-space: nowrap; on your navbar-nav class so your words don't break when resizing. I am not sure if I properly understood what you wanted your end result to be, but I think I got the gist of it.
For this to work with the ease of customization in the future, I suggest splitting each side into two separate divs, as I did below. .left containing the left side nav components, and .right containing the right components. I put a flex-display on your two new divs dividing the components, and spaced them out using gap. Then I nested them in a parent nav element which I called same-line for demonstration purposes.
First, add a flex-display then you can add justify-content: space-around; on your parent nav that allows for the two sides to space evenly to both the left and right sides respectfully. If your logo is truly the size of the .circle class, I added a sample media-query so the font-size of the nav components gets smaller and doesn't overlap the logo.
.navbar {
position: relative;
padding-top: 0;
opacity: 80%;
}
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
}
.img-responsive {
height: auto;
width: auto;
max-height: 156px;
max-width: 250px;
top: 109px;
}
.circle {
width: 249px;
height: 285px;
border-radius:250px;
font-size:50px;
line-height:500px;
text-align:center;
background: black;
}
.navbar-nav a {
color: black;
white-space: nowrap;
}
/* additions */
.left {
display: flex;
gap: 20px;
}
.right {
display: flex;
gap: 20px;
}
nav.same-line {
display: flex;
justify-content: space-between;
}
#media only screen and (max-width: 800px) {
.same-line {
font-size: smaller;
}
.left, .right {
display: flex;
gap: 5px;
}
}
/* additions END */
body {
background: url(assets/hack2.jpg) no-repeat center center fixed;
background-size: cover;
}
<div class="bodyContainer">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="circle bg-light navbar-brand">
<a href="#" class="navbar-brand">
<img class="img-responsive navbar-brand" src="assets/logo.png" alt="logo">
</a>
</div>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<nav class="same-line"> <!-- puts both .left & .right one same line -->
<div class="navbar-nav left">
Home
Über uns
Aktuelles
</div>
<!-- left contains leftside nav components, right = opposite -->
<div class="navbar-nav right">
Genossenschaft
Nochagfrogt
Kontakt
</div>
</nav>
<div class="navbar-nav ms-auto">
Login
</div>
</div>
</div>
</nav>
</div>
Click full-page when testing the snippet, and resize your browser to watch the font-size change just before it overlaps. I would target this same media-query to change your logo size when resizing also.
I have a navbar that looks like this:
but when i added position: fixed on the header, the width changed and become like this:
Here is my index.html
<header>
<div class="logo-container">
<img src="https://i.ya-webdesign.com/images/rocket-logo-png-4.png" alt="logo" class="logo">
<h4>Rockode</h4>
</div>
<nav>
<ul class="nav-links">
<li class="nav-link active">Beranda</li>
<li class="nav-link">Produk</li>
<li class="nav-link">Pengembang</li>
<li class="nav-link">Kontak</li>
</ul>
</nav>
<div class="header-right">
<button class="btn btn-sign-up">Daftar</button>
<button class="btn btn-sign-in">Masuk</button>
</div>
</header>
<main>
<div class="content">
<article>This is article</article>
<article></article>
</div>
<aside></aside>
</main>
and here is style.css
main {
background-color: white;
height: 720px;
z-index: 1;
position: relative;
padding-top: 188px;
}
header {
display: flex;
padding: 30px 10%;
height: 88px;
align-items: center;
justify-content: space-between;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.075);
z-index: 2;
position: fixed;
background: white;
}
Not 100% sure what the problem is, but I just added this and it works fine...
main {
position: relative;
padding-top: 88px
}
header {
position: fixed;
}
See fiddle: https://jsfiddle.net/8ktxzfvL/
That was my bad for didn't notice the width value on header section.
It solved by declaring width: 100%.
Can you please check out this fiddle:
https://jsfiddle.net/3047p0wy/
Here is the HTML:
<nav class="navbar navbar-default">
<div class="container-fluid" id="navigation-bar">
<div class="navbar-header">
<div class="headerspace">
<a href="http://google.com">
<span>The title</span>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-element">
<ul class="nav navbar-nav navbar-right" id="tabs">
<li>
<div class="tab">
<a href="http://google.com">
<div class="greysquare">
<div class='greysquare-content'>
<div>
<span>EX</span></div>
</div>
</div>
<div class="notgreysquare"><span>PLORE</span></div>
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
And the css is as follows:
.navbar {
height: 100%;
margin-top: 10px;
background-color: inherit;
border: none;
}
.navbar-header {
height: 100%;
width: 30%;
}
#navigation-bar {
height: 100%;
}
#navbar-collapse-element {
height: 100%!important;
}
#tabs {
max-height: 100%;
}
.tabspace {
max-height: 100%;
width: 70%;
}
.tab {
margin-left: 5%;
margin-top: 1%;
max-height: 100%;
}
.greysquare,
.notgreysquare {
display: inline;
}
.greysquare {
display: block;
width: 70px;
background-color: #CCCCCB;
height: 100%;
max-height: 100%;
}
.greysquare:before {
content: "";
display: block;
padding-top: 100%;
}
.greysquare-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.greysquare-content div {
display: table;
width: 100%;
height: 100%;
}
.greysquare-content span {
display: table-cell;
text-align: right;
vertical-align: bottom;
}
.notgreysquare {
height: 100%;
}
Basically I have this navbar, and inside it I am trying to work with each navigation tab. The idea is to have the first two letters of a link inside a grey square so that the letter were in the bottom right corner of the square and then the rest of the word was outside of the grey square but on the same line with the first two letters. See the image above to understand what I am looking for (can ignore the colours).
I started with following another fiddle that I found here: https://jsfiddle.net/josedvq/38Tnx/
So, as you can see, of the word EXPLORE, the EX is, indeed, placed in the right span, but the greysquare-content, for some reason, at least visually includes the PLORE part of the title which is not even its child, and I cannot figure out why it happens.
I would appreciate any help, really.
Is this what you're looking for:
https://jsfiddle.net/3047p0wy/3/
The HTML
<nav class="navbar navbar-default">
<div class="container-fluid" id="navigation-bar">
<div class="navbar-header">
<div class="headerspace">
<a href="http://google.com">
<span>The title</span>
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-element">
<ul class="nav navbar-nav navbar-right" id="tabs">
<li>
<div class="tab">
<a href="http://google.com">
<div style="display: block;">
<span class="greysquare-content pull-left">EX</span>
<span class="notgreysquare pull-left">PLORE</span>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
and the CSS
.navbar {
height: 100%;
margin-top: 10px;
background-color: inherit;
border: none;
}
.navbar-header {
height: 100%;
width: 30%;
}
#navigation-bar {
height: 100%;
}
#navbar-collapse-element {
height: 100%!important;
}
#tabs {
max-height: 100%;
}
.tabspace {
max-height: 100%;
width: 70%;
}
.greysquare-content {
background-color: #CCCCCB;
padding: 5px;
}
.notgreysquare {
padding: 5px 5px 5px 0px;
}
Certain portions of the page looks different in firefox than chrome.
This is what it looks like in chrome:
This is what it looks like in firefox:
HTML code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
margin-top: 0;
padding-top: 0;
overflow-x: hidden;
}
#media print {
body {
margin-top: 0 !important;
}
}
body {
background-color: white;
color: black;
padding: 0;
margin: 0;
min-height: 100%;
min-width: 100%;
overflow-x: hidden;
}
.rowa {
padding: 10px;
background-color: black;
color: white;
height: 100%;
margin: 0;
}
#title {
font-size: 36px;
display: inline-block;
color: white;
}
<nav class="navbar navbar-inverse " id="navtop">
<div class="container-fluid rowa">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="title">title</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right menu " id="menu1">
<li> Home
</li>
<li> Booking
</li>
<li>Rates
</li>
<li> About us
</li>
<li> Contact us
</li>
</ul>
</div>
</div>
</nav>
I am not able to remove the extra space from top and the extra padding within the nav-bar.
I have set margin and padding to 0 for html and body in css, and min-width and min-height is 100%.
Also there is extra spacing between an image and form in firefox (for small screen devices).
How to I get rid of these extra spaces in firefox? Please help.
Adjust using height rule in CSS to id="menu1".
Currently, I've made it so that the sidebar appears where the 'apply' page starts. I want the sidebar to then remain in that position as the user continues to scroll down. Another thing that confuses me is that when I set the position to 'absolute' for the bar, it just disappears completely. Why does this happen?
CSS:
#navbar {
background-color: black;
overflow: auto;
height: 100%;
width: 25%;
z-index: 1000;
float: right;
}
#navbar-links {
list-style-type: none;
display: block;
}
#apply {
background-color: red;
}
#about {
background-color: orange;
}
#sponsor {
background-color: green;
}
HTML:
<div id="pages">
<!-- apply page -->
<div id="apply" class="sections" tabindex='2'>
<!-- navigation bar -->
<div id="navbar">
<ul id="navbar-links">
<li>Apply</li>
<li>About</li>
<li>Sponsor</li>
</ul>
</div>
<div class="container">
</div>
</div>
<!-- about page -->
<div id="about" class="sections" tabindex='3'>
<div class="container">
</div>
</div>
<!-- sponsor page -->
<div id="sponsor" class="sections" tabindex='4'>
<div class="container">
</div>
</div>
</div>
You need to use position: fixed fix the position to the view.
You can then use: top right left and bottom to put the element where you want it to be. So right: 0; and top: 0; put the element 0px from the right and top.
The same is true for position absolute, if you didn't use any of those that may be why it disappeared.
See here for more details on css position property: http://www.w3schools.com/cssref/pr_class_position.asp
#navbar {
position: fixed;
right: 0;
top: 0;
background-color: black;
color: white;
overflow: auto;
height: 100%;
width: 25%;
z-index: 1000;
}
#navbar-links {
list-style-type: none;
display: block;
}
#apply {
background-color: red;
}
#about {
background-color: orange;
}
#sponsor {
background-color: green;
}
<div id="pages">
<!-- apply page -->
<div id="apply" class="sections" tabindex='2'>
<!-- navigation bar -->
<div id="navbar">
<ul id="navbar-links">
<li>Apply</li>
<li>About</li>
<li>Sponsor</li>
</ul>
</div>
<div class="container">
</div>
</div>
<!-- about page -->
<div id="about" class="sections" tabindex='3'>
<div class="container">
</div>
</div>
<!-- sponsor page -->
<div id="sponsor" class="sections" tabindex='4'>
<div class="container">
</div>
</div>
</div>