I'm using a SVG under an hamburger menu so when the user clicks that menu, the SVG expands and fills the entire screen with the options on it. I'm using scale() for that so basically what happens is that the SVG has a scale of 1 and when the user clicks on the menu the SVG gets a scale(35).
Now the problem. That scale(35) doesn't fill the entire screen on bigger resolutions or even on some mobile resolutions with bigger height. If I set the scale for something that will ensure me that will cover most of the screens, like scale(70), this will make the close animation really messy for going through such a big scale to 1. How can I expand this SVG with a smooth animation so it fills every type of screen?
EDIT - Added code with a simple and fast example downthere
Below are some images that explain what happens.
Closed menu / SVG with scale(1)
Opened menu / SVG with scale(70)
Menu closing / SVG going from scale(70) to scale(1) and looking messy
function menuOnClick() {
document.getElementById("menu-bar").classList.toggle("change");
document.getElementById("nav").classList.toggle("change");
document.getElementById('blob').classList.toggle("change-bg");
}
#menu {
z-index: 2;
}
#menu-bar {
width: 45px;
height: 40px;
margin: 30px 0 20px 20px;
cursor: pointer;
float: right;
}
.bar {
height: 5px;
width: 100%;
background-color: #00d1a9;;
display: block;
border-radius: 5px;
transition: 0.3s ease;
}
#bar1 {
transform: translateY(-4px);
}
#bar3 {
transform: translateY(4px);
}
.nav {
transition: 0.3s ease;
display: none;
}
.nav ul {
padding: 0 22px;
}
.nav li {
list-style: none;
padding: 12px 0;
}
.nav li a {
color: white;
font-size: 20px;
text-decoration: none;
}
.nav li a:hover {
font-weight: bold;
}
.menu-bg, #menu {
top: 0;
left: 0;
position: absolute;
}
.change {
display: block;
}
.change .bar {
background-color: white;
}
.change #bar1 {
transform: translateY(4px) rotateZ(-45deg);
}
.change #bar2 {
opacity: 0;
}
.change #bar3 {
transform: translateY(-6px) rotateZ(45deg);
}
.change-bg {
transform: scale(70);
}
.blob {
margin-top:-32px;
top: 0;
z-index: 1;
pointer-events: none;
-webkit-transition: all 0.75s linear;
transition: all 0.75s linear;
display: block;
will-change: auto;
filter: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
-ms-filter: blur(0);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}
<div id="menu">
<div id="menu-bar" onclick="menuOnClick()">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<nav class="nav" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
<svg class="blob" id="blob" xmlns="http://www.w3.org/2000/svg" width="265.42" height="151.973" viewBox="0 0 265.42 151.973">
<title>Menu Blob</title>
<desc>The blob that grows to be the menu background</desc>
<path class="blobPath" id="blobPath" shape-rendering="auto" d="M-1377.154,10877.442c-10.882-7.812-24.262-11.1-36.627-16.251s-24.764-13.355-28.853-26.112c-.135.766,251.322-30.752,251.3-30.855s-9.766,33.5-15.478,42.831c-9.83,16.055-20.015,32.053-32.926,45.756a125.25,125.25,0,0,1-18.85,16.492,89.6,89.6,0,0,1-28.133,13.538,70.507,70.507,0,0,1-29.47,1.6,56.7,56.7,0,0,1-24.487-10C-1354.7,10904.193-1363.044,10887.567-1377.154,10877.442Z" transform="translate(2763.902 -10547.315) rotate(7)" />
</svg>
<div class="menu-bg" id="menu-bg"></div>
The question is how to scale the blob responsively rather than have just one scale value which could be too small for very large screens, and conversely cause problems on very small ones when shrinking.
As JS is already being invoked on click we can get the base-size of the blob and see 'how many times' it will fit into the window height and width respectively and use those ratios to calculate a scale that will guarantee the window becomes covered but without huge scaling.
We can do this by calculating a CSS variable in the click event function which will then get used in the change-bg class (but will be ignored when this class is not set). This has the advantage that it will automatically recalculate scale if the window has been resized.
function menuOnClick() {
document.getElementById("menu-bar").classList.toggle("change");
document.getElementById("nav").classList.toggle("change");
document.getElementById('blob').classList.toggle("change-bg");
/* added */
let blob = document.getElementById('blob');
let rect = blob.getBoundingClientRect();
document.getElementById('blob').style.setProperty('--scale', Math.max(4*window.innerWidth/rect.width,4*window.innerHeight/rect.height));
}
#menu {
z-index: 2;
}
#menu-bar {
width: 45px;
height: 40px;
margin: 30px 0 20px 20px;
cursor: pointer;
float: right;
}
.bar {
height: 5px;
width: 100%;
background-color: #00d1a9;;
display: block;
border-radius: 5px;
transition: 0.3s ease;
}
#bar1 {
transform: translateY(-4px);
}
#bar3 {
transform: translateY(4px);
}
.nav {
transition: 0.3s ease;
display: none;
}
.nav ul {
padding: 0 22px;
}
.nav li {
list-style: none;
padding: 12px 0;
}
.nav li a {
color: white;
font-size: 20px;
text-decoration: none;
}
.nav li a:hover {
font-weight: bold;
}
.menu-bg, #menu {
top: 0;
left: 0;
position: absolute;
}
.change {
display: block;
}
.change .bar {
background-color: white;
}
.change #bar1 {
transform: translateY(4px) rotateZ(-45deg);
}
.change #bar2 {
opacity: 0;
}
.change #bar3 {
transform: translateY(-6px) rotateZ(45deg);
}
.blob {
transform: scale(1); /* added */
margin-top:-32px;
top: 0;
z-index: 1;
pointer-events: none;
-webkit-transition: all 0.75s linear;
transition: all 0.75s linear;
display: block;
will-change: auto;
filter: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
-ms-filter: blur(0);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}
.change-bg { /* moved after .blob so takes precedence */
transform: scale(var(--scale));/* Changed from 70 */
}
<div id="menu">
<div id="menu-bar" onclick="menuOnClick()">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<nav class="nav" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
<svg class="blob" id="blob" xmlns="http://www.w3.org/2000/svg" width="265.42" height="151.973" viewBox="0 0 265.42 151.973">
<title>Menu Blob</title>
<desc>The blob that grows to be the menu background</desc>
<path class="blobPath" id="blobPath" shape-rendering="auto" d="M-1377.154,10877.442c-10.882-7.812-24.262-11.1-36.627-16.251s-24.764-13.355-28.853-26.112c-.135.766,251.322-30.752,251.3-30.855s-9.766,33.5-15.478,42.831c-9.83,16.055-20.015,32.053-32.926,45.756a125.25,125.25,0,0,1-18.85,16.492,89.6,89.6,0,0,1-28.133,13.538,70.507,70.507,0,0,1-29.47,1.6,56.7,56.7,0,0,1-24.487-10C-1354.7,10904.193-1363.044,10887.567-1377.154,10877.442Z" transform="translate(2763.902 -10547.315) rotate(7)" />
</svg>
<div class="menu-bg" id="menu-bg"></div>
Note: this snippet seems to work on different window sizes OK, but in the 'emulator' for mobile on Edge in Windows10 I noticed a single little jerk when shrinking. I cannot explain this. Hope someone can.
Here's a different approach.
document.getElementById("menu-bar").addEventListener('click', function(evt) {
evt.target.parentElement.classList.toggle("open");
});
body, html {
margin: 0;
}
#menu {
position: relative;
}
#blob {
position: absolute;
top: 0;
right: 0;
transition: 0.3s ease;
z-index: -1;
}
#blob g {
fill: #00d1a9;
transition: 0.3s ease;
transform-origin: 150px 32px;
transform-box: fill-box;
}
.open #blob {
width: 100%;
height: 100%;
}
.open #blob g {
transform: scale(20);
}
#menu-bar {
position: absolute;
top: 40px;
right: 100px;
width: 45px;
height: 40px;
cursor: pointer;
}
.bar {
height: 5px;
width: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: block;
border-radius: 5px;
transition: 0.3s ease;
pointer-events: none;
}
#bar1 {
transform: translateY(-4px);
}
#bar3 {
transform: translateY(4px);
}
.open #bar1 {
transform: translateY(4px) rotateZ(-45deg);
}
.open #bar2 {
opacity: 0;
}
.open #bar3 {
transform: translateY(-6px) rotateZ(45deg);
}
.nav {
display: inline-block;
opacity: 0;
pointer-events: none;
}
.nav ul {
padding: 0 22px;
margin: 0;
}
.nav li {
list-style: none;
padding: 12px 0;
}
.nav li a {
color: black;
font-size: 20px;
text-decoration: none;
}
.nav li a:hover {
font-weight: bold;
}
.open .nav {
transition: 0.3s ease;
transition-delay: 0.2s;
opacity: 1;
pointer-events: auto;
}
<div id="menu">
<svg class="blob" id="blob" width="256" height="108" viewBox="10 31 256 108">
<g>
<path class="blobPath" id="blobPath" shape-rendering="auto" d="M-1377.154,10877.442c-10.882-7.812-24.262-11.1-36.627-16.251s-24.764-13.355-28.853-26.112c-.135.766,251.322-30.752,251.3-30.855s-9.766,33.5-15.478,42.831c-9.83,16.055-20.015,32.053-32.926,45.756a125.25,125.25,0,0,1-18.85,16.492,89.6,89.6,0,0,1-28.133,13.538,70.507,70.507,0,0,1-29.47,1.6,56.7,56.7,0,0,1-24.487-10C-1354.7,10904.193-1363.044,10887.567-1377.154,10877.442Z" transform="translate(2763.902 -10547.315) rotate(7)" />
</g>
</svg>
<div id="menu-bar">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
<nav class="nav" id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</div>
Related
I am building a website and ran across this issue.
I have a basic navbar which when viewed on mobile appears like a hamburger menu. The menu works fine. I have used pure HTML-CSS code for making this navbar. The issue is that the navbar is not closing when I click any link on the menu to navigate to a different section of the page.
HTML:
<header class="navbar-fixed-top">
<div class="container">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="nav-wrapper">
<ul>
<li>HOME</li>
<li>MINT</li>
<li>COMMUNITY</li>
<li>PROJECTS</li>
<li>FAQ</li>
</ul>
</div>
</nav>
</div>
</header>
CSS
header {
text-align: right;
-webkit-transition: all .5s;
transition: all .5s;
height: 65px;}
nav {
padding: 8px;
}
nav ul {
margin-bottom: 0;
float:right;
-webkit-transition: all .5s;
transition: all .5s;
}
nav ul li {
display: inline-block;
float: left;
}
nav li {
display: inline-block;
margin: 0.75em;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: rgb(255, 255, 255);
text-transform: uppercase;
text-decoration: none;
font-size: 1.2em;
align-content: space-between;
font-weight: 600;
}
#media screen and (max-width: 864px) {
.logo {
padding:0;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: rgb(0, 0, 0);
opacity: 0;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: left;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:nth-child(5) a {
transition-delay: 0.6s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: rgb(255, 255, 255);
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 10px;
top: 10px;
display: block;
width: 48px;
height: 48px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: rgb(255, 255, 255);
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
#nav:checked + .nav-btn {
transform: rotate(45deg);
}
#nav:checked + .nav-btn li {
background: #000;
transition: transform 0.2s ease;
}
#nav:checked + .nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked + .nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked + .nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked + .nav-btn i:nth-child(4) {
opacity: 0;
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked ~ .nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
.bg-nav {
background: #000;
}
.bg-nav ul {
padding: 10px;
}
`
Sorry for the long codes
Since I am a beginner with near to no experience in JS I would like to know if there is any solution for this.
Is there any solution in CSS for this or do we need to use JS.
Any help would be appreciated
I don't think you can do it with CSS only as it would require child -> parent relation.
If you are ok to use JS you can just set "false" to the #nav checkbox
const onLinkClick = () => {
document.querySelector("#nav").checked = false; // Once link is clicked -> make #nav checkbox false thus close the menu
};
document
.querySelectorAll(".nav-wrapper a") // Grab all links
.forEach((element) => element.addEventListener("click", onLinkClick)); // Listen for click on them
I've included a snippet of the jquery/html/css for the hamburger. the jquery is what I would like to use to make the mobile menu close upon clicking its links. Currently you must click the X again (css-transformed spans) to do so which is annoying and not nice at all. I've tried ids and classes in all the different html tags and nothing seems to work. Any ideas/tips in the right direction?
$(document).ready(function() {
//took this code below from another SO answer that got good upvotes, and while I understand it easily, I can't figure out where to place it in the html...I fear that the CSS transforming and rendering of the menu is what is preventing this from working...
$('.menu').on('click', function() {
$('.menu').addClass('open');
});
$('.menu a').on("click", function() {
$('.menu').removeClass('open');
});
});
.sticky-navMobile {
margin: 0;
width: max-content;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#menuToggle {
display: block;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: plum;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 5px;
position: relative;
background: #722f58;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
color: #232323;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
color: #232323;
}
/** Transform all the slices of hamburger into an X. */
#menuToggle input:checked~span {
background: rgb(146, 102, 146);
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
background: rgb(146, 102, 146);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
background: rgb(146, 102, 146);
}
#menu {
position: absolute;
width: 150px;
margin: -37px 0 0 -10px;
border-bottom-right-radius: 45px;
padding-top: 40px;
background: #722f58;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked~ul {
transform: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="sticky-navMobile">
<nav>
<div id="menuToggle">
<!-- A fake / hidden checkbox is used as click receiver, so you can use the :checked selector on it.-->
<input type="checkbox" />
<!-- Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonalds stuff. -->
<span></span>
<span></span>
<span></span>
<!-- Too bad the menu has to be inside of the button but hey, it's pure CSS magic.-->
<ul id="menu">
<a href="#projects">
<li>Projects</li>
</a>
<a href="#bio">
<li>Personal Info</li>
</a>
<a href="#footer">
<li>Contact</li>
</a>
</ul>
</div>
</nav>
</nav>
Part of the problem, is that open and close don't mean anything in this context, since it's a checkbox that's causing the menu to open and close.
What you need to do, is traverse up the DOM when you click on the menu or the anchor within the menu, and get the checked state of the checkbox. If it's true (which it will be because the menu is open), you set the checked state to false and that will trigger the CSS for the menu.
$(document).ready(function() {
//took this code below from another SO answer that got good upvotes, and while I understand it easily, I can't figure out where to place it in the html...I fear that the CSS transforming and rendering of the menu is what is preventing this from working...
$('#menu').on('click', function() {
if ($(this).siblings('input').prop('checked')) {
$(this).siblings('input').prop('checked', false);
}
});
$('#menu a').on("click", function() {
if ($(this).parent('ul').siblings('input').prop('checked')) {
$(this).siblings('input').prop('checked', false);
}
});
});
.sticky-navMobile {
margin: 0;
width: max-content;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#menuToggle {
display: block;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: plum;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 5px;
position: relative;
background: #722f58;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
color: #232323;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
color: #232323;
}
/** Transform all the slices of hamburger into an X. */
#menuToggle input:checked~span {
background: rgb(146, 102, 146);
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
}
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
background: rgb(146, 102, 146);
}
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
background: rgb(146, 102, 146);
}
#menu {
position: absolute;
width: 150px;
margin: -37px 0 0 -10px;
border-bottom-right-radius: 45px;
padding-top: 40px;
background: #722f58;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menuToggle input:checked~ul {
transform: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="sticky-navMobile">
<nav>
<div id="menuToggle">
<!-- A fake / hidden checkbox is used as click receiver, so you can use the :checked selector on it.-->
<input type="checkbox" />
<!-- Some spans to act as a hamburger. They are acting like a real hamburger, not that McDonalds stuff. -->
<span></span>
<span></span>
<span></span>
<!-- Too bad the menu has to be inside of the button but hey, it's pure CSS magic.-->
<ul id="menu">
<a href="#projects">
<li>Projects</li>
</a>
<a href="#bio">
<li>Personal Info</li>
</a>
<a href="#footer">
<li>Contact</li>
</a>
</ul>
</div>
</nav>
</nav>
I have to add a hamburger for mobile view of my website coding.
I tried with the help of w3 school but it's not working fine.
I will share my html and css code. I have added a hamburger icon just have to make it active.
Should I write code in separate JavaScript file or add any code here in my HTML?
I have tried adding hamburger from HTML CSS properties
HTML and CSS for the mobile view header:
.mobheader {
width: 80%;
height: auto;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.hamburger {
font-size: 33px;
color: white;
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
<div class="mobheader">
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="logo">
<h1>
<img src="img/logomob.png" alt="logo">
</h1>
</div>
<div class="dots">
<i class="fas fa-search"></i>
</div>
</div>
I want this hamburger to work in such a way it shows 3 menus on click
I can't comment, I'm not understanding what's your problem because the code you already posted works, I just changed the color and the size in the code snippet. See and if your problem is other's just clarify what's your current problem.
EDIT
I find a codepen and added to the snippet to show you what you wanted.
Source: https://codepen.io/mranenko/pen/wevamj
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
doToggle: function(e) {
e.preventDefault();
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
}
};
hamburger.navToggle.addEventListener('click', function(e) {
hamburger.doToggle(e);
});
}());
/* imports */
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
/* colors */
/* variables */
/* mixins */
/* resets and base styles */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*:focus {
outline: none;
}
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif;
}
body {
background: none;
color: inherit;
font: inherit;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
a:hover {
opacity: 0.8;
}
/* nav toggle */
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2;
}
.nav-toggle:hover {
opacity: 0.8;
}
.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%;
}
.nav-toggle .nav-toggle-bar {
margin-top: 0;
}
.nav-toggle .nav-toggle-bar::after {
margin-top: 0.8rem;
}
.nav-toggle .nav-toggle-bar::before {
margin-top: -0.8rem;
}
.nav-toggle.expanded .nav-toggle-bar {
background: transparent;
}
.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before {
background: white;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* nav */
.nav {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1;
}
.nav.expanded {
left: 0;
}
.nav ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
<ul>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
Assuming the hamburger is an image:
<img src="img/hamburger.png" alt="hamburger"/>
You don't need the h1 tags for images, those are for headings (i.e text)
Also remember the "/" to close your img tags; your logo doesn't have one.
I am having a little bit of trouble figuring this out. I have 2 issues
When I hover over a a button (example About). It goes bold. However, the "boldness" of the about shifts all the other buttons about 2 pixels on hover. A little stuck on how I can fix this.
I've added a drop down menu, but on hover, the drop downs aren't being positioned directly under its Category. I am trying to position it so the sub menu's are under the category, centered.
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav ul {
margin: 0;
text-transform: uppercase;
}
.nav ul li {
text-align: center;
display: inline-block;
list-style: none;
padding: 15px 15px;
cursor: pointer;
line-height: 30px;
}
.nav ul li:hover a {
font-weight: bold;
}
.nav ul li a {
color: #eee;
text-decoration: none;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
First of all you need to use > in a selector to select the direct child ..
Remove left: 0 from ul > li > ul because it sticks the nested ul absolute position to the left
Set padding : 15px to the <a> instead of <li>
By using > style the main <ul> and the nested one separately
window.console = window.console || function(t) {};
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
(function($) {
"use strict";
var $navbar = $(".nav"),
y_pos = $navbar.offset().top,
height = $navbar.height();
$(document).scroll(function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 0) {
$navbar.addClass("sticky");
} else {
$navbar.removeClass("sticky");
}
});
})(jQuery, undefined);
$(".menu").click(function(){
$("#nav").toggleClass("open");
});
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
.section {
position: relative;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.nav {
transition: all .5s ease;
font-size: 12px;
font-family: 'Open Sans', sans-serif;
width: 100%;
z-index: 100;
position: absolute;
left: 0;
letter-spacing: 2px;
line-height: 100px;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand {
line-height: 100px;
padding-left: 60px;
padding-right: 60px;
display: inline-block;
float: left;
font-size: 20px;
font-family: 'Pacifico', cursive;
-webkit-transition-property: background-color, box-shadow, line-height, height;
transition-property: background-color, box-shadow, line-height, height;
-webkit-transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
transition-timing-function: cubic-bezier(0.78, 0.13, 0.15, 0.86);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav .brand a {
color: #E33B00;
text-decoration: none;
}
.nav > ul {
margin: 0;
text-transform: uppercase;
}
.nav > ul > li {
text-align: center;
display: inline-block;
list-style: none;
cursor: pointer;
line-height: 30px;
}
.nav > ul > li > a {
color: #eee;
text-decoration: none;
padding : 15px;
display : block;
}
.nav > ul > li:hover > a {
font-weight: bold;
}
.sticky {
position: fixed !important;
top: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
line-height: 30px;
}
.sticky .brand {
line-height: 60px;
}
.sticky ul li a {
color: #6E7982;
}
.sticky ul li:hover a {
color: #E33B00;
}
.pattern-overlay {
background: rgba(0, 0, 0, 0.3) url("/img/pattern.png") repeat;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
.menu {
display: none;
}
#media (max-width: 600px) {
.sticky .menu {
top: 0;
}
.sticky .menu .hamburger {
background: #6E7982;
}
.sticky .menu .hamburger::before, .sticky .menu .hamburger::after {
background: #6E7982;
}
.open.sticky .hamburger {
background: transparent;
}
.open .hamburger {
background-color: transparent;
}
.open .hamburger::before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.open .hamburger::after {
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
}
.menu {
display: block;
outline: none;
position: relative;
line-height: 60px;
float: left;
left: 20px;
top: 20px;
width: 60px;
height: 60px;
background: none;
border: 0;
padding: 0;
margin: 0;
cursor: pointer;
opacity: 0.7;
-webkit-transition: opacity 150ms;
transition: opacity 150ms;
}
.menu:hover {
opacity: 1;
}
.hamburger, .hamburger::after, .hamburger::before {
margin: 0 auto;
display: block;
width: 24px;
height: 3px;
line-height: 0;
-webkit-transition: all 150ms;
transition: all 150ms;
}
.hamburger::before {
content: '';
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background: #fff;
}
.hamburger::after {
content: '';
-webkit-transform: rotate(-45deg) translate(2px, -2px);
-ms-transform: rotate(-45deg) translate(2px, -2px);
transform: rotate(-45deg) translate(2px, -2px);
background: #fff;
}
.hamburger {
background: #fff;
}
.hamburger::after {
-webkit-transform: translateY(5px);
-ms-transform: translateY(5px);
transform: translateY(5px);
}
.hamburger::before {
-webkit-transform: translateY(-8px);
-ms-transform: translateY(-8px);
transform: translateY(-8px);
}
.navbar {
-webkit-transition: -webkit-transform 150ms;
transition: transform 150ms;
}
ul.navbar {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
transform: translate(-100%, 0);
padding-left: 0;
}
ul.navbar li {
line-height: calc((100vh - 60px) / 6);
display: block;
}
.open .navbar {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.nav .brand {
display: block;
text-align: center;
float: none;
}
.sticky .brand {
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
#nav {
height: 100px;
}
#nav.open {
height: auto;
min-height: 100%;
}
#nav.sticky {
height: 60px;
}
#nav .open.sticky {
height: auto;
}
ul > li > ul {
position : static;
}
}
ul > li > ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
padding-top: 1rem;
/*left: 0;*/
display: none;
background : yellow;
}
ul > li:hover > ul{
visibility: visible;
opacity: 1;
display: block;
}
ul > li > ul > li {
clear: both;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body translate="no" >
<nav id="nav" class="nav">
<button class="menu">
<em class="hamburger"></em>
</button>
<div class="brand">
Logo
</div>
<ul class="navbar">
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>Dropdown 1<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
Category 4
</li>
<li>Dropdown 2<i class="fa fa-caret-down"></i>
<ul class="dropdown">
<li>something 1</li>
<li>something 2</li>
<li>something 3</li>
</ul>
</li>
<li>
</ul>
</nav>
<section class="section" style="background: url(https://images.pexels.com/photos/1231622/pexels-photo-1231622.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<section class="section" style="background: url(https://images.pexels.com/photos/1421903/pexels-photo-1421903.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260); background-size: cover; background-attachment: fixed;"></section>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
hey there im trying to do something like the effect on the nav bar here:
https://riot.design/en/
this is the closest I got, pls help
.button_sliding_bg {
color: #31302B;
background: #FFF;
padding: 12px 17px;
margin: 25px;
font-family: 'OpenSansBold', sans-serif;
border: 3px solid #31302B;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 2px;
display: inline-block;
text-align: center;
cursor: pointer;
box-shadow: inset 0 0 0 0 #31302B;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.button_sliding_bg:hover {
box-shadow: inset 0 100px 0 0 #31302B;
color: #FFF;
}
<div class="button_sliding_bg">HELLOW</div>
$(".div1").on("mouseover",function(){
var $this=$(this).parent();
$this.find(".div2").slideDown("fast");
$this.find(".div1").slideUp("fast");
});
$(".div2").on("mouseleave",function(){
var $this=$(this).parent();
$this.find(".div1").slideDown("fast");
$this.find(".div2").slideUp("fast");
});
body{
background-color:#0C2663;
}
.element{
float:left;
width:65px;
margin:0 10px;
}
.element div{
width:60px;
margin-top:5px;
cursor:pointer;
padding:5px;
text-align:center;
}
.element div:last-child{
background-color:#fff;
color:#0C2663;
display:none;
}
.element div:first-child{
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
<div class="div1">Home</div>
<div class="div2">Home</div>
</div>
<div class="element">
<div class="div1">About</div>
<div class="div2">About</div>
</div>
<div class="element">
<div class="div1">Portfolio</div>
<div class="div2">Portfolio</div>
</div>
<br>
This should work for you. The concept relies on the CSS transform: translate and transform: rotate properties to create the flipping cube effect.
Hope this helps!
body {
padding-top: 20px;
background: #0B1F5C;
color: white;
text-transform: uppercase;
font-family: sans-serif;
font-size: 20px;
-webkit-perspective: 1000px;
}
.flip-box {
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;
}
.flip-box:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.face1,
.face2 {
background: #0B1F5C;
border: 1px solid #0B1F5C;
height: 100px;
}
.face1 {
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.face2 {
-webkit-transform: rotateX(-90deg) translateZ(-100px);
transform: rotateX(-90deg) translateZ(-100px);
font-size: 25px;
background: white;
color: #0B1F5C;
}
<div class="flip-box">
<div class="face1">
<h1>Home</h1>
</div>
<div class="face2">
<h2>Home</h2>
</div>
</div>
i used chrome inspector on the link that you mentioned and created this for you. please ask questions that its answer could help other people too.
notice that beside the css3 transforms the trick is in
.roll span:after
that the content of data-title attribute of the hovered element will be fetched and applied to the content property:
.roll span:after {
content: attr(data-title);
}
<span data-title="Home">Home</span>
body{
background-color:grey;
}
.navbar .navbar-inner {
margin-top: 80px;
}
.navbar .nav {
float: right;
margin-right: 0;
}
.navbar .nav li {
display: inline-block;
float: none;
overflow: hidden;
transform: translate3d(0,0,0);
}
.navbar-nav>li>a {
padding-top: 13px;
padding-bottom: 7px;
}
.navbar .nav li:last-child a {
padding-right: 0;
}
.lt-ie8 .navbar .nav li {
display: block;
float: left;
}
.roll {
display: inline-block;
overflow: hidden;
z-index: 200;
position: relative;
vertical-align: top;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
}
.roll span {
display: block;
position: relative;
padding: 0 2px;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
pointer-events: none;
-webkit-pointer-events: none;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
overflow: hidden;
height: 18px;
}
a.roll:hover span {
overflow: visible;
-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
.roll span:after {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
top: 1px;
padding: 0 2px;
color: #323C46;
background: #fff;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
-moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}
<body>
<div class="navbar">
<ul id="menu-primary-navigation-en" class="nav navbar-nav">
<li class="active menu-home">
<span data-title="Home">Home</span>
</li>
<li class="menu-about">
<span data-title="About">About</span>
</li>
<li class="menu-portfolio">
<span data-title="Portfolio">Portfolio</span>
</li>
<li class="menu-contacts">
<span data-title="Contacts">Contacts</span>
</li>
</ul>
</div>
</body>