So what I'm trying to do is make my image fit on the page without having a scroll. It's obvious that the jumbotron and nav are pushing the image down, so what makes sense to me, is to put the image behind the jumbotron and nav. I tried an overflow of hidden, and that didn't seem to work. I also tried putting everything inside my wrapper, that worked, but then my responsive design got all messed up. This is the picture here that would cover the page: [https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg][1].
Here is my code:
html, body {
margin: 0;
padding: 0;
display: table;
width: 100%;
height: 100%;
}
.jumbotron {
background-color: rgba(51, 51, 51, 1);
padding-bottom: 0;
margin-top: -20px;
margin-bottom: 0;
padding-top: 20px;
h1 {
font-size: 5em;
text-transform: uppercase;
font-weight: 100;
color: #fff;
margin: .2em 0 0 .2em;
letter-spacing: .2em;
span {
font-weight: normal;
}
}
p {
color: #fff;
margin-right: .5em;
margin-bottom: 0;
}
#slogan {
font-size: 1.2em;
margin: 0;
margin-right: 20px;
}
}
.navbar {
background-color: rgba(51, 51, 51, 1);
border-radius: 0;
margin-top: 0;
margin-bottom: 0;
min-height: 0;
border: none;
li a {
outline: none;
text-transform: uppercase;
padding: 5px 15px 10px 15px;
font-size: .9em;
}
}
.wrapper{ // The wrapper is ONLY on the index.html page.
// position: relative;
display: table;
width: 100%;
height: 100%;
text-align: center;
color: #FFF;
background-image: url("https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg");
background-position: center center;
background-size: cover;
}
.h2_slogan {
font-weight: 100;
font-size: 3em;
text-transform: uppercase;
margin-top: 1em;
}
<header class="jumbotron">
<h1>John <span>Smith</span></h1>
<p class="text-right" id="slogan">Accessible. Affordable. Dependable.</p>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav text-center">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<h2 class="text-center h2_slogan">Web Developer & Designer</h2>
</div>
You can just add it to your body this will put it behind both the jumbotron and the navbar.
What you do:
Change this in your HTML
From:
<body>
To:
<body id="homepage">
Add this to your CSS:
body {
background-image: url("../img/header.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
And that's basically it.
JsFiddle
Hope this helps!
Related
I am using position: fixed to fix the name of the website at the top of the page however in doing so the div boundary finishes as soon as the text in the div is completed. It's not covering the complete screen length:
<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed;">
<div style="background-color: bisque; margin-top: 0%; font-family: Copperplate, Papyrus, fantasy; color: black; text-align: center;">
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
</div>
</nav>
This is how it's working with Fixed:
This is how I want it to get fixed at the top:
use 100vw
nav{
width = 100vw;
}
body{
height: 200vh;
background-image: linear-gradient(red, yellow);
}
nav {
position: fixed;
top:0;
left:0;
width:100vw;
/* extra */
height: 50px;
background: red;
margin-bottom: 0%;
}
.nagi{
background-color: bisque;
font-family: Copperplate, Papyrus, fantasy;
color: black;
text-align: center;
}
<body>
<nav>
<div class="nagi">
<h1>
Ratnesh Nagi
</h1>
</div>
</nav>
</body>
Set the right and left property to zero.
You can specify the horizontal position of positioned elements using right and left properties. See the snippet below:
<nav class="navbar navbar-light bg-light" style="margin-bottom: 0%; position:fixed; right: 0; left:0;">
<div style="background-color: bisque; margin-top: 0%; font-family: Copperplate, Papyrus, fantasy; color: black; text-align: center;">
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
</div>
</nav>
You can use flex perhaps as an alternative with some other creative CSS
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.navbar {
/* force this to full width*/
align-self: stretch;
margin-bottom: 1rem;
}
.navbar-content {
text-align: center;
background-color: bisque;
font-family: Copperplate, Papyrus, fantasy;
color: black;
/* make it have a size without the */
border: 1px solid transparent;
}
.navbar-brand {
text-decoration: none;
}
.new-thing {
background-color: #bbdddd;
/* force this to full width just for fun */
align-self: stretch;
}
<div class="container">
<nav class="navbar navbar-light bg-light">
<div class="navbar-content">
<h1><a class="navbar-brand" href="#">Ratnesh Nagi</a></h1>
</div>
</nav>
<div class="new-thing">I am next in line</div>
</div>
I want to put the Logo separeted of the Country Image, with no background(transparent) between them, so you can see the top of the real background.
Like this:How it is right not//////How i want it
As you can see in the first image it's the full navbar with the full red background and I would like to separate the logo of the country leaving the transparent space in the middle but that they keep the red background
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
html, body {margin: 0; height: 100%; overflow: hidden}
*{
margin: 0px 0px;
color: white;
}
body {
overflow-x: hidden;
font-family: 'Lato', sans-serif;
color: white;
}
body{
margin: ;
padding: ;
font-family:'Lato', sans-serif;
}
body {
background: url(negocio.jpg) no-repeat center center fixed;
margin-top: 300px;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size: cover;
}
/*--------Navbar---------*/
.navbar{
text-transform: uppercase;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 0 10px;
border-radius: 15px;
-webkit-box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
-moz-box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
background-image: linear-gradient(to right, rgba(177,17,30,1) 0%, rgba(177,17,30,1) 100%);
}
.navbar-nav li{
padding-right: .7rem;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
/*--------Font Color------------------*/
.navbar-dark .navbar-nav .nav-link{
color: white;
padding-top: .8rem;
}
/*Orange color when Mouse on it*/
.navbar-dark .navbar-nav .nav-link:hover{
color: #fbef7c ;
}
/*------------------END navbar-------------------------*/
<body data-spy="scroll" data-target="#navbarResponsive">
<!--start Home Section-->
<div class="home">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
<a class="navbar-brand" href="#"><img id="colombia" src="img/logo.png" width="50px" height="50px" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<div class="dropdown-divider"></div>
<li class="nav-item dropdown">
<a class="nav-link dropwdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KS Colombia |<img src="https://www.lifeder.com/wp-content/uploads/2017/04/bandera-colombia.jpg" width="50px" height="50px"></a>
</ul>
</div>
</nav>
</div>
So I'm using hero image for my website which is 100 vh high. Now the image is positioned absolutely, so I could position other elements like logo, nav and text on the image relatively to it. After this section, I want to start new section with new image and other text, but once I start new row, column and try to put new image with h1 text, it's hiding behind earlier image. What I mean is that I want a new section with new image and <h1> text appear under the hero image and not overlap it or hide under it as it is now hiding. It's not floated or anything, my floats are cleared, so I don't get it why is this hapenning.
Here is some codepen so you would understand what is hapenning.
<div class="container-fluid clearfix">
<div class="row">
<div class="col-lg-12">
<div class="hero_img">
<img class="logo" src="assets/logo.png"></img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
☰
</button>
<div class="collapse">
<div class="col-xs-12">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
</ul>
</div>
</div>
<div class="black_box clearfix"><h1>Kolding Bike Marathon</h1></div>
<div class="black_box_sub clearfix"><p>Bring activity to your life again</p></div>
<button type="button" class="btn btn-outline-secondary">Register now</button>
<button type="button" class="btn btn-success">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="section_one">
<h1>heyyyyy</h1>
</div>
.hero_img {
background-image: url("assets/hero.jpg");
width: auto;
height: 100vh;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 999;
overflow: hidden;
clear: both;
}
.hero_img {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
}
.logo {
position: relative;
left: 20px;
top: 20px;
z-index: 1002;
width: 5%;
min-width: 50px;
}
.nav {
position: relative;
top: 0;
z-index: 1000;
margin-top: 20px;
/*margin-right: 15px;*/
padding: 20px;
/*float: right;*/
width: auto;
flex-direction: column;
background: #555;
/*width: 100%;*/
filter: opacity(0.93);
}
a {
text-decoration: none;
color: white;
display: block;
border-bottom: 1px solid #444;
}
a:hover {
color: #999;
}
.nav-item {
display: block;
}
.navbar-toggler {
/*float: right;*/
display: flex;
justify-content: right;
position: relative;
z-index: 1000;
margin-top: 15px;
margin-right: 15px;
color: white;
float: right;
}
.black_box {
position: relative;
width: 45%;
min-width: 400px;
text-align: center;
z-index: 1000;
background: black;
margin-top: 10%;
padding: 10px 30px;
clear: both;
}
.black_box h1 {
color: white;
/*font-family: 'PT Sans', sans-serif;*/
font-family: 'Montserrat', sans-serif;
font-weight: 600;
letter-spacing: 1.5px;
}
.black_box_sub {
position: relative;
width: 30%;
min-width: 310px;
text-align: center;
z-index: 1001;
background: black;
margin-top: 2%;
clear: both;
margin-left: 90px;
}
.black_box_sub p {
color: white;
padding: 5px 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
padding-top: 10px;
padding-bottom: 0px;
}
Codepen: http://codepen.io/Limpuls/pen/NpbwYp
There are multiple items to clean up in the code, but to keep the images from overlapping you can remove both entries of position: absolute; from the .hero_img class.
After that, remove the padding left and right from all of the media queries of container-fluid. This may affect and other padding that was needed in that container but would be a quick path to do what you are asking.
I'm trying to make the navebar for a community site and I am having trouble getting the navbar to both look corect and function properly. I can't seem to get the brand and buttons to center and I can't get the shape of the buttons to work correctly. I'm still very new to bootstrap and have no clue what to do.
I am trying to mimic this concept: http://imgur.com/14jP6rA
The header logo and buton images are all here: http://imgur.com/a/FXLOz
This is what I have so far for HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-targer="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/Header_Logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="homeButton"></li>
<li class="articleButton"></li>
<li class="builderButton"></li>
<li class="guideButton"></li>
<li class="aboutButton"></li>
</ul>
</div>
</div>
</nav>
and CSS
body{
background-image: url("https://i.imgur.com/8M7YsDs.jpg");
background-position: center;
}
.navbar{
height: 140px;
width: 100%;
background-image: url("../assets/Header/Header.png");
background-size: cover;
background-color: Transparent;
background-position: center;
border: 0px;
text-align: center;
}
.navbar-nav{
width:100%;
text-align:center;
}
.homeButton{
background-image: url("../assets/Header/Home_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
.articleButton{
background-image: url("../assets/Header/Articles_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
.builderButton{
background-image: url("../assets/Header/Builder_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
.guideButton{
background-image: url("../assets/Header/Guides_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
.aboutButton{
background-image: url("../assets/Header/About_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
Any help would be greatly appreciated.
Thank you very much.
Edit: Looks like I may have made some progress though the problem is not solved
I can't seem to get my footer to display at the bottom of the page. I want it to stay at the bottom at all times, even when it's being responsive.
At the moment, it is vertically centred. Can anyone please help. thanks.
_Layout page
#using System.Web.Optimization
#using InventoryManager.Web.StaticHelpers
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Fleepos" src="...">
</a>
<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>
</div>
<div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="navbarUsername">#SessionHelper.GetUserFullName()</li>
<li>#Html.ActionLink("Sign out", "SignOut", "Shared", null, new { id = "btnButtonSignOut", #class = "btn btn-default navbar-btn" })</li>
</ul>
</div>
</div>
</nav>
#RenderBody()
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>
Property of Floormind</li>
</ul>
</div>
</div>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
CSS
html,body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
height: 100%;
min-height: 100%;
}
header, footer, nav, section {
display: block;
}
.footer {
margin-bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
ul.footer {
margin-top: 10px;
text-align: center;
padding-left: 0;
}
ul.footer li {
color: #333;
display: inline-block;
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
.frmLogin {
padding-left: 30%;
padding-right: 30%;
padding-top: 10%;
}
.navbarUsername {
margin-top: 14%;
margin-right: 10px;
text-align: center;
font-weight: bold;
}
.txtPageTitle {
text-align: center;
}
Use position:fixed and remove margin from .footer class and clear the ul margin by adding margin:0 to ul.footer
ul.footer {
text-align: center;
background: burlywood;
padding-left: 0;
margin: 0;
}
.footer {
height: 50px;
left: 0;
position: fixed;
right: 0;
bottom: 0;
}
Demo
Get your footer out of the container like so:
<div id="footer">
<ul class="footer">
<li>Property of Floormind</li>
</ul>
</div>
Then, in your CSS:
#footer {
position: fixed; // Places the element sticky somehwere the window
bottom: 0; // Places at the bottom
right: 0;
width: 100%; // In case you need to be full width
}
Here's the Fiddle
Hope it helps.