I'm just learning html, css, boostrap.
I want to put an item (navbar, a tag div, ...) under grid, but when I resized my browser, it lays on the grid.
#header {
height: 40px;
}
* {
box-sizing: border-box;
}
#header>div {
padding: 0;
line-height: 44px;
}
#header div a {
text-transform: uppercase;
text-decoration: none;
display: block;
font-size: 12px;
font-weight: 600;
height: 44px;
color: #666;
text-align: center;
margin: 0 auto;
float: both;
}
#header div:hover a {
background-color: lightgrey;
text-decoration: none;
}
<div id="header" class="container-fluid">
<div class="contactinfo col-sm-8">
<p>
<strong>Call : </strong> +84902xxxxxx | <strong>Email: </strong> xxx#gmail.com
</p>
</div>
<div class="col-sm-2 signin">
Sign in
</div>
<div class="col-sm-2 signup" >
Sign up
</div>
</div>
I think you are trying to do this. may it be helpful to you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<!--<a class="navbar-brand" href="#">WebSiteName</a>-->
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">
<strong>Call : </strong>
+84902xxxxxx | </a>
</li>
<li><strong>Email: </strong> xxx#gmail.com  </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</nav>
<div class="container">
</div>
</body>
</html>
Related
I have 2 columns in one row, one is for main content and second one next to it is for code preview for that main content, what I want to do is that second column would switch content that I set to once I scroll down to specific part of column one. The column one in this code is the white one where the content is suppsed to be, and the dark column is where the code should be displayed dependt on where are you on white column
Edit Code:
HTML:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- 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">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output/output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col">
<!--main page-->
<div class="cont">
<h1>Usage & Implementation</h1>
<h3>Web Interface</h3>
<p>The web interface allows you to quickly lookup IPs without touching any code. It is assumed that the IP you're looking up has made requests to your services on an application level. The web interface uses flags=f which requests full bad IP detection including compromised systems. If you wish to skip full bad IP detection, please use the API instead. A full lookup might take up to 5 seconds to complete because results are generated in real-time.</p>
</div>
</div>
</div>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div class="code">
<code>
this is code
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
background: #fff;
border: none;
border-radius: 0;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.stay-open {display:block !important;}
.codep {
color: #f0ad4e;
padding-top: 10px;
padding-bottom: 10px;
}
.code {
padding-top: 20px;
padding-left: 3px;
}
.neapolitan {
background:red;
position:relative;
height:1px;
content:'';
background:gray;
width:100%;
}
.cont{
padding-top: 10px;
}
.cont h3 h2 h6{
padding-top: 20px;
}
.cont p{
color: #696969;
font-size: 14px;
}
.label-default {
background-color: #777;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
}
.cont li {
font-family: 'Poppins', sans-serif;
font-weight: 300;
line-height: 1.7em;
color: #696969;
font-size: 14px;
padding-bottom: 10px;
}
.cont ul{
padding-left: 40px;
}
.cont b{
}
.ind{
}
.cont-t{
font-size: 11px;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
min-width: 250px;
max-width: 250px;
background: #343a40;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar ul.components {
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #343a40;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #f0ad4e;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #292b2c;
}
.content {
height: 1000px;
}
.linknav {
padding-left: 72px;
}
.linknav a{
display:inline;
margin-right:1.5em;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
$('#codeSection').scroll(function(){
($('#previewCode').text($('#codeSection').text()).css('color','white'));
});
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<!-- 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">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
<title>Hello, world!</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-flex">
<!-- navbar top-->
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" href="index.html">IP Intelligence</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 linknav">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="input/input.html">Input</a>
</li>
<li class="nav-item">
<a class="nav-link" href="output/output.html">Output</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html">Flags</a>
</li>
<li class="nav-item">
<a class="nav-link" href="flags/flags.html#error">Error Codes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact/contact.html">Contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div id="wrapper">
<div class="container-fluid">
<div class="row justify-content-between">
<!-- Sidebar -->
<nav class="" id="sidebar">
<ul class="list-unstyled components">
<li class="active">
Home
</li>
<li>
Input
<ul class="collapse list-unstyled" id="inputSubmenu">
<li>
Input
</li>
<li>
Optional Input Settings
</li>
</ul>
</li>
<li>
Output
<ul class="collapse list-unstyled" id="outputSubmenu">
<li>
Expected Output
</li>
<li>
Interpretation of the Results
</li>
<li>
Variations of Implementation
</li>
</ul>
</li>
<li>
Comparing Flags
</li>
<li>
Error Codes
</li>
<li>
Contact
</li>
</ul>
</nav>
<div class="container-flex d-flex content" style="width: 40%; height:120px">
<div class="col">
<!--main page-->
<div class="cont" id="codeSection" style="overflow:scroll;height:250px">
<h1>Usage & Implementation</h1>
<h3>Web Interface</h3>
<p>The web interface allows you to quickly lookup IPs without touching any code. It is assumed that the IP you're looking up has made requests to your services on an application level. The web interface uses flags=f which requests full bad IP detection including compromised systems. If you wish to skip full bad IP detection, please use the API instead. A full lookup might take up to 5 seconds to complete because results are generated in real-time.</p>
</div>
</div>
</div>
<div class="container-flex d-flex content" style="width: 40%">
<div class="col bg-dark">
<!--Code Editor-->
<h2 class="codep">Code Preview</h2>
<div class="neapolitan"/>
<div id='previewCode' class="code">
<code>
this is code
</code>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
use jquery's scroll function https://api.jquery.com/scroll/. this will trigger once you scroll your div with the code section.
for this example to work i have added an id to code section and also have done some alteration to make codesection div scrollable. (see console for message on scroll).
so on scroll you can also check page offset and can set value to preview screen as needed..
I am working on a project and while doing the header I cannot find a reason why the span icon-bar in a button for dropdown is not showing have a look:
Here is the html for the code you have to look for the third div in the row which is the div with two buttons inside it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta charset="UTF-8">
<title>SoftHouse</title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header col-lg-4">
<span class="wb"><span class="big">S</span>OFT</span><span class="big">H</span>OUSE
</div>
<div class="nav-container col-lg-4">
<ul class="nav nav-justified">
<li>What</li>
<li>Work</li>
<li>About</li>
</ul>
</div>
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<button>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
Here is the css
body
{
margin:0;
padding:0;
}
.navbar-default{
border-radius: 0;
background-color: white;
}
.wb
{
font-weight:bold;
}
.big
{
font-size: 25px;
}
.navbar-header .navbar-brand
{
font-size: 17px;
}
.icon-bar
{
background-color: red;
color:red;
}
.nav-justified
{
line-height: 52px;
}
You can add only bootstrap button class for toggle icon bar same as below:
see Updated demo
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="Your class">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
CSS:
.btn-group-sm>.btn, .btn-sm {
float: none;
}
.navbar-toggle {
display: inline-block;
float: none;
}
You say: i want icon bar be show always,so can use of after , no need bootstarp icons:
Css :
.btn-sm + span:after {
content: '\2261';
margin-left: 10px;
font-size: 15px;
}
Html:
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<span><span><--------------Added
<span class="icon-bar"></span><---------------Remove
<span class="icon-bar"></span><---------------Remove
<span class="icon-bar"></span><---------------Remove
</div>
body
{
margin:0;
padding:0;
}
.navbar-default{
border-radius: 0;
background-color: white;
}
.wb
{
font-weight:bold;
}
.big
{
font-size: 25px;
}
.navbar-header .navbar-brand
{
font-size: 17px;
}
.icon-bar
{
background-color: red;
color:red;
}
.nav-justified
{
line-height: 52px;
}
.btn-sm + span {
border:1px solid #ccc;
text-align:center;
padding:5px 10px;
cursor:pointer;
}
.btn-sm + span:hover {
background-color:#ccc;
}
.btn-sm + span:after {
content: '\2261';
font-size: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header col-lg-4">
<span class="wb"><span class="big">S</span>OFT</span><span class="big">H</span>OUSE
</div>
<div class="nav-container col-lg-4">
<ul class="nav nav-justified">
<li>What</li>
<li>Work</li>
<li>About</li>
</ul>
</div>
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<span></span>
</div>
</div>
</div>
</nav>
</div>
do this with font awesome
html code:-
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SoftHouse</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="navbar-header col-lg-4">
<span class="wb"><span class="big">S</span>OFT</span><span class="big">H</span>OUSE
</div>
<div class="nav-container col-lg-4">
<ul class="nav nav-justified">
<li>What</li>
<li>Work</li>
<li>About</li>
</ul>
</div>
<div class="col-lg-4" style="text-align: center;">
<button class="btn btn-sm">CONTACT</button>
<a class="icon-bar" href="#"><i class="fa fa-caret-down"></i></a>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
in css:-
.icon-bar
{
color: red;
}
I was wondering how I could implement an arrow down icon next to the navigation bar text "About Me" and "Units".
In addition, how could I also make these two pages drop down menus? Below within my code I didn't make them drop down menus due to me not knowing how to make them a drop down menu.
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</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">
</head>
<style>
body{
margin: 0;
padding: 0;
}
header{
height: 10vh;
background-color: #4D5061;
}
nav ul{
list-style-type: none;
overflow: hidden;
text-align: center;
}
nav ul li a{
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family:'Roboto', sans-serif;
}
nav ul li {
padding-bottom:6px;
position:relative;
display: inline-block;
}
nav ul li:after {
content:'';
position:absolute;
right:50%;
bottom:0;
left:50%;
height:3px;
background-color:red;
border-radius:9px;
transition:all .2s;
}
nav ul li:hover:after {
right:0;
left:0;
}
a:hover { color:red;
}
#logo{
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section{
position:relative;
}
.section1{
height:93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2{
height:93vh;
background-color: #A59E8C;
text-align:center;
color:white;
padding-top:23vh;
}
.contact_section{
height:93vh;
background-color: grey;
}
.hero{
height:750px;
}
h1{
font-family:'Roboto', sans-serif;
color: white;
}
.container-fluid{
padding: 60px 50px;
}
.bg-grey{
background-color: #f6f6f6;
}
.logo-small{
color: #000000;
font-size: 50px;
}
.logo{
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px){
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down{
color: #4D5061;
}
footer{
height:10vh;
}
</style>
<body>
<header>
<div id="logo">
<img src="http://placehold.it/60x60" alt=""></div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Units</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</nav>
</header>
<section class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
</body>
<footer>
</footer>
</html>
You can use bootstrap to solve that problem and then apply your css to this bootstrap code.
<!DOCTYPE html>
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-default">
<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"></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=""></a>
</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>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="dropdown">
Units<span class="caret"></span>
<ul class="dropdown-menu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Clients</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<script src="jquery-3.1.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Just remember to change the <script src="jquery-3.1.0.min.js"></script> for your jquery file.
TESTED AND WORKING
Here your solution:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>Liam Docherty | London Web Developer & GFX designer</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">
</head>
<style>
body {
margin: 0;
padding: 0;
}
header {
height: 10vh;
background-color: #4D5061;
}
nav ul {
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 3.5vh 8px 4px;
color: white;
text-decoration: none;
font-size: 14pt;
font-family: 'Roboto', sans-serif;
}
nav ul li:hover a {
text-decoration: none;
color: red;
border-bottom: 1px solid red;
}
#logo {
padding-top: 2vh;
padding-left: 20px;
float: left;
}
section {
position: relative;
}
.section1 {
height: 93vh;
background-color: #FFFFFF;
text-align: center;
}
.section2 {
height: 93vh;
background-color: #A59E8C;
text-align: center;
color: white;
padding-top: 23vh;
}
.contact_section {
height: 93vh;
background-color: grey;
}
.hero {
height: 750px;
}
h1 {
font-family: 'Roboto', sans-serif;
color: white;
}
.container-fluid {
padding: 60px 50px;
}
.bg-grey {
background-color: #f6f6f6;
}
.logo-small {
color: #000000;
font-size: 50px;
}
.logo {
color: #000000;
font-size: 200px;
}
#media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.fa-angle-down {
color: #4D5061;
}
footer {
height: 10vh;
}
</style>
<body>
<nav class="navbar navbar-default">
<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>
</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>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></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 role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></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 class="section1">
<div class="hero"></div>
<i class="fa fa-angle-down" style="font-size:100px;"></i>
</section>
<section class="section2">
<div class="banner">
<h1>What I can offer you</h1>
<p> Feel free to contact me regarding any </p>
<div class="container-fluid text-center">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>Availability</h4>
<p>You can expect a response with 24 hours of the sent message. </p>
</div>
</div>
</div>
</div>
</section>
<section id="contact-me" class="contact_section">
</section>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<footer>
</footer>
</html>
You miss the javascript files and some code as well...
Next time refere to http://getbootstrap.com and try to read all the documentation. Everything is super well documented there.
Also, if I can advice you, use an external css file to store your style...
It looks you are using Bootstrap, so try this code and I don't see bootstrap javascipt file in your code, which you have to link and jQuery of course.
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Let me know if you still couldn't figure out.
So I just recently started using bootstrap, and I created navigation buttons. But for some reason I can't put any content to the right of the buttons. I would like to have a section for content to the right of the buttons with a black background.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 200px;
}
.nav{
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<div class="container-fluid">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
This is a continuation to the above question. If you want to make any bottstrap design responsive i.e if you want it to look same in all screen size you should use these classes col-md-4 col-lg-4 col-sm-4 col-xs-4 together. Also I have used col-lg-offset-1 offset classes as it will create a automatic margin(margin of 1 column in this case) between your elements and the design will look good.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 50px;
}
.nav{
width: 200px;
}
.main{
margin-top:50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-7 col-lg-7 col-xs-7 col-sm-7 col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 main">
Main content goes here
</div>
</div>
</body>
</html>
Hope this helps!
You can use col-* classes of bootstrap, assign certain columns width to your nav and certain column width to your main content.
Check the result in expanded window.
body{
overflow: hidden;
background-color: #1C213D;
}
ul li{
position: relative;
text-align: center;
list-style: none;
display: block;
color: lightsteelblue;
font-size: 20px;
padding-top: 12px;
padding-bottom: 12px;
margin-top: 50px;
}
.nav{
width: 200px;
}
.main{
margin-top:50px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Home</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="col-md-4">
<ul class="nav nav-pills nav-stacked" role="tablist">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
<div class="col-md-8 main">
Main content goes here
</div>
</div>
</body>
</html>
I have changed the default bootstrap style by adding the margin and padding in my style.css but i want that the navigation would be at the left corner and not in the middle header side when i resize my browser screen to mobile size. How can i do it?
Here is my index.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Responsive Project (Prototype)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<header class="mainHeader">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--HEADER-->
<div class="navbar-header">
<a class="navbar-brand">A.M.®</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--BODY-->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Contact Us</li>
<li>About Us</li>
<li>Work Positions</li>
<li>Contacts</li>
</ul>
<!--USER OPTIONS-->
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"> Sign Up</span></li>
<li><span class="glyphicon glyphicon-log-in"> Register</span></li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
style.css:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
margin-left: 150px;
font-weight: 600;
}
.navbar-header {
padding-left: 150px;
}
You can use media queries to only apply your styles to larger screens, like so:
body {
background-color: #f2f2f2;
}
.navbar-default {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-nav {
font-weight: 600;
}
#media (min-width: 768px) {
.navbar-nav {
margin-left: 150px;
}
.navbar-header {
padding-left: 150px;
}
}