Navbar toggler icon flips to left side when active. Covers logo that is aligned to left
0
I'm using a collapsible navbar in Bootstrap 4. I have the menu items right-aligned with a left-aligned logo. When the screen size is decreased and the navbar toggler is active, the menu items are hidden (on the right) but the toggler icon appears on the left. It overlaps with the logo. I want the toggler to stay on the right.
I've tried giving it absolute position, using navbar-toggler-right, etc. I also tried putting the button inside a div and using justify-content-between.
Here's a link to a Codepen with the code I've written.
https://codepen.io/amandathedev/pen/bOrZZq
The images are all hosted locally because this is just a project for practice, so they don't appear in the Codepen preview. I hope it's still easy to tell what's happening with the logo.
Thanks!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>
CSS:
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}
html css bootstrap-4
asked Dec 28 '18 at 0:08
Amanda Treutler
233
add a comment |
0
I'm using a collapsible navbar in Bootstrap 4. I have the menu items right-aligned with a left-aligned logo. When the screen size is decreased and the navbar toggler is active, the menu items are hidden (on the right) but the toggler icon appears on the left. It overlaps with the logo. I want the toggler to stay on the right.
I've tried giving it absolute position, using navbar-toggler-right, etc. I also tried putting the button inside a div and using justify-content-between.
Here's a link to a Codepen with the code I've written.
https://codepen.io/amandathedev/pen/bOrZZq
The images are all hosted locally because this is just a project for practice, so they don't appear in the Codepen preview. I hope it's still easy to tell what's happening with the logo.
Thanks!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>
CSS:
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}
html css bootstrap-4
asked Dec 28 '18 at 0:08
Amanda Treutler
233
add a comment |
0
0
0
I'm using a collapsible navbar in Bootstrap 4. I have the menu items right-aligned with a left-aligned logo. When the screen size is decreased and the navbar toggler is active, the menu items are hidden (on the right) but the toggler icon appears on the left. It overlaps with the logo. I want the toggler to stay on the right.
I've tried giving it absolute position, using navbar-toggler-right, etc. I also tried putting the button inside a div and using justify-content-between.
Here's a link to a Codepen with the code I've written.
https://codepen.io/amandathedev/pen/bOrZZq
The images are all hosted locally because this is just a project for practice, so they don't appear in the Codepen preview. I hope it's still easy to tell what's happening with the logo.
Thanks!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>
CSS:
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}
html css bootstrap-4
asked Dec 28 '18 at 0:08
Amanda Treutler
233
I'm using a collapsible navbar in Bootstrap 4. I have the menu items right-aligned with a left-aligned logo. When the screen size is decreased and the navbar toggler is active, the menu items are hidden (on the right) but the toggler icon appears on the left. It overlaps with the logo. I want the toggler to stay on the right.
I've tried giving it absolute position, using navbar-toggler-right, etc. I also tried putting the button inside a div and using justify-content-between.
Here's a link to a Codepen with the code I've written.
https://codepen.io/amandathedev/pen/bOrZZq
The images are all hosted locally because this is just a project for practice, so they don't appear in the Codepen preview. I hope it's still easy to tell what's happening with the logo.
Thanks!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>
CSS:
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}
html css bootstrap-4
html css bootstrap-4
asked Dec 28 '18 at 0:08
Amanda Treutler
233
asked Dec 28 '18 at 0:08
Amanda Treutler
233
asked Dec 28 '18 at 0:08
Amanda Treutler
233
asked Dec 28 '18 at 0:08
Amanda Treutler
233
asked Dec 28 '18 at 0:08
Amanda Treutler
233
233
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
Take a closer look at your HTML. You place the button above the logo in your HTML. You don't need to change the CSS you have in your Codepen to shift the toggler to the right, but to align it better, you will need a bit more styling.
Take the logo image that you have written like below and place it above the button:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
Switch to this:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
answered Dec 28 '18 at 0:27
Ryan Lafazan
465
Oh man, I can't believe it was that simple. I tried for an hour! Thank you so much!
– Amanda Treutler
Dec 28 '18 at 1:20
It happens. I teach javascript development on the side and see more little mistakes like this than complex errors with most of my student's projects. I've stared at a block of code for days trying to solve problems that were actually just minor syntax errors. Especially when I was just starting out.
– Ryan Lafazan
Dec 28 '18 at 19:01
Yeah, any time I've really been stuck it's been for something infuriatingly small!
– Amanda Treutler
Dec 31 '18 at 13:29
add a comment |
1
I swapped the HTML for the nav button and the logo image around and comment out the following CSS
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
https://codepen.io/scheinercc/pen/MZvRaq
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
/*.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}*/
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>answered Dec 28 '18 at 0:27
retrovertigo
303312
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53952243%2fnavbar-toggler-icon-flips-to-left-side-when-active-covers-logo-that-is-aligned%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Take a closer look at your HTML. You place the button above the logo in your HTML. You don't need to change the CSS you have in your Codepen to shift the toggler to the right, but to align it better, you will need a bit more styling.
Take the logo image that you have written like below and place it above the button:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
Switch to this:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
answered Dec 28 '18 at 0:27
Ryan Lafazan
465
Oh man, I can't believe it was that simple. I tried for an hour! Thank you so much!
– Amanda Treutler
Dec 28 '18 at 1:20
It happens. I teach javascript development on the side and see more little mistakes like this than complex errors with most of my student's projects. I've stared at a block of code for days trying to solve problems that were actually just minor syntax errors. Especially when I was just starting out.
– Ryan Lafazan
Dec 28 '18 at 19:01
Yeah, any time I've really been stuck it's been for something infuriatingly small!
– Amanda Treutler
Dec 31 '18 at 13:29
add a comment |
1
Take a closer look at your HTML. You place the button above the logo in your HTML. You don't need to change the CSS you have in your Codepen to shift the toggler to the right, but to align it better, you will need a bit more styling.
Take the logo image that you have written like below and place it above the button:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
Switch to this:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
answered Dec 28 '18 at 0:27
Ryan Lafazan
465
Oh man, I can't believe it was that simple. I tried for an hour! Thank you so much!
– Amanda Treutler
Dec 28 '18 at 1:20
It happens. I teach javascript development on the side and see more little mistakes like this than complex errors with most of my student's projects. I've stared at a block of code for days trying to solve problems that were actually just minor syntax errors. Especially when I was just starting out.
– Ryan Lafazan
Dec 28 '18 at 19:01
Yeah, any time I've really been stuck it's been for something infuriatingly small!
– Amanda Treutler
Dec 31 '18 at 13:29
add a comment |
1
1
1
Take a closer look at your HTML. You place the button above the logo in your HTML. You don't need to change the CSS you have in your Codepen to shift the toggler to the right, but to align it better, you will need a bit more styling.
Take the logo image that you have written like below and place it above the button:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
Switch to this:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
answered Dec 28 '18 at 0:27
Ryan Lafazan
465
Take a closer look at your HTML. You place the button above the logo in your HTML. You don't need to change the CSS you have in your Codepen to shift the toggler to the right, but to align it better, you will need a bit more styling.
Take the logo image that you have written like below and place it above the button:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
Switch to this:
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
answered Dec 28 '18 at 0:27
Ryan Lafazan
465
edited Dec 28 '18 at 0:36
answered Dec 28 '18 at 0:27
Ryan Lafazan
465
answered Dec 28 '18 at 0:27
Ryan Lafazan
465
answered Dec 28 '18 at 0:27
Ryan Lafazan
465
465
Oh man, I can't believe it was that simple. I tried for an hour! Thank you so much!
– Amanda Treutler
Dec 28 '18 at 1:20
It happens. I teach javascript development on the side and see more little mistakes like this than complex errors with most of my student's projects. I've stared at a block of code for days trying to solve problems that were actually just minor syntax errors. Especially when I was just starting out.
– Ryan Lafazan
Dec 28 '18 at 19:01
Yeah, any time I've really been stuck it's been for something infuriatingly small!
– Amanda Treutler
Dec 31 '18 at 13:29
add a comment |
Oh man, I can't believe it was that simple. I tried for an hour! Thank you so much!
– Amanda Treutler
Dec 28 '18 at 1:20
It happens. I teach javascript development on the side and see more little mistakes like this than complex errors with most of my student's projects. I've stared at a block of code for days trying to solve problems that were actually just minor syntax errors. Especially when I was just starting out.
– Ryan Lafazan
Dec 28 '18 at 19:01
Yeah, any time I've really been stuck it's been for something infuriatingly small!
– Amanda Treutler
Dec 31 '18 at 13:29
Oh man, I can't believe it was that simple. I tried for an hour! Thank you so much!
– Amanda Treutler
Dec 28 '18 at 1:20
Oh man, I can't believe it was that simple. I tried for an hour! Thank you so much!
– Amanda Treutler
Dec 28 '18 at 1:20
It happens. I teach javascript development on the side and see more little mistakes like this than complex errors with most of my student's projects. I've stared at a block of code for days trying to solve problems that were actually just minor syntax errors. Especially when I was just starting out.
– Ryan Lafazan
Dec 28 '18 at 19:01
It happens. I teach javascript development on the side and see more little mistakes like this than complex errors with most of my student's projects. I've stared at a block of code for days trying to solve problems that were actually just minor syntax errors. Especially when I was just starting out.
– Ryan Lafazan
Dec 28 '18 at 19:01
Yeah, any time I've really been stuck it's been for something infuriatingly small!
– Amanda Treutler
Dec 31 '18 at 13:29
Yeah, any time I've really been stuck it's been for something infuriatingly small!
– Amanda Treutler
Dec 31 '18 at 13:29
add a comment |
1
I swapped the HTML for the nav button and the logo image around and comment out the following CSS
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
https://codepen.io/scheinercc/pen/MZvRaq
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
/*.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}*/
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>answered Dec 28 '18 at 0:27
retrovertigo
303312
add a comment |
1
I swapped the HTML for the nav button and the logo image around and comment out the following CSS
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
https://codepen.io/scheinercc/pen/MZvRaq
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
/*.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}*/
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>answered Dec 28 '18 at 0:27
retrovertigo
303312
add a comment |
1
1
1
I swapped the HTML for the nav button and the logo image around and comment out the following CSS
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
https://codepen.io/scheinercc/pen/MZvRaq
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
/*.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}*/
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>answered Dec 28 '18 at 0:27
retrovertigo
303312
I swapped the HTML for the nav button and the logo image around and comment out the following CSS
.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}
https://codepen.io/scheinercc/pen/MZvRaq
body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
/*.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}*/
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
/*.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}*/
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>body {
background-image: url("concrete-texture.png");
}
.grid-container {
display: grid;
font-family: "Raleway", sans-serif;
grid-template-columns: 10em auto auto;
grid-template-rows: 1fr 5.5fr 1fr;
grid-gap: 1px;
padding: 1px;
grid-template-areas:
"header header header header"
"menu main main main"
"footer footer footer footer";
}
/* .grid-item {
border: 1px solid black;
} */
#header {
grid-area: header;
}
/* Navbar */
.nav-link {
display: inline-block;
font-size: 1em;
letter-spacing: 1px;
text-decoration: none;
}
/*.navbar-toggler {
width: 1em;
float: right;
border: none;
}
.navbar-toggler-icon {
position: fixed;
}*/
.cool-link {
display: inline-block;
color: #000;
text-decoration: none;
}
.cool-link::after {
content: "";
display: block;
width: 0;
height: 2px;
background: black;
transition: width 0.4s;
}
.cool-link:hover::after {
width: 95%;
}
@media (max-width: 600px) {
}
#menu {
grid-area: menu;
}
#main {
grid-area: main;
display: grid;
grid-template-columns: auto auto;
grid-gap: 5px;
}
img {
max-width: 100%;
}
.box {
background-color: burlywood;
padding: 10px;
}
a {
color: #292929;
text-decoration: none;
}
#footer {
grid-area: footer;
background-color: #dadada;
border: none;
padding: 20px;
}
#footer ul {
display: flex;
justify-content: flex-end;
}
#footer li {
padding: 0 10px;
list-style: none;
}
#footer a:hover {
text-decoration: none;
}
#footer span {
display: flex;
justify-content: flex-end;
font-size: 0.9em;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Modern Calligraphy</title>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="shortcut icon" type="image/x-icon" href="logo.ico" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css?family=Raleway:300,400,700"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item" id="header">
<!-- Navbar -->
<nav class="navbar bg-transparent navbar-expand-sm">
<img src="logo5.png" alt="Logo" class="navbar-brand mr-auto" />
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon mr-auto"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item cool-link">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Order</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Learn</a>
</li>
<li class="nav-item cool-link">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="grid-item" id="menu">Menu</div>
<div class="grid-item" id="main">
<div class="box">
<img
src="personalized.jpg"
alt="Hand lettered calligraphy quote on paper with fruit"
/>
</div>
<div class="box">
<img
src="handLettering.jpg"
alt="Hand lettered quote in open book on map"
/>
</div>
<div class="box">
<img
src="digital.jpg"
alt="Digital calligraphy drawn on iPad held by woman with stylus"
/>
</div>
<div class="box">
<img
src="tutorials.jpg"
alt="Hand lettered quote on notebook with markers"
/>
</div>
</div>
<div class="grid-item" id="footer">
<ul>
<li>
<a href="#"> <i class="far fa-envelope"></i> Contact</a>
</li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Info</a></li>
</ul>
<span>Copyright 2018, Modern Calligraphy Inc.</span>
</div>
</div>
<!-- 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.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>answered Dec 28 '18 at 0:27
retrovertigo
303312
answered Dec 28 '18 at 0:27
retrovertigo
303312
answered Dec 28 '18 at 0:27
retrovertigo
303312
answered Dec 28 '18 at 0:27
retrovertigo
303312
303312
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53952243%2fnavbar-toggler-icon-flips-to-left-side-when-active-covers-logo-that-is-aligned%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
