I am trying to make it so the image is right behind the navbar, where the navbar is on top of the image, although the image must start from the top of the page just like the nav bar, and I don't know why it's showing this white line in between them.
This is an angular 6 website (not that it really matters in this case), I am using bootstrap. (I know this is not very angularish to do putting all this code in one style sheet, I am just fuzzing with it so then I can refactor).
I tried to fuzz with positioning and z-index and margin, but nothing works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular Bootstrap Demo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
</head>
<body>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarColor02"
aria-controls="navbarColor02"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<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">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="text"
placeholder="Search"
/>
<button class="btn btn-secondary my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<!-- -->
<!-- main app root -->
<app-root></app-root>
<!-- -->
<!-- Dependencies -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>
<!-- -->
</body>
</html>
And the stylesheet:
.jumbotron {
color: #fff;
height: 500px;
}
html {
background-image: url("../assets/images/BBLogo.png");
}
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
#front-page-links {
margin: auto;
width: 50%;
padding: 10px;
}
.logo {
width: 100%;
height: 100vh;
background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
background-size: cover;
}
/* Navbar */
#font-face {
font-family: circuitBored;
src: url(../assets/fonts/CircuitBoredNF.ttf);
}
#font-face {
font-family: computerFont;
src: url(../assets/fonts/jura.demibold.ttf);
}
.navbar.navbar-inverse {
margin-bottom: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 20px;
margin-bottom: 0;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
}
nav ul li {
display: inline-block;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
padding: 16px 40px;
}
nav ul li a {
text-decoration: none;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
color: #fff;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
font-family: computerFont;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.menu {
font-family: computerFont;
font-size: 16px;
font-weight: bold;
}
.menu ul li a:hover {
background-color: #35701c;
}
.menu li ul {
display: none;
position: absolute;
}
.menu li:hover ul {
display: grid;
top: 55px;
}
.submenuD li {
position: relative;
text-align: left;
z-index: 1;
}
.copyright {
font-family: "computerFont";
font-weight: lighter;
text-align: center;
}
#media (max-width: 950px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
There's a few problems with your code. First, you are importing Bootstrap3 in your link tag and your script tags, but you are using Bootstrap4 syntax. This is causing very little of your CSS to actually render properly.
Bootstrap3 was known to have issues with margin-collapsing, which you can read more about at MDN or CSS-Tricks. For the most part, Bootstrap4 solved most of these issues. I've changed your dependencies to the Bootstrap4 dependencies and added an orange div to show you how it looks without the collapsing margins.
.jumbotron {
color: #fff;
height: 500px;
}
html {
background-image: url("../assets/images/BBLogo.png");
}
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
#front-page-links {
margin: auto;
width: 50%;
padding: 10px;
}
.logo {
width: 100%;
height: 100vh;
background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
background-size: cover;
}
/* Navbar */
#font-face {
font-family: circuitBored;
src: url(../assets/fonts/CircuitBoredNF.ttf);
}
#font-face {
font-family: computerFont;
src: url(../assets/fonts/jura.demibold.ttf);
}
.navbar.navbar-inverse {
margin-bottom: 0;
}
nav {
position: fixed;
width: 100%;
line-height: 20px;
margin-bottom: 0;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
font-family: computerFont !important;
font-size: 16px;
font-weight: bold;
}
nav ul li {
display: inline-block;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
padding: 16px 40px;
}
nav ul li a {
text-decoration: none;
font-family: computerFont;
font-size: 16px;
font-weight: bold;
color: #fff;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
font-family: computerFont;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
.menu {
font-family: computerFont;
font-size: 16px;
font-weight: bold;
}
.menu ul li a:hover {
background-color: #35701c;
}
.menu li ul {
display: none;
position: absolute;
}
.menu li:hover ul {
display: grid;
top: 55px;
}
.submenuD li {
position: relative;
text-align: left;
z-index: 1;
}
.copyright {
font-family: "computerFont";
font-weight: lighter;
text-align: center;
}
#media (max-width: 950px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Angular Bootstrap Demo</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<!-- Nav bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<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">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" />
<button class="btn btn-secondary my-2 my-sm-0" type="submit">
Search
</button>
</form>
</div>
</nav>
<div style="background-color: orange; width: 100%; height: 500px;">
</div>
<!-- -->
<!-- Dependencies -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- -->
</body>
</html>
Remover margin-bottom:0px;
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0px;
border: 1px solid transparent;
}
Related
I'm trying to add a logo to the navigation bar, but the logo I am trying to add is not displayed properly.
I've tried setting width and height, it stretches but it doesn't render properly, and the text written in the image is also not readable.
But when I use another different png image it is visible properly, for example when using this .png file https://www.logomakr.in/img/logo-design2.png, it is displayed properly and is visible.
body {
font-family: "Open Sans", sans-serif;
color: #444444;
}
#header {
background: #fff;
transition: all 0.5s;
z-index: 997;
padding: 15px 0;
box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1);
}
#header.header-scrolled {
top: 0;
}
#header .logo {
font-size: 30px;
margin: 0;
padding: 0;
line-height: 1;
font-weight: 700;
letter-spacing: 0.5px;
font-family: "Poppins", sans-serif;
}
#header .logo a {
color: #2c4964;
}
#header .logo img {
max-height: 40px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar>ul>li {
position: relative;
white-space: nowrap;
padding: 8px 0 8px 20px;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #2c4964;
white-space: nowrap;
transition: 0.3s;
border-bottom: 2px solid #fff;
padding: 5px 2px;
}
.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #1977cc;
border-color: #1977cc;
}
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header id="header" class="fixed-top">
<div class="container d-flex align-items-center">
<a class="logo me-auto" href="#">
<img src="https://toppng.com/uploads/preview/logo-design-concept-for-huebris-sample-logo-image-11563507273imdbiqdnjt.png">
</a>
<nav id="navbar" class="navbar order-last order-lg-0">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#about">About</a></li>
<li><a class="nav-link scrollto" href="#services">Services</a></li>
<li><a class="nav-link scrollto" href="#departments">Events</a></li>
<li><a class="nav-link scrollto" href="#departments">Contact Us</a></li>
<li><a class="nav-link scrollto" href="#doctors">Careers</a></li>
</ul>
</nav>
<!-- .navbar -->
</div>
</header>
<!-- End Header -->
What is causing this behavior? How to do it properly?
Just make the image rectangular, scale it decently and please erase that grey background so that it'll look good.
Then wrap that up using navbar-brand and img-fluid classe as shown here: https://getbootstrap.com/docs/5.1/components/navbar/#image
I'm trying to reproduce a website in HTML et css. In my code, I have differents lists, each on with differents css properties. In my browser, the properties are mixed, and I can't understand...
My html code :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="file:///my css !/css/odpf.css" >
<title>Olympiades</title>
</head>
<body>
<div id="barre_haut">
</div>
<div id="wrapper">
<div class="container bg-white">
<nav>
<ul id="menu_haut" class="nav flex-column flex-md-row justify-content-end">
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Recherche</a></li>
<li id="menu_haut" class="nav-item menurouge"><a class="nav-link" href="#">Connexion</a></li>
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Mon compte</a></li>
<li id="menu_haut" class="nav-item"><a class="nav-link" href="#">Presse</a></li>
</ul>
</nav>
<div class="row ">
<div class="col-md-4 bg-white"><div class="position-absolute" style="bottom:0px; left:35px"><img src="https://odpf.org/templates/odpftemplate/img/site-logo-398x106.png" alt="Logo Olympiades" style="width:100%; height:auto"></div></div>
<div class="col-md-3 bg-white"></div>
<div class="col-md-5 bg-white pr-0"><img src="https://odpf.org/templates/odpftemplate/img/home-rightcol-top2.png" alt="image_en_tete" style="width:100%; height:auto"></div>
</div>
<div class="row">
<div class="col-md-4 col-gche-accueil ">
<div class="row px-3 pb-0">
<img src="https://odpf.org/images/odpf_slider_home_08.jpg" style="width:100%; height:auto">
<div class="menugche">
<h3 class="mt-1">les olympiades de physique france</h3>
<ul>
<li class="menugche">C'est quoi ?</li>
<li class="menugche">Comment ça se passe ?</li>
</ul>
<h3 class="mt-1">Revivez les éditions passées</h3>
<ul>
<li class="menugche">Archives</li>
<li class="menugche">Les mémoires</li>
<li class="menugche">Colloque de la 20ème édition</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="barre_bas">
</div>
</body>
</html>
And my css :
#import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700);
body {
margin:0;
padding:0;
background: url('../images/bg-home.png') no-repeat center fixed;
background-size: cover;
}
a {
text-decoration: none;
color:black;
}
.menurouge {
background-color: #b1191d;
color: white;
}
.menurouge a {
text-decoration: none;
color:white;
}
.fondnoir {
background-color: black;
color: white;
}
/* Header */
#barre_haut {
background-color: black;
height: 16px;
width: 100%;
}
#wrapper {
background-color: #555f69;
/*position: relative;
top:16px;*/
height: 35px;
width: 100%;
padding: 0;
}
.container {
width:100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 576px){
.container {
max-width: 540px;
}
}
#media (min-width: 786px){
.container {
max-width: 720px;
}
}
#media (min-width: 992px){
.container {
max-width: 960px;
}
}
#media (min-width: 1200px){
.container {
max-width: 960px;
}
#barre_bas {
clear: both;
width: 100%;
background-color: #555f69;
height: 10px;
}
#menu_haut {
height: 35px;
background-color: white;
color: black;
font-family: 'Oxygen', sans-serif;
font-size: 12px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
list-style-type: none;
text-decoration: none;
}
.col-gche-accueil {
background-color: black;
width: 100%;
float: left;
position: relative;
padding: 46px 20px 20px;
}
.col-gche-accueil::before {
content: ' ';
background: url('https://odpf.org/templates/odpftemplate/img/home-leftcol-top.png') no-repeat;
width: 100%;
height: 101px;
top: 0;
left: 0;
position: absolute;
z-index: 10;
}
.menugche h3 {
font-family: 'Oxygen', sans-serif;
font-size: 40px;
line-height:43px;
font-weight: 300;
color: #ffffff;
text-transform: uppercase;
margin: 14px 0 8px;
}
.menugche ul li:before {
content: '';
display: block;
}
.menugche ul li:after {
content: '';
display: table;
clear: both;
}
.menugche ul,li,a {
background-color: #b1191d;
color: #ffffff;
display: block;
font-size: 18px;
line-height: 20px;
list-style-type: none;
text-decoration: none;
padding: 3px 0 0;
margin: 0;
}
And, tipycally, my menu line in beginning should be black on withe, in 12, and it appears withe on red, in 20 with properties defined by "menugche"....
What's wrong in my head ?
Thank you in advance !
.menugche ul,li,a {
This defines three separate rules:
Any ul element which is a descendant of an element with the menugche class;
Any li element;
Any a element;
I suspect you wanted the rules to be:
Any ul element which is a descendant of an element with the menugche class;
Any li element which is a descendant of an element with the menugche class;
Any a element which is a descendant of an element with the menugche class;
If that's the case, you'll need to repeat the class name:
.menugche ul, .menugche li, .menugche a {
Hi I am working on designing navigation bar. I want to keep application name in left side and logo in right side. Before to logo I want to keep one drop-down. I tried as below.
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-light .navbar-brand {
color: rgba(0,0,0,.9);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
</head>
<body>
<div class="navbar" >
<div class="navbar navbar-light" style="backgroundColor:#483D8B">
<a class="navbar-brand" href="#" style="fontSize:20px;color:#FFFFFF">Dashboard</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a class="navbar-brand navbar-right" href="#">
<img alt="CompanyLogo" src={profilePageImage} />
</a>
</div>
</div>
</body>
</html>
I am not able to design it in the way I want. Always project name, dropdown and logo comes one after the other but I want dropdown and logo in full right side. Can someone help me to figure it out. thanks
I hope this is what u r expecting:
Create a new div(right side content) and wrap the dropdown div and company logo into that div.
Then add flex and space-between property to the navbar div.
.navbar {
overflow: hidden;
width: 100%;
background-color: #333;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.right-side-content {
display: flex;
align-items: center;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar-brand {
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-light .navbar-brand {
color: rgba(0, 0, 0, .9);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" </head>
<body>
<div class="navbar">
<div class="navbar navbar-light" style="backgroundColor:#483D8B">
<a class="navbar-brand" href="#" style="fontSize:20px;color:#FFFFFF">Dashboard</a>
<div class="right-side-content">
<div class="dropdown">
<button class="dropbtn">Dropdown
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a class="navbar-brand navbar-right" href="#">
<img alt="CompanyLogo" src="https://dummyimage.com/40x40/fff/000?text=logo" />
</a>
</div>
</div>
</div>
</body>
</html>
Change float: left; to float: right;
Change float: left; to float: right; in the css class .dropdown;
.dropdown {
float: right;
overflow: hidden;
}
Add float: right; in the css class .navbar-light .navbar-brand;
.navbar-light .navbar-brand {
float: right;
color: rgba(0,0,0,.9);
}
Try this out.
#media only screen and (max-width: 768px) {
.logo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Bootstrap Example</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">App Name</a>
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
<div class="logo" >
<img class="hidden-xs" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm working on a nav bar and the positioning of the elements seem to be off. I have been trying to find the problem but the code looks fine to me
The issues
Navbar links seem to overflow when there is no need for it.
navbar-expand-md isn't working. And so when I resize the page it looks completely wrong.
Any help is greatly appreciated.
*{
margin: 0;
padding: 0;
line-height: 1;
}
body {
margin: 0;
font-family: sans-serif;
background: #FFFFFF;
-webkit-font-smoothing: antialiased;
overflow: hidden;
overflow-x: hidden;
}
nav {
margin: 0 0 0 0;
font-family: 'Lato', Sans-serif;
font-size: 100%;
width: 100%;
}
.navbar {
margin: 0;
padding-top: 1.5em;
padding-bottom: 1.5em;
padding-left: 6em;
padding-right: 6em;
border: none;
list-style-type: none;
background-color: #000;
}
.logo {
float: left;
}
.navbar-brand {
padding-left: 6px;
text-decoration: none;
color: #fff;
background-color: #000;
font-size: 22px;
font-weight: 400;
margin: 0;
display: inline;
}
.navbar ul li {
display: inline;
}
.navbar ul li a {
right: 6em !important;
text-decoration: none;
color: #fff;
background-color: #000;
font-size: 18px;
font-weight: 400;
right: 6em;
}
.nav-link {
padding-left: 20px;
padding-right: 20px;
}
.navs {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true">
<link rel="icon" href="9h.png">
<title>9haus Studios</title>
<link href="graphic-design.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
<script type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="logo"><img src="9haus-logo-white.png" alt="9haus logo" width="63px" height="19px"></a>
<a class="navbar-brand" href="graphic-design.html">Graphic design</a>
<div class="navs">
<ul class="navbar-brand">
<li class="active"><a class="nav-link" href="graphic-design.html">Work</a></li>
<li><a class="nav-link" href="graphic-studio.html">Studio</a></li>
<li><a class="nav-link" href="#">Services</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Your issue is nav {width:100%} it should be nav {width:auto}.
I was wondering how can I make my background image using bootstrap 'img-responsive'? The background image is with in herodiv
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg");
background-attachment: fixed;
position: relative;
text-align: center;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
height: 40px;
margin: 1% auto;
opacity: 0.9;
padding: 0px;
width: 250px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</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">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
</html>
Use background-size: cover
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
cover - A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
Alternatively you might try contain depending on your desired behavior, but from the looks of your portfolio, cover is what you want
contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.
* edit - also added background-position: center center; background-repeat: no-repeat; in the shorthand background property for .hero since from the looks of your portfolio, you want those.
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liam Docherty Digital Portfolio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
body {
margin: 0;
padding: 0;
}
.navbar.navbar-default {
background-color: #4D5061;
height: 10vh;
z-index: 100;
}
.navbar.navbar-default ul {
list-style-type: none;
text-align: right;
}
.navbar.navbar-default ul li {
display: inline-block;
}
.dropdown-menu li {
text-align: center
}
.dropdown .dropdown-menu {
background-color: #4D5061;
}
.dropdown .dropdown-menu a {
color: white;
}
.navbar.navbar-default ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul li:after {
content: '';
position: absolute;
right: 50%;
bottom: 0;
left: 50%;
height: 3px;
background-color: #FFFFFF;
border-radius: 9px;
transition: all .2s;
}
.navbar.navbar-default ul li a:hover {
color: white;
}
.nav.navbar-nav,
.nav.navbar-nav>li {
float: none;
}
.navbar.navbar-default ul li:hover:after {
right: 0;
left: 0;
}
.nav-title {
font-size: 14pt;
margin: 0;
top: 35px;
left: 50px;
width: 100%;
position: absolute;
text-align: center;
color: white;
font-family: 'Roboto', sans-serif;
}
.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
position: relative;
display: block;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
.hero {
background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;;
background-attachment: fixed;
position: relative;
background-size: cover;
text-align: center;
width: 100%;
max-width: 100%;
width: 100vw;
height: 100%;
}
section {
position: relative;
height: 95vh;
}
.section1 {
height: 100vh;
text-align: center;
color: white;
}
.section2 {
background-color: #11B5E4;
text-align: center;
color: white;
}
.section3 {
background-color: #FFFFFF;
text-align: center;
color: white;
}
.fa-angle-down {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.fa-angle-up {
color: #4D5061;
position: absolute;
bottom: 0px;
}
.footer {
height: 6vh;
background-color: #4D5061;
padding: 0;
right: 0;
bottom: 0;
left: 0;
}
.footertext {
font-size: 14pt;
color: white;
font-family: 'Roboto', sans-serif;
text-align: center;
}
.profile.box {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.shape {
border-radius: 25px;
background: #4D5061;
content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
color: white;
height: 250px;
margin: auto;
padding: 3px;
width: 250px;
}
.shape2 {
background: linear-gradient(35deg, #4D5061, #4D5061);
border-radius: 85px;
color: white;
height: 40px;
margin: 1% auto;
opacity: 0.9;
padding: 0px;
width: 250px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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>
<a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a>
<h1 class="nav-title">Liam Docherty's Digital Portfolio</h1>
</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">
<li>Home
</li>
<li class="dropdown">
About Me <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Contact
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li class="dropdown">
Units <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
<li>Clients
</li>
<li>Contact Me
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<section id="section1" class="section1">
<div class="hero">
<div class="profile box">
<div class="shape"></div>
<div class="shape2">
<p>kjjjjjjjjjkjjjkkjkj</p>
</div>
</div>
</div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
</html>
You can try
<div>
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</div>
Source: Make an image responsive - simplest way
I personally use Jquery's Backstretch. The code is responsive and easy to plug in by using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
And then adding the style/image to a .css doc like so:
<style>
.content-wrapper {
/* This image will be displayed fullscreen */
background: url('http://site.rockbottomgolf.com/blog_images/Hole%2012%20-%20Imgur.jpg') no-repeat center fixed;
scroll-x /* Ensure the html element always takes up the full height of the browser window */ min-height: 100%;
/* The Magic */
background-size: cover;
}
</style>
EDIT!! - I posted a link to Jquery but not the actual responsive backstretch plugin. Note you must keep the required script above and then add backstretch following it since it is a dependency.
Download The Backstretch Plugin Here
You would then add the script as follows:
<script src="example.com/relative-Path/jquery.backstretch.min.js"></script>