Trying to create a navbar with custom button shapes and centered buttons - html

I'm trying to make the navebar for a community site and I am having trouble getting the navbar to both look corect and function properly. I can't seem to get the brand and buttons to center and I can't get the shape of the buttons to work correctly. I'm still very new to bootstrap and have no clue what to do.
I am trying to mimic this concept: http://imgur.com/14jP6rA
The header logo and buton images are all here: http://imgur.com/a/FXLOz
This is what I have so far for HTML
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-targer="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/Header_Logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="homeButton"></li>
<li class="articleButton"></li>
<li class="builderButton"></li>
<li class="guideButton"></li>
<li class="aboutButton"></li>
</ul>
</div>
</div>
</nav>
and CSS
body{
background-image: url("https://i.imgur.com/8M7YsDs.jpg");
background-position: center;
}
.navbar{
height: 140px;
width: 100%;
background-image: url("../assets/Header/Header.png");
background-size: cover;
background-color: Transparent;
background-position: center;
border: 0px;
text-align: center;
}
.navbar-nav{
width:100%;
text-align:center;
}
.homeButton{
background-image: url("../assets/Header/Home_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
.articleButton{
background-image: url("../assets/Header/Articles_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
.builderButton{
background-image: url("../assets/Header/Builder_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
.guideButton{
background-image: url("../assets/Header/Guides_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
.aboutButton{
background-image: url("../assets/Header/About_Button.png");
height: 32px;
width: 150px;
padding: 0px;
margin: 0px;
text-align: center;
}
Any help would be greatly appreciated.
Thank you very much.
Edit: Looks like I may have made some progress though the problem is not solved

Related

How to add content and icons to the right side in top navbar in vue.js?

I developed one top navbar which is fixed at the top , i am trying to add right side icons and some content into the top navbar [like this]1with two icons and below the content like profile and cart that must be inside the right side top navbar , i am trying to fix that but it's not happening please help me to fix this issue
.
Dashboard.vue
<template>
<div class="main">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="../assets/education.png" alt="notFound" />
</div>
<ul class="nav navbar-nav">
<li>
<p>Bookstore</p>
</li>
</ul>
<div class="input-group">
<i class="fas fa-search"></i>
<div class="form-outline">
<input type="search" class="form-control" placeholder='search...' />
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a> <i class="far fa-user"></i></a></li>
<p>profile</p>
<li><a><i class="fas fa-cart-plus"></i></a></li>
<p>cart</p>
</ul>
</nav>
</div>
</template>
<style lang="scss" scoped>
#import "colors";
.navbar-default {
background: $redish_brown;
height: 60px;
}
li p {
margin-top: 5px;
margin-left: -1250px;
width: 91px;
height: 26px;
text-align: left;
font: normal normal normal 18px/26px Roboto;
letter-spacing: 0px;
color: $pale_white;
text-transform: capitalize;
opacity: 1;
}
img {
background: transparent 0% 0% no-repeat padding-box;
opacity: 1;
width: 31px;
height: 24px;
margin-top: -12px;
margin-left: 194px;
}
.input-group{
margin-left:345px;
}
input[type="search"]{
width: 490px;
height: 33px;
margin-top:-40px;
background: #FCFCFC 0% 0% no-repeat padding-box;
border-radius: 3px;
margin-left:3px;
opacity: 1;
}
// .fa-user{
// margin-left:1064px;
// width: 31px;
// height: 36px;
// opacity: 1;
// margin-top:-25%;
// }
.input-group {
display: flex;
align-items: center; // to center the icon vertically
}
.input-group .fas {
position: absolute;
margin-left: 8px;
}
.fa-search{
margin-top:-40px;
opacity: 1;
}
.input-group input[type="search"] {
padding: 8px 8px 8px 32px;
}
a i{
// display:flex;
float:right;
}
</style>
Since the navbar is fixed at the top then you can use
ul{
position: absolute;
display: flex;
right: 0;
flex-direction: row !important; // because navbar-nav direction set to column
gap: 1rem;
margin-right: 1rem;
}

How to make text center of DIV both vetically and horizontally using percentage?

I am able to make my text in the center but using px values. When I try using percentage it is not working. I tried display:table; and display:table-cell and also display:flex;
justify-content: center; //horizontal centering
align-items:center; but it did not work.
My parent div has height: 7.7% .
Note: I have updated my full header code
Below is JSFIDDLE link:
https://jsfiddle.net/Anthony_Chien/f7n77068/#&togetherjs=gR8VEaLgqR
HTML:
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span>DS</span>
</div>
<div class="navheadersec2">
<div class="navheadermargin">
<div class="btn-group">
<button class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="headerspanbox"> <div class="headerdivbox"></div> </span>Default <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
<!--<div class="header-icons">
<span class="icons-group"><img src="assets/images/icons/undo.png" /></span>
<span class="icons-label">Undo</span>
</div>-->
<span class="btn-group icons-grp"><img src="assets/images/icons/undo.png" /><br>Undo</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/redo.png" /><br>Redo</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/zoom-in.png" /><br></span>
<span class="btn-group icons-grp"><img src="assets/images/icons/zoom-out.png" /><br></span>
<span class="btn-group icons-grp"><img src="assets/images/icons/group.png" /><br>Group</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/pattern.png" /><br>Pattern</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/lock.png" /><br>Lock</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/select.png" /><br>Select</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/resize.png" /><br>Scale</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/rotate.png" /><br>Rotate</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/rotate.png" /><br>Forward</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/backward.png" /><br>Backward</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/panel.png" /><br>Panel</span>
</div>
</div>
<div class="navheadersec3">
<div class="navheadermargin">
<div class="headersec3para">
<p class="headerpara">Code</p>
<p class="headerpara">Some text</p>
</div>
<p class="header-price">2,550</p>
<span class="btn-group icons-grp info-icon"><img src="assets/images/icons/info.png" /></span>
<p class="header-price add-to-cart">ADD</p>
</div>
</div>
</nav>
</div>
CSS:
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
width: 5%;
height: 100%;
background-color: #ffffff;
position:relative; /* Add this property */
transform:translate(-50% -50%); /* Add this property */
top:50%; /* Add this property */
left:50%; /* Add this property */
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.navheadersec2 {
width: 64.76%;
display: inline-block;
border-right: solid 1px #b8b8b8;
height: 100%;
}
.navheadersec3{
width: 30.214%;
display: inline-block;
margin-left: -4px;
}
.navheadermargin .headersec3para{
width: 30.53%;
height: 100%;
float: left;
margin-left: 6.10%;
}
.headersec3para .headerpara:first-child{
font-size: 12px;
margin: 0px !IMPORTANT;
font-weight: bold;
}
.headersec3para .headerpara{
font-size: 10px;
margin: 0px !IMPORTANT;
}
.header-price{
margin: 0px;
height: 100%;
width: 16.03%;
float: left;
text-align: center;
line-height: 34px;
font-weight: bold;
font-size: 18px;
font-family: SourceSansPro;
}
.info-icon{
margin: auto;
text-align: center;
line-height: 34px;
}
.info-icon > img{
width: 20px;
height: 20px;
}
.add-to-cart{
width: 30.534%;
font-size: 15px;
color: #009cff;
}
.navheadermargin{
margin-top: 10px;
height: 34px;
margin-bottom: 10px;
}
.navheadermargin .btn-group{
margin-left: 1.3%;
height: 100%;
width: 13.510%;
float: left;
}
.navheadermargin .header-icons{
float: left;
width: 24px;
height: 100%;
}
.header-icons .icons-group{
height: 21px;
}
.header-icons .icons-group img{
height: 20px;
width: 20px;
}
.header-icons .icons-label{
height: 15px;
font-family: SourceSansPro;
font-size: 10px;
}
.navheadermargin .btn-group button{
height: 100%;
width: 100%;
}
.headerspanbox{
display: inline-block;
}
.headerspanbox .headerdivbox{
background-color: #1fb6ff;
margin-right: 10px;
height: 14px;
width: 18px;
}
Screenshot Image:
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
width: 5%;
height: 100%;
background-color: #ffffff;
position:relative; /* Add this property */
transform:translate(-50% -50%); /* Add this property */
top:50%; /* Add this property */
left:50%; /* Add this property */
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.vav-main> .navbar {
margin-bottom: 0px;
min-height:initial;
}
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span>DS....</span>
</div>
</nav>
</div>
You can use flex for achieve the same.
update fiddle below
working fiddle
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
height: 100%;
width:100%;
background-color: #ffffff;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.navlogo span a {
align-self:center;
}
.vav-main> .navbar {
margin-bottom: 0px;
min-height:initial;
}
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span>DS....</span>
</div>
</nav>
</div>
You can use display: table; on your container, and display: table-cell; on your children, to center vertically and horizontally your navigation elements. Ypu can then set container and elements width based on the layout you need.
Possible example :
.vav-main{
position: relative;
width: 100%;
height: 100%;
}
.navbar{
display: table;
width: 100%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
height: 100;
background-color: #ffffff;
width: 5%;
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.navbar-header {
display: table-cell;
padding: 3.5%;
vertical-align: middle;
text-align: center;
}
<div class="vav-main">
<nav class="navbar navbar-default">
<div class="navbar-header navlogo">
<span>DS</span>
</div>
<div class="navbar-header">
........
</div>
</nav>
</div>
.navheader{
width: 100%;
height: 100px;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
width: 5%;
height: 100%;
background-color: #ffffff;
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
display:table;height:100%;width:100px;
}
.navlogo span a{
display:table-cell;vertical-align:middle;text-align:center;margin:0;
}
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span>DS</span>
</div>
</nav>
</div>
Might be you are doing that using bootstrap if so then you could try it like as below, remove span tag as both a and span tags are inline elements, so you could use one if needed.
.nav-main {
width: 100%;
height: 100%;
}
.nav-main > .navheader {
width: 100%;
height: 7.7%;
background-color: #ffffff;
}
.navlogo {
width: 100%;
height: 100%;
background-color: #ffffff;
text-align: center;
}
.navlogo > a {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
display: inline-block;
margin-top: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="nav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
DS
</div>
<div>
</div>
</nav>
</div>
I don't modify on your code, I just write tinny block of code. Hope this will be helpful for you. As you see, the text inside lime block always align center by horizonal and middle by vertical.
$('#header .text').css('left', 'calc(50% - '+$('#header .text').css('width')+' / 2)');
$('#header .text').css('top', 'calc(50% - '+$('#header .text').css('height')+' / 2)');
#header{
width:100%;
height:200px;
border:1px blue solid;
}
#box{
width:30%;
height:80%;
background-color:lime;
text-align:center;
position:relative;
}
#box .text{
border:1px red solid;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='header'>
<div id='box'>
<div class='text'>abchghjghj</div>
</div>
</div>

HTML elements overlapping

So I'm using hero image for my website which is 100 vh high. Now the image is positioned absolutely, so I could position other elements like logo, nav and text on the image relatively to it. After this section, I want to start new section with new image and other text, but once I start new row, column and try to put new image with h1 text, it's hiding behind earlier image. What I mean is that I want a new section with new image and <h1> text appear under the hero image and not overlap it or hide under it as it is now hiding. It's not floated or anything, my floats are cleared, so I don't get it why is this hapenning.
Here is some codepen so you would understand what is hapenning.
<div class="container-fluid clearfix">
<div class="row">
<div class="col-lg-12">
<div class="hero_img">
<img class="logo" src="assets/logo.png"></img>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
☰
</button>
<div class="collapse">
<div class="col-xs-12">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lorem</a>
</li>
</ul>
</div>
</div>
<div class="black_box clearfix"><h1>Kolding Bike Marathon</h1></div>
<div class="black_box_sub clearfix"><p>Bring activity to your life again</p></div>
<button type="button" class="btn btn-outline-secondary">Register now</button>
<button type="button" class="btn btn-success">Learn more</button>
</div>
</div>
</div>
</div>
</div>
<div class="section_one">
<h1>heyyyyy</h1>
</div>
.hero_img {
background-image: url("assets/hero.jpg");
width: auto;
height: 100vh;
background-size: cover;
position: absolute;
top: 0;
left: 0;
z-index: 999;
overflow: hidden;
clear: both;
}
.hero_img {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
}
.logo {
position: relative;
left: 20px;
top: 20px;
z-index: 1002;
width: 5%;
min-width: 50px;
}
.nav {
position: relative;
top: 0;
z-index: 1000;
margin-top: 20px;
/*margin-right: 15px;*/
padding: 20px;
/*float: right;*/
width: auto;
flex-direction: column;
background: #555;
/*width: 100%;*/
filter: opacity(0.93);
}
a {
text-decoration: none;
color: white;
display: block;
border-bottom: 1px solid #444;
}
a:hover {
color: #999;
}
.nav-item {
display: block;
}
.navbar-toggler {
/*float: right;*/
display: flex;
justify-content: right;
position: relative;
z-index: 1000;
margin-top: 15px;
margin-right: 15px;
color: white;
float: right;
}
.black_box {
position: relative;
width: 45%;
min-width: 400px;
text-align: center;
z-index: 1000;
background: black;
margin-top: 10%;
padding: 10px 30px;
clear: both;
}
.black_box h1 {
color: white;
/*font-family: 'PT Sans', sans-serif;*/
font-family: 'Montserrat', sans-serif;
font-weight: 600;
letter-spacing: 1.5px;
}
.black_box_sub {
position: relative;
width: 30%;
min-width: 310px;
text-align: center;
z-index: 1001;
background: black;
margin-top: 2%;
clear: both;
margin-left: 90px;
}
.black_box_sub p {
color: white;
padding: 5px 25px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
padding-top: 10px;
padding-bottom: 0px;
}
Codepen: http://codepen.io/Limpuls/pen/NpbwYp
There are multiple items to clean up in the code, but to keep the images from overlapping you can remove both entries of position: absolute; from the .hero_img class.
After that, remove the padding left and right from all of the media queries of container-fluid. This may affect and other padding that was needed in that container but would be a quick path to do what you are asking.

How to make a picture fit on the page with navigation

So what I'm trying to do is make my image fit on the page without having a scroll. It's obvious that the jumbotron and nav are pushing the image down, so what makes sense to me, is to put the image behind the jumbotron and nav. I tried an overflow of hidden, and that didn't seem to work. I also tried putting everything inside my wrapper, that worked, but then my responsive design got all messed up. This is the picture here that would cover the page: [https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg][1].
Here is my code:
html, body {
margin: 0;
padding: 0;
display: table;
width: 100%;
height: 100%;
}
.jumbotron {
background-color: rgba(51, 51, 51, 1);
padding-bottom: 0;
margin-top: -20px;
margin-bottom: 0;
padding-top: 20px;
h1 {
font-size: 5em;
text-transform: uppercase;
font-weight: 100;
color: #fff;
margin: .2em 0 0 .2em;
letter-spacing: .2em;
span {
font-weight: normal;
}
}
p {
color: #fff;
margin-right: .5em;
margin-bottom: 0;
}
#slogan {
font-size: 1.2em;
margin: 0;
margin-right: 20px;
}
}
.navbar {
background-color: rgba(51, 51, 51, 1);
border-radius: 0;
margin-top: 0;
margin-bottom: 0;
min-height: 0;
border: none;
li a {
outline: none;
text-transform: uppercase;
padding: 5px 15px 10px 15px;
font-size: .9em;
}
}
.wrapper{ // The wrapper is ONLY on the index.html page.
// position: relative;
display: table;
width: 100%;
height: 100%;
text-align: center;
color: #FFF;
background-image: url("https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg");
background-position: center center;
background-size: cover;
}
.h2_slogan {
font-weight: 100;
font-size: 3em;
text-transform: uppercase;
margin-top: 1em;
}
<header class="jumbotron">
<h1>John <span>Smith</span></h1>
<p class="text-right" id="slogan">Accessible. Affordable. Dependable.</p>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav text-center">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<h2 class="text-center h2_slogan">Web Developer & Designer</h2>
</div>
You can just add it to your body this will put it behind both the jumbotron and the navbar.
What you do:
Change this in your HTML
From:
<body>
To:
<body id="homepage">
Add this to your CSS:
body {
background-image: url("../img/header.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
And that's basically it.
JsFiddle
Hope this helps!

Wedge shaped menu

I've been digging into how to create a wedge shaped menu and came across the following stackoverflow post: Diagonal Wedge Shaped CSS - Edge to Edge Centered in Browser
I've re-purposed the example image Varazi drew up to better explain my own situation (please excuse the old writing on it). I've added 2 menu items, home and contact, to show what I'm trying.
The code I have been playing around with (found from the above link).
HTML
<div class="shape">
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS
.shape {
width:400px;
margin:0 auto;
}
.top {
height:0;
border-width:0 0 150px 400px;
border-style:solid;
border-color:transparent #d71f55 #d71f55 transparent;
}
.bottom {
height: 50px;
background-color:#d71f55;
}
/* Support transparent border colors in IE6. */
* html .top {
filter:chroma(color=#123456);
border-top-color:#123456;
border-left-color:#123456;
}
Update: After playing quite a lot with it, really fun challenge I must say, I have finally gotten it exactly the way I needed it to be with the helpful tip by Talkingrock (thanks man!). My remaining challenge would be showing the .sub-menu inside an overflow: hidden element (#masthead), but it's not overly important as I can have the links plastered on the homepage in the relevant content sections.
Hope the below code helps a poor soul out, such as myself, who needed help. Enjoy! :)
HTML (I'm using WordPress/Bootstrap)
<header id="masthead" class="site-header" role="banner">
<nav id="site-navigation" class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="http://demo.dev/" title="demo" rel="home">
<img width="159" height="134" src="http://demo.dev/wp-content/uploads/2014/10/logo.png" class="img-responsive" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="menu-main-menu" class="nav navbar-nav pull-right">
<li>Home</li>
<li>About Us</li>
<li>Services
<ul class="sub-menu">
<li>Industrial Electrical</li>
<li>Commercial Electrical</li>
<li>Domestic Electrical</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
CSS (using Less)
/* --- header */
#masthead {
overflow: hidden;
position: relative;
bottom: 50px; height: 200px;
background: red;
transform: skew(0deg, -3deg);
}
/* --- main navigation */
#site-navigation {
position: relative;
bottom: -50px;
height: 100%;
margin-bottom: 0;
border-radius: 0;
background: none;
border: none;
transform: skew(0deg, 3deg);
.container,
.navbar-collapse {
height: 100% !important;
}
.nav {
height: 100%;
&>li {
height: 100%;
&>a {
height: 100%;
padding: 80px 15px 0;
color: #fff;
}
&.current-menu-item,
&:hover {
&>a {
background-color: #tree-poppy;
}
}
}
}
}
Update2: Just wanted to quickly mention you can also attach the wedge part to an existing element easily without using any additional elements as well!
CSS
#masthead:after {
content: "";
position: absolute;
top: -45px; left: 0;
z-index: -1;
width: 100%; height: 80px;
background-color: red;
transform: skew(0deg, -3deg);
}
Here's what I came up with:
The HTML:
<header>
<nav>
Home
Contact
About
</nav>
</header>
The CSS:
header {
overflow: hidden;
margin-top: -550px;
height: 850px;
margin-bottom: -50px;
}
nav {
width: 120%;
margin: 0 -10%;
transform: rotate(-12deg);
background: red;
padding: 0 10%;
overflow: hidden;
}
nav a {
color: #fff;
text-decoration: none;
display: block;
float: left;
transform: rotate(12deg);
background: purple;
padding-top: 500px;
padding-bottom: 1000px;
margin-bottom: -900px;
text-align: center;
width: 80px;
position: relative;
}
.link-1 {
top: -36px;
}
.link-2 {
top: -18px;
}
Here's a working example: http://codepen.io/btpoe/pen/GavLk
Please note that this would not work in IE8 or less and would need some sort of fallback.