I am currently designing a Navbar for a page. I want the Logo to be in the middle, between the buttons and the list.
It looks currently like this:
My html & css :
/**
GENERAL
*/
body {
font-family: 'Roboto', sans-serif;
}
/**
NAVIGATION BAR
*/
.navbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
/* center */
.navbar .center {
position: relative;
/* width: 100%; */
text-align: center;
float: none;
/* height: 100px; */
/* margin-top: auto; */
}
/*
margin-top: 1.33em;
}*/
.navbar .center a, img {
color: black;
text-decoration: none;
font-family: 'Abril Fatface', cursive;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar .center a:hover, img:hover {
opacity: .5;
}
/* left */
.navbar ul {
list-style: none;
line-height: 1.85714286em;
position: relative;
}
.navbar .left a {
float: left;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar li {
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar li:not(:hover):not(.active) {
opacity: .5;
}
/* right */
.navbar .right a {
margin-left: 16px;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Layout</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Fonts -->
<!-- Main Font-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Logo Font-->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<header class="navbar hidden-sm-down">
<div class="container">
<div class="center">
<h4 href="#">
Test Blog.
</h4>
</div>
<div class="left">
<ul>
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="right">
<a class="btn btn-primary" href="#" role="button">Register</a>
<a class="btn btn-secondary" href="#" role="button">Login</a>
</div>
</div>
</header>
</body>
</html>
Before I used position: absolute; for my .navbar .center but this broke the bootstrap buttons and messed with the spacing between top and bottom of the row.
I already tried <div class="row"> with it, but this completely destroyed my navigation bar.
Please know that I am a beginner with Css and Bootstrap.
Thanks for any help,
Tom
Use flex on the parent for the 3 header items, set each header item to flex-grow: 1; and flex-basis: 0 (or flex: 1 0 0) to have them evenly take up 1/3rd of the overall header, give .left an order: -1 to put it at the beginning of the row, then use align-items: center on the flex parent to center the items vertically. You could also use bottom or baseline if you would rather it be bottom aligned. You can read more about flex options here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
/**
GENERAL
*/
body {
font-family: 'Roboto', sans-serif;
}
/**
NAVIGATION BAR
*/
.navbar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
/* center */
.navbar .center {
position: relative;
/* width: 100%; */
text-align: center;
float: none;
/* height: 100px; */
/* margin-top: auto; */
}
/*
margin-top: 1.33em;
}*/
.navbar .center a,
img {
color: black;
text-decoration: none;
font-family: 'Abril Fatface', cursive;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar .center a:hover,
img:hover {
opacity: .5;
}
/* left */
.navbar ul {
list-style: none;
line-height: 1.85714286em;
position: relative;
}
.navbar .left a {
float: left;
color: black;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar li {
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.navbar li:not(:hover):not(.active) {
opacity: .5;
}
/* right */
.navbar .right a {
margin-left: 16px;
float: right;
}
.navbar > .container {
display: flex;
align-items: center;
}
.navbar > .container > div {
flex: 1 0 0;
}
.navbar .left {
order: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Layout</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Fonts -->
<!-- Main Font-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Logo Font-->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<header class="navbar hidden-sm-down">
<div class="container">
<div class="center">
<h4 href="#">
Test Blog.
</h4>
</div>
<div class="left">
<ul>
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="right">
<a class="btn btn-primary" href="#" role="button">Register</a>
<a class="btn btn-secondary" href="#" role="button">Login</a>
</div>
</div>
</header>
</body>
</html>
enter image description hereHere is the simple solution for your problem
Html file
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
<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 class="collapse navbar-collapse" id="navbar-primary-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li><img id="logo-navbar-middle" src="images-url" width="200" alt="Logo Thing main logo"></li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->
Related
I have a navigation bar at top of the page. On the right side of it, I have a navigation item list, which are list items. This ul is inside of a div item.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-md">
<div id="navbarNav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="material-icons">
restaurant_menu
</span><br class="d-none d-md-block"> Menu</a>
</li>
<li>
<a href="#">
<span class="material-icons">
info
</span><br class="d-none d-md-block"> About</a>
</li>
<li>
<a href="#">
<span class="material-icons">
emoji_events
</span><br class="d-none d-md-block"> Awards</a>
</li>
<li id="phone" class="d-none d-md-block">
<a href="tel:410-602-5008">
<span>410-602-5008</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Problem is, this div has a large space at the right side, as seen in picture. This causes the telephone number to go up when screen width expands. I want this list item to aligned right, so nothing would change when screen expanded.
I'm using Bootstrap 4. I have looked everything about flex but nothing worked out. By the way, I am trying to create a responsive navigation menu which will collapse according to screen size. That's why I am using this classes.
I want this items as in image 1 in every condition.(Telephone number is below others)
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/
#header-nav {
background-color: #f6b319;
/*position: relative;*/
}
#logo-img{
background: url('../images/restaurant-logo_large.png') no-repeat;
width: 150px;
height: 150px;
margin: 10px 15px 10px 0;
}
a.navbar-brand {
padding-top: 25px;
font-family: 'Lora', serif;
color: #557c3e;
font-weight: bold;
font-size: 1.5em;
text-transform: uppercase;
text-shadow: 1px 1px 1px #222;
line-height: .75;
}
.navbar-brand a:focus, .navbar-brand a:hover{
text-decoration: none;
}
p.kosher {
text-transform: uppercase;
margin-top: 10px;
color: #000;
font-size: .7em;
}
p.kosher span{
vertical-align: middle;
}
#nav-list {
margin-top: 10px;
}
#nav-list > li {
margin-right: 15px;
}
#nav-list a {
color: #951C49;
text-align: center;
}
#nav-list a span {
font-size: 1.8em;
}
#phone {
margin-top: 5px;
}
#phone a { /* Phone number */
text-align: right;
padding-bottom: 0;
}
#phone div { /* We Deliver */
color: #557c3e;
text-align: right;
padding-right: 15px;
}
button.navbar-toggler{
clear: both;
margin-top: -70px;
margin-right: 0px;
}
li > a:hover, li > a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
max-width: 220px;
}
#nav-list li:last-child {
width:100%;
margin-right:0px;
}
So first of, we have to add a max-width to the #navbarNav:
#navbarNav{
max-width:220px;
}
Then, to the #nav-list, we add this code:
#nav-list {
margin-top: 10px;
display:flex;
justify-content:space-between;
}
Now, you want to align the #navbarNav to the right. There are several ways we can do that. First of is with flexbox. If you want to go with this step, you have to add the following code to the parent of the #navbarNav. Which is the #header-nav:
#header-nav{
display:flex;
justify-content:flex-end;
}
However, this makes sure that everything in your #header-nav, is being aligned to the right. So if you are not adding anything else in the #header-nav, you can easily use this code.
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>
At this moment I am busy with making a nav exactly like this:
Right now I have made this:
How can I fix that logo and dividers like the first image?
I make the website with Bootstrap and I have add some elements you see below in
html, body{
}
nav{
background:#fff;
width:100%;
padding:0px 30px;
}
.navbar-header{
display:block;
text-align:center;
height:80px;
}
.navbar-header img{
margin:0px auto;
height:45px;
}
a.navbar-brand{
padding:20px 30px;
position: absolute;
width:auto;
left:0;
top:0;
text-align:center;
margin:auto;
background-color: red;
}
.navbar-collapse.collapse{
padding:0px;
white-space: nowrap;
}
.navbar{
background:#fff;
width:100%;
margin:0px;
padding-left: 0px;
padding-right: 15px;
z-index:10;
border: 0px solid transparent;
border-radius:0px
}
.navbar > div{
margin-left: 0px;
margin-right: 0px;
}
.collapse, .nabar-right{
margin-right: 0px!important;
}
.navbar ul li a{
background:none;
text-transform:uppercase;
font-family: 'Open Sans', sans-serif;
font-weight:300;
font-size:14px;
color:#000;
letter-spacing: 0.035em;
text-decoration: none;
}
ul.nav li.open ul.dropdown-menu li{
padding:0px 0px;
}
.navbar ul li a:hover{
background:#ffffff;
color:#22257a!important;
}
.navbar ul li a:active{
background:none;
}
.nav-selected{color:#22257a!important; font-weight:700;}
.navbar a.nav-selected{color:#22257a!important; font-weight:700;}
.navbar ul li.nav-path-selected .dropdown-toggle{color:#22257a; font-weight:700;}
/*-------------------------------------------------*/
.caret {
color: #000000;
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
background-color: transparent;
color: #000000 !important;
}
.dropdown-menu {
border:1px solid #f1f1f1;
border-radius: 0;
box-shadow: none;
margin-top: -15px;
padding:0px 0px;
}
.dropdown-menu li {
padding: 2px 16px 2px 16px;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
background-color: transparent;
}
.dropdown-menu a {
color: #777777 !important;
}
.dropdown-menu > li > a {
padding: 8px 14px;
}
div#ccm-highlighter{z-index:1000; min-height:30px;}
hr {
width: 120px;
border-top: 4px solid black !important;
}
i {
color: white;
}
.intro-top {
width: 100%;
height: 50px;
background-color: red;
float: left;
}
header {
width: 100%;
height: 50px;
background-color: #4d4d4d;
}
header p{
color:white;
}
header i {
float:left;
padding-right: 10px;
}
a{
text-decoration: none !important;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, user-scalable=0" name="viewport">
<title>Title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobiel.css">
<link rel="stylesheet" href="css/tablet.css">
<link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="typography.css">
<link href='######' rel='stylesheet' type='text/css'>
<!--[if gte IE 9]><style type="text/css">.gradient {filter: none;}</style><![endif]-->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<a class="navbar-brand" href="#">
<img src="http://itavisen.no/wp-content/uploads/imported/5064692.jpg">
</a>
</div>
<div class="col-sm-2">
<i class="fa fa-phone" aria-hidden="true"></i><p>06 12345678</p>
</div>
<div class="col-sm-2">
<i class="fa fa-envelope" aria-hidden="true"></i><p>#mail.nl</p>
</div>
</div>
</div>
</header>
<div class="container">
<nav class="navbar">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
<span>Menu</span>
<span class="glyphicon glyphicon-menu-hamburger">
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
page2 <span class="caret"></span>
<ul class="dropdown-menu arrow_box">
<li>page1drop</li>
<li>page2drop</li>
</ul>
</li>
<li>page3</li>
<li>Page4</li>
<li role="separator" class="divider">Contact</li>
</ul>
</div>
</nav>
</div>
<div class="intro-top">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Doe,
For the logo you may try z-index to put it in the front of the webpage.
And for the "li" you should use padding and border to get the same result.
If you want to practice by watching code you should find some bootstrap menu template.
e.g. : http://blog.themearmada.com/20-inspiring-bootstrap-menu-examples/
I have recently been developing a webpage for my business, and have been asking questions to aid the self - development, called Empreus.
I am using bootstrap to help me design the page.
However, I have now reached a problem.
The code I have so far is shown in the code snippet.
#font-face {
font-family: 'montserratlight';
src: url('montserrat-light-webfont.eot');
src: url('montserrat-light-webfont.eot?#iefix') format('embedded-opentype'),
url('montserrat-light-webfont.woff2') format('woff2'),
url('montserrat-light-webfont.woff') format('woff'),
url('montserrat-light-webfont.ttf') format('truetype'),
url('montserrat-light-webfont.svg#montserratlight') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'montserratsemi_bold';
src: url('montserrat-semibold-webfont.eot');
src: url('montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
url('montserrat-semibold-webfont.woff2') format('woff2'),
url('montserrat-semibold-webfont.woff') format('woff'),
url('montserrat-semibold-webfont.ttf') format('truetype'),
url('montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
font-weight: normal;
font-style: normal;
}
#header {
padding:10px 0 0 0 ;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-brand {
display:none;
}
}
.navbar {
margin-bottom:0px;
font-family:"montserratlight";
text-transform: uppercase;
border-top:2px solid #000;
border-bottom: 2px solid #000;
border-radius:0px;
}
img.logoEmpreus {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom:10px;
}
img.logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#page {
margin: 0px auto;
}
li {
display:inline;
margin:0 -1px;
}
li a {
color: black;
font-size:16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: blue;
font-size:18px;
text-decoration: none
}
li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
ul {
margin:0 auto;
font-family:"montserratlight";
text-transform: uppercase;
}
.active {
font-family:'montserratsemi_bold';
}
.imageInside {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
margin-top:0px;
margin-bottom:0px;
}
h2 span {
color: white;
font: bold 0.8em 'montserratsemi_bold', Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#base ul {
margin:0 auto;
border-top:2px solid #000;
border-bottom: 2px solid #000;
padding:10px;
text-align: center;
font-family:"montserratlight";
text-transform: uppercase;
}
<!DOCTYPE html>
<head>
<title>Problems | Stack Overflow</title>
<!-- Tab Title -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div id = "header">
<!-- Empreus logo Image. Animated. Width 300px. -->
<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" width="300" />
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Stack Overflow</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li><b>The Problem</b></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12" style="margin-top:10px;">
<!-- Image Container as DIV -->
<div class = "imageInside hvr-underline-from-center" >
<h2><span>Logo Issue.</span></h2>
<img id = "imageHomeJPG" src="http://bit.ly/1P2Ylo3" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>
<div class="row">
<div id = "base" class="col-md-12" style="margin-bottom:10px">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li>Copyright Whatever</li>
</ul>
<!-- Unordered lists.-->
</p>
</div>
<!-- Navigation HTML Markup -->
</div>
</div>
</body>
</html>
Now, here is the problem.
The webpage viewed on an iPhone 6 device appears as such.
However, on an iPhone 4/ iPhone 5, the logo moves out of the container (see below)
I want the logo to be within the container width, just like normal for the iPhone 6 & 6 plus example. I was thinking whether it would be possible to add some code to make the logo flexible but I so far tried to use min-width which made no effort.
Can anyone help?
I have inserted the code as a snippet. Please do view it in full screen.
I used the chrome inspect element & resize to simulated screens function to get these screenshots.
Thanks.
The width hard-coded into the image tag may have tripped you up; it would override any CSS in your stylesheet. You could use a combination of width as a percentage and max-width set to the actual width of the image:
<img class = "logoEmpreus animated" src = "http://bit.ly/1P2ZlbH" alt="Empreus" />
img.logoEmpreus {
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom:10px;
width: 80%;
max-width: 300px;
}
Snippet below (For the sake of brevity, I removed some of the HTML/CSS not necessary to duplicate the issue):
#header {
padding: 10px 0 0 0;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-brand {
display: none;
}
}
.navbar {
margin-bottom: 0px;
font-family: "montserratlight";
text-transform: uppercase;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
border-radius: 0px;
}
img.logoEmpreus {
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 10px;
width: 80%;
max-width: 300px;
}
img.logoEmpreus:hover {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
#page {
margin: 0px auto;
}
li {
display: inline;
margin: 0 -1px;
}
li a {
color: black;
font-size: 16px;
text-decoration: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li a:hover {
color: blue;
font-size: 18px;
text-decoration: none
}
li.active a {
font-weight: bold;
color: #333;
text-decoration: none
}
ul {
margin: 0 auto;
font-family: "montserratlight";
text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="header">
<!-- Empreus logo Image. Animated. Width 300px. -->
<img class="logoEmpreus animated" src="http://bit.ly/1P2ZlbH" alt="Empreus" />
</div>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Stack Overflow</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Option 1
</li>
<li>Option 2
</li>
<li>Option 3
</li>
<li>Option 4
</li>
<li><b>The Problem</b>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
I have made a website for my fake business but I can't get the area at the bottom of the page not to be there. So further information, I want the whole page to take up all of the browser window and not have any white space or have any scrolling on all computers, and on computers where the screen is taller or shorter i want the text to stay in the center between the navbar and end of page.
Demo here.
Thanks in advance.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Geer Creations</title>
<!-- Icon -->
<link rel="shortcut icon" href="logo-inverse.ico" >
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles -->
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="page">
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 style="max-width:50px; margin-top: -7px;" src="http://i1284.photobucket.com/albums/a579/Ian_Geer/logo-inverse_zps3767ce84.png"></a>
</div>
<div class="collapse navbar-collapse" id=".navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Browse</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<h1>We combine strategy, creative thinking, & technology to drive results.</h1>
<button type="button" class="btn btn-default btn-lg">Learn More</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
body {
font-family: 'Ubuntu', sans-serif;
}
.navbar {
background-color: #fff;
border: none;
padding-top: 10px;
}
.navbar .nav {
margin-top: 5px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ff9721;
background-color: #fff;
font-weight: 700;
}
.navbar-default .navbar-nav > li > a {
-webkit-transition: color .2s; /* For Safari 3.1 to 6.0 */
transition: color .2s;
color: #6E6E6E;
background-color: transparent;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
-webkit-transition: color .2s; /* For Safari 3.1 to 6.0 */
transition: color .2s;
color: #ff9721;
background-color: transparent;
}
h1 {
color: #fff;
text-align: center;
}
.jumbotron {
padding-top: 190px;
padding-bottom: 173px;
margin-right: auto;
margin-left: auto;
width: 100%;
background-color: #170D00;
color: #fff;
text-align: center;
}
.jumbotron h1 {
font-size: 3em;
}
.form-control {
margin-top: 5px;
border-radius: 20px;
}
.btn {
-webkit-transition: color .5s, border .5s; /* For Safari 3.1 to 6.0 */
transition: color .5s, border .5s;
margin-top: 50px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
width: 220px;
}
.btn:hover,
.btn:focus {
-webkit-transition: color .5s, border .5s; /* For Safari 3.1 to 6.0 */
transition: color .5s, border .5s;
margin-top: 50px;
color: #ff9721;
background-color: transparent;
border: 2px solid #ff9721;
width: 220px;
}
You have a 30px margin from the bottom of your .jumbotron div. Add to your .jumbotron CSS class:
margin-bottom: 0;
to remove it.
Example
If you need screen to be not scrollable then you can use,and provide height to the "body" position:fixed; which fixes the screen exactly what you need, but if you need scrollable website with bottom space covered, use margin-bottom:0; you have given padding-bottom, here is the css
.jumbotron {
padding-top: 190px;
padding-bottom: 173px;
margin-right: auto;
margin-left: auto;
width: 100%;
background-color: #170D00;
color: #fff;
text-align: center;
margin-bottom:0;
}
you can even try position:fixed, even that will help using on all browsers