Responsive Dropdown Navigation Bar

10/10/2017 Responsive Dropdown Navigation Bar Tania Rascia
Tania Rascia

Tutorials Snippets Tania Portfolio Thoughts
Responsive Dropdown Navigation Bar

October 2, 2015 / 64 responses
Bootstrap and Foundation have fantastic navbars that you can use if you choose to base your
layout on their framework. For my own projects, I chose to make a customizable responsive
dropdown navbar with an animated hamburger menu. The navigation is built on Sass, adaptable,
and requires very little jQuery. It was inspired by Flaunt.js by Todd Motto.
Theres a lot that goes into building a navbar like this, so Ill go over the speci cs. Frameworks are
great, but I think its a great idea for every developer to create their own navigation at some point to
understand how it works.
The Demo
HTML SCSS JS Result Edit on
LOGO Home About Services Pricing Portfolio Contact
Navigation
Responsive Dropdown Navigation Bar.
Want to see how it's made? Read the tutorial!
https://www.taniarascia.com/responsive-dropdown-navigation-bar/ 1/37
I would
suggest opening a new pen on Codepen and doing this tutorial step by step to see how it
Tania Rascia
works.

The HTML
Lets start with the menu itself. Its a regular list, wrapped in a semantic nav tag.
<nav>
<div class="nav-mobile">
<a id="nav-toggle" href="#!"><span></span></a>
</div>
<ul class="nav-list">
<li><a href="#!">Home</a></li>
<li><a href="#!">About</a></li>
<li><a href="#!">Services</a>
<ul class="nav-dropdown">
<li><a href="#!">Web Design</a></li>
<li><a href="#!">Web Development</a></li>
<li><a href="#!">Graphic Design</a></li>
</ul>
</li>
<li><a href="#!">Pricing</a></li>
<li><a href="#!">Contact</a></li>
</ul>
</nav>
A list with no styling applied. Everything in the nav-mobile class will not appear until we begin
working on the small device view. Setting the links to #! will ensure that no action takes place on
click.
The
Tania SCSS
Rascia

I like to use Sass, or more speci cally, SCSS. Theres a lot of nesting going on in these navbars, and
we can prevent repetition in the code with Sass. Additionally, variables will drastically improve the
ease of color and size customization.
First, Im going to set a few variables.
$content-width: 1000px;
$breakpoint: 800px;
$nav-height: 70px;
$nav-background: #262626;
$nav-font-color: #ffffff;
$link-hover-color: #2581DC;
$content-width will be the max width of the content within the navigation bar. $breakpoint
determines at which width the media query breakpoint will take effect. Obviously named variables
are created for size and colors.
The Sass Skeleton
nav {
ul {
li {
a {
&:hover {
}
&:not(:only-child):after {
}
} // Dropdown list
ul li {
a {
}
}
}
}
}
Now
weRascia
Tania begin lling it in. Well oat the entire nav to the right, remove the bullet points on the list
and any pre-determined browser padding.

nav {
float: right;
ul {
list-style: none;
margin: 0;
padding: 0;
}
}
Now we oat the list items to the left and style the a tag. The li will be set to position:
relative , which doesnt do anything yet, but will be explained a few steps down.
li {
float: left;
position: relative;
a {
display: block;
padding: 0 20px;
line-height: $nav-height;
background: $nav-background;
color: $nav-font-color;
text-decoration: none;
}
}
Tania Rascia

Ive set the nested a tag to display:block with some padding, and gave it our previously
determined colors. This is a dark navbar, but you can just as easily revert the colors for a light
navbar.
a {
&:hover {
background: $link-hover-color;
}
&:not(:only-child):after {
padding-left: 4px;
content: ' ';
}
The hover is simple Im just changing the background color of the entire a tag. Next, we have
some pretty interesting CSS3.
&:not(:only-child):after
The full path of this code is nav ul li a:not(:only-child):after . This means that the code will
apply to any a tag in our nav list that is NOT an only child, aka any dropdown. The :after means
it comes after the output of the tag. Ive decided that to specify any nav item as a dropdown, it will
be followed by a unicode arrow (#9662).
Tania
} // Rascia
Dropdown list
ul li
{
min-width:
Tutorials 190px; Snippets Tania Portfolio Thoughts
a {
padding: 15px;
line-height: 20px;
}
A small bit of styling is applied to the nested ul s. Ive given the li a minimum width, so that the
dropdown width wont vary based on content. Ive changed the padding and line-height of the
dropdown a , because the styling cascades down from the parent.
Positioning
Absolute and relative positioning remove items from the normal ow of the document. Learn CSS
Layout has a very good, simple explanation of how positioning works. The important part to
remember for this dropdown nav is that an position:absolute element will be placed relative to a
position: relative element. You can think of the absolute element being nested within the
relative element.
We already set the li to position: relative earlier. Now were going to add a new, absolutely
positioned class. z-index: 1 guarantees that the dropdown will display on top of any content. And
I added a box shadow, as is standard for dropdowns.
.nav-dropdown {
position: absolute;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
Tania Rascia

Add display: none; so that we can toggle it later with JavaScript.
The jQuery
Well begin adding jQuery.
(function($) { // Begin jQuery
})(jQuery);
And tell the function to run on DOM ready.
(function($) {
$(function() { // DOM Ready
// Insert all scripts here
});
})(jQuery);
Activating
the dropdown is extremely simple. I devised this speci c method, and havent seen it
Tania Rascia
used on any other dropdown nav, and seems to work quite well. Im going to target any a in the

menu that has children, and toggle the .nav-dropdown class.
$('nav ul li > a:not(:only-child)').click(function(e) {

$(this).siblings('.nav-dropdown').toggle();
});
1. When the CSS path nav ul li > a:not(:only-child) is clicked on

2. Toggle (change the display property of) that speci c nav-dropdown class.
$(this) speci es that it only targets only what was clicked on, and not every instance of that CSS
path.
But whats that (e) for? If you happen to have two dropdowns in the nav, and click on both of them,
they both open. We want to prevent that behavior, and force only one dropdown to be open at a
time. Inside of that same function, add:
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
This hides all of the dropdowns, and stopPropagation(); prevents that action from taking place.
We attach it to e and place that e in the function.
Theres one more thing: I want the dropdown to hide if I click away from it at any point. Well hide it
by setting a click function to the entire html tag.
$('html').click(function() {
$('.nav-dropdown').hide();
});
Heres the entire jQuery so far.
(function($) {
$(function() {
$('nav ul li > a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
Tania Rascia
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();

});
$('html').click(function() {
$('.nav-dropdown').hide();
});
});
})(jQuery);
Mobile
Now we have a fully functional dropdown nav. The next step is to turn it into a hamburger menu on
mobile collapse. Were going to create a square in the top right of the screen where the hamburger
will live.
.nav-mobile {
//display: none;
position: absolute;
top: 0;
right: 0;
height: $nav-height;
width: $nav-height;
}
display:none is commented out so we can work on it right now. Later I will refer back
to this.
Create a media query based on the mobile breakpoint.
@media only screen and (max-width: $breakpoint) {

// Insert all mobile styles here
For
now,
Tania hide the ul and well work on the hamburger.
Rascia

nav Tutorials
{ Snippets Tania Portfolio Thoughts
ul {
display: none;
}
}
Elijah Manor created a great CSS animated hamburger icon, and were going to use that method.
You can read his tutorial to learn more about how this works. For my part, I condensed it for Sass.
The concept behind how it works is that a span class in the #nav-toggle id has a :before and
an :after . The span is displayed as a thin, wide block level element that looks like a line. The
before and after raise and lower the line, creating three lines.
Finally, the jQuery comes in and adds an .active class to the span, which rotates the :before
and :after , creating an X.
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
span,
span:before,
span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: $nav-font-color;
position: absolute;
display: block;
content: '';
transition: all 300ms ease-in-out;
}
span:before {
top: -10px;
}
span:after {
Tania Rascia
bottom: -10px;
}
&.active
Tutorials span { Snippets Tania Portfolio Thoughts
background-color: transparent;
&:before,
&:after {
top: 0;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
}
Toggle the .active span.
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
Now you have a hamburger icon that animates on click action, but doesnt do anything yet.
The nal addition to our jQuery code will toggle the nav ul on click.
Tania Rascia
$('#nav-toggle').click(function() {
$('nav
ul').toggle();
}); Tutorials Snippets Tania Portfolio Thoughts
Perfect! The hamburger toggles the menu. Our jQuery functionality is complete.
Fixing the disappearing navbar bug
Ive seen many navbars that have a bug that causes the menu to disappear on desktop if you
already toggled the view on mobile. This is an issue that is mostly noticed by developers, as your
average user probably isnt constantly resizing screens and toggling menus. However, this is a very
simple problem to x. If youll notice in the original HTML, Ive set the ul class to nav-list , but
havent referenced it yet. With this simple code, Im going to ensure that the menu is always
displayed on large screen sizes.
@media screen and (min-width: $breakpoint) {

.nav-list {
display: block !important;
}
}
Now is the time to uncomment display: none; from the .nav-mobile class. We want
it to be invisible until mobile collapse.
Now go back to your @media only screen and (max-width: $breakpoint) query. Place this at
the top.
Tania Rascia
.nav-mobile {
display:
block;
} Tutorials Snippets Tania Portfolio Thoughts
We have to apply some styles to the mobile menu. First, set the nav to take up 100% of the
viewport. Remove the left oat from the list. Well set some padding and height to the a tag, and
extra left padding to the nested ul s.
nav {
width: 100%;
padding: $nav-height 0 15px;
ul {
display: none;
li {
float: none;
a {
padding: 15px;
line-height: 20px;
}
ul li a {
padding-left: 30px;
}
}
}
}
Set .nav-dropdown to static, otherwise it will over ow onto the other list items.
.nav-dropdown {
position: static;
}
Tania Rascia

There you have it a completely responsive navigation menu. It does everything that it needs to do,
but its just oating there. A lot of tutorials just stop at this point, and I used to be confused as to
how to incorporate that menu into the navbar. Fortunately, this is the easiest part.
The Navigation Bar
Go back to your HTML from the beginning of the tutorial. Wrap the entire nav in this code.
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="#!">Logo</a>
</div>

</div>
</section>
There
Taniaare three layers to this code:
Rascia

.navigation
the outer wrapper for the navbar.Speci es the heightand color, and will stretch
the
full width of the viewport.
.navigation {
height: $nav-height;
}
.nav-container the inner wrapper for the navbar. De nes how far the actual content should
stretch.
.nav-container {
max-width: $content-width;
margin: 0 auto;
}
.brand within .navigation and .nav-container , there are two colums .brand on the left
side, and nav on the right. The rst thing I did with the nav list was oat it to the right. Most of this
is just styling; the important part is the absolute positioning and left oat.
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: $nav-height;
text-transform: uppercase;
font-size: 1.4em;
a,
a:visited {
text-decoration: none;
}
}
Tania Rascia

And thats the end of this tutorial! If you didnt want to read through any of that, heres the complete,
fully functional three aspects HTML, SCSS and JS. If you dont use Sass and just want the CSS,
you can very easily convert it to CSS.
If youre copying the code in CodePen, make sure to include the jQuery library or it
wont work!
View Source View Demo
The Author
If you've found this article helpful or interesting and think others would bene t from reading it, please share!
Thank you for reading! I'm Tania Rascia, and I write no-
nonsense guides for designers and developers. If my content
has been valuable to you, please help me keep the site ad-
free and continuously updated with quality tutorials and
material by making a donation. Any amount helps and is
greatly appreciated! Otherwise, let me know any ideas you Search
have on a course you'd be eager to see.
Donate!
Write
a response
Tania Rascia
Your email
address will not be published.
Comment
Name
Email
Post Comment
Discussion
jamespadou
September 28, 2017 at 12:23 pm
please I cant use SASS can you help me convert it to CSS
Reply
Chris
Awesome navigation bar! Many thanks for sharing this tutorial

I managed to create my own navigation bar based on Tanias. And it works perfectly.
One thing I wanted to do but with no success, is to add lines/dividers on my some of my dropdown
items, and horizontal lines/dividers on the menu items only visible when the menu is collapsed in
mobile view.
Any ideas would be greatly appreciated.

Tania Rascia
Chris

Tutorials Snippets Tania Portfolio Thoughts Reply
Konrad
September 21, 2017 at 11:36 am
TAnia Please help !
Im getting this error in javascript code :
Line 2 column 3 Missing use strict statement.
Just copy & paste the code so got some ideas ?
Reply
Thom
Hello, very useful tutorial however I cant get it to work correctly. See picture
https://imgur.com/lEEdozk . Any ideas why this happens? Also this button isnt working while
everything else works just ne. Thanks!
Reply
Thom
Solution -> normalize.min.css
Reply
sscummings
Thanks for this. Works like a charm.
Reply
Thomas

Tania Rascia
Hello! Thanks for your work!

Can i use this Navigation in a commercial projekt?
Reply
Dave
August 25, 2017 at 11:24 am
the menu dropdowns dont work
Reply
Tania
August 26, 2017 at 6:20 am
Youre probably not including jQuery.
Reply
Honey
July 29, 2017 at 2:26 am
Hello Tania,
I added this line of code
but the menu still not changing to mobile hamburger menu.
please help?
Reply
Rs
July 25, 2017 at 12:32 am
Great Work Rascia!!

It is easy to understand new people who are fresher and get the easily things.
Reply
Andrew
May 18, 2017 at 1:34 pm
A great little menu but it needs a small change. The breakpoints overlap at 800px so if you size the
Tania Rascia
window to exactly 800px the menu dropdown always shows since both breakpoints are satis ed.
Having
a 1 px difference
between mobile and desktop breakpoints solves
this.
Reply
g
May 18, 2017 at 1:43 am
ud
Reply
Mika
May 16, 2017 at 9:14 am
Hey Tania,
I love your tutorials, theyve been a huge help in my development process!
Would you mind sharing how I could incorporate something like this into a wordpress theme?
Currently I have my website and wordpress separate and I would like to combine the two.
Thanks in advance!
Reply
Tania
May 16, 2017 at 10:40 am
Im glad youve enjoyed them! You would use built-in WordPress menus (here is the code) to add a
menu to your site. Here is my guide on creating a WordPress theme from scratch. With both of
those resources, you should be able to get an idea how to teach yourself how to do this.
Reply
Larraine
May 11, 2017 at 10:18 am
This works brilliantly, I have been searching for ages to get a simple responsive menu that does not
use Bootstrap. I have one question though and I have tried to get this to work, can the drop downs
fade in when opened?
Reply
Tania Rascia
daniel cortez
May 2, 2017 at 8:30 pm

Tutorials Snippets
Hello good night tania, Tania have to be ablePortfolio
I have a query like I would Thoughts
to have a level more in the menu.
Thanks for the tutorials
Reply
John
April 7, 2017 at 9:24 pm
How would you adjust the javascript to accommodate a sub menu? For example, based on your
demo, if the Services menu and another sub menu within it? Right now, adding a sub menu results in
the whole menu closing when trying to open the sub menu.
Reply
Daniel
April 20, 2017 at 12:28 pm
John, (or anyone)

Did you nd a good x for this?
Thanks!
Reply
John
May 9, 2017 at 8:55 pm
Not yet, was hoping for a reply on here.
Suresh
April 6, 2017 at 5:50 pm
I downloaded the code and ran it locally. When I view the menu in chrome in responsive mode(by
clicking F12 and select iphone6 mode), the menu is not changing to mobile hamburger menu . When I
view it in codepen.io detail view, it shows the mobile menu. I would really appreciate if you can let me
know what Im doing wrong.
Reply
Tania Rascia
Tania
April 11, 2017 at 9:57 am

Tutorials Snippetsissue. Make sure
This is likely a JavaScript Tania Portfolio
youre loading in jQuery Thoughts
before your JavaScript.
Reply
Bryan
March 28, 2017 at 9:32 am
Do you have a mobile- rst version of this by chance Tanya? Great tutorial by the way.
Reply
Tania
March 28, 2017 at 9:36 am
Great question! Unfortunately, I built this one before I knew to create navigations mobile rst. It
would be exactly the same, you would just have to do a bit of reverse engineering to use min-
width queries instead of max-width .
Reply
Tohir
March 23, 2017 at 1:15 pm
Awesome tutorial. I love this menu. I want one addition. I want the drop down section have a nice
animation during opening up. How can I do that? Can you help me?
Reply
Justine Chacko
March 18, 2017 at 1:36 am
How to rebranch dropdown menu item?
Reply
Justine Chacko
March 16, 2017 at 1:52 am
how to make sub branch again to sub branch?

Tania Rascia
how to decrease the size of hamburger?

Reply
Suliman
March 7, 2017 at 1:32 pm
Hi Tania,
Im trying to extend the menu to add an additional menu level. Im having trouble getting the jQuery
correct to hide the all other sub-menu items other than the one that is selected. What would the
correct code be to accomplish this? Thank you.
Reply
Anonymous
January 31, 2017 at 1:43 pm
Hi Tania,
I am trying to setup this script. I was wondering if there is a way that on desktop if there is a sub nav
item under the parent nav, that it lets you hover over to see the drop down.
Reply
James
February 2, 2017 at 10:06 am
Hi wondering if you understood my question?
Reply
Tania
February 2, 2017 at 10:08 am
Im not entirely sure how you want it, but if you want the dropdowns to be enabled on hover as
opposed to click, you can do that without JavaScript. Simply changing the display from none to
block on hover should do it.
Justine Chacko
January 26, 2017 at 12:05 am
Thanks for tutorial. Navigation dropdown not works for me. Please helpDid I miss anything..
Tania Rascia
My site is
https://justinechacko.github.io/test/

Reply
Tania
January 26, 2017 at 10:57 am
You must put jQuery above your custom .js les.
Reply
JUSTINE CHACKO
January 31, 2017 at 1:22 am
Thanks
Christian
January 13, 2017 at 2:58 pm
Hi i like this nav bar but is thier a way to add text Before or after the hamburger Icon so it says MENU
or somthing like that?
Reply
Adi
January 3, 2017 at 6:16 am
Hi, Tania
you have great work there, I really like the responsive navbar menu, recently google announce the
AMP, i would like to implement that navbar in my new AMP project, do you know how to make that
menu without using jquery and only use inline css.
Reply
Fabrizio
December 14, 2016 at 11:46 am
Hi Tania,
Great Work !
But if before your navigation bar there is a banner (a 120px high logo, for example) in mobile situation
Tania Rascia
the hamburger icon is not placed within the dark grey bar but in the right top position (in the corner).
How
to change such absolute
position to the position over the grey
bar?
Thanks
Tutorials a lot Snippets Tania Portfolio Thoughts
Fabrizio
Reply
Tania
December 15, 2016 at 9:22 am
You should just set the position of the hamburger to absolute, and the bar itself to relative.
Reply
Raffaello
November 20, 2016 at 2:24 am
Great tutorial, clean and simple to understand.

May I ask you if there is a way to have the mobile menu close when you click outside of it (like the
desktop menu)?
Many thanks.
raf
Reply
gigio
November 13, 2016 at 9:06 pm
Hi Tania,
thank you so much for your great article! It helped me a lot with my site redesign project.
Do you have any good code to make this navbar sticky?
Tried this but on mobile the menu covers the content instead of pushing it down like in the original
code:
.navigation {
height: 70px;
background: #8BC34A;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
Tania Rascia
}

body {
padding-top: 70px;
}
Thanks!
Reply
Tania
In this case, you would put margin-top: 70px; on the article , or whatever div/section you
had directly below the navigation that contains your main content.
Reply
Linda
August 28, 2016 at 9:07 am
Hello Tania! I dont know if you got my email before, so I will try again. I really love your design, but it
does not seem to work and respond on touch on my mobile. Here is one that Ive built that works on
my mobile, but only problem is that it doesn not take the logo with it when it changes to the
hamburgermeny. Is there anyway you could implement the code here into your tutorial, so it responds
to touch on the mobile? Or could you help me understand how I can get the logo to come next to the
hamburgericon? Example
Im not so good at programming and really like your tutorial and your beautiful design. Heres my
example: http://www.ljusporten.se/tania/tania.html. It works on the computer in mobile size. If you
dont have time, could you please just let me know that, so I can try to gure out the code myself
asap..? Kind regards Linda hrn
Reply
Tania
August 30, 2016 at 9:24 am
Im sorry, it must really depend on the mobile phone, because it works for me on iPhone.
Reply
Tania Rascia
Linda
August 24, 2016 at 9:13 am

Tutorials
Hello Tania! Thank you Snippets Tania
for your beautiful meny ! It works perfectPortfolio
on my computer, alsoThoughts
in mobile size.
But.. it does not work on my mobile device, an android. The hamburgermeny is already open when
the page loads, and it does not close or react on click. Also the nested link Services (it does not
display the arrow on my mobile), does not react or open on touch. Wherever I click the on the links in
the menu it does not close. I really love this one, this is the sixth tutorial Ive build, that works like I
want on my computer. Can you please help me x it for mobile device? It does not seem to respond
on touch at all. Heres my demo: http://ljusporten.se/tania/tania.html I took a screenprint from my
mobile: http://ljusporten.se/tania/SC20160824-155521.png (I rotated my mobile just to print a bigger
picture, its still the same problems as above.) /Linda
Reply
Peter
June 27, 2016 at 12:15 am
Hi Tania,
This tutorial was remarkably helpful! Ive learned so much from it, and I cant thank you enough.
However, I hate to say, I just cant seem to get the nal product to work! I must be missing
something; even when I copy and paste the CodePen you put together for Mark into a brand new
CodePen just to test it, I get the same result, which is to say the dropdown doesnt drop down and the
hamburger doesnt become an X or open the menu.
Like I said, I must be missing something but I just cant see what! Do have any idea why this might
be?
Reply
Tania
June 27, 2016 at 1:01 am
If youre just copying and pasting my code into a new pen, youre not copying jQuery over, which is
in the Codepen options. Add the jQuery library and it will work.
Reply
Peter
June 27, 2016 at 1:33 am
Oh, wow. Yep, I forgot to include the jQuery library in my project. Even for a relative beginner, that
shouldve been pretty obvious! Thank you for clearing that up, and thanks again for the tutorial.
Tania Rascia
Tania
Tutorials
June 27, 2016 atSnippets
11:09 am Tania Portfolio Thoughts
I should have made it more obvious.
Daniel
June 16, 2016 at 10:47 pm
This is amazing. I have a bootcamp coming up next week and I really wanted to understand how a
navigation like this works. Also this made me realize switching from LESS to SASS is going to be way
easier than I thought. I knew exactly what the SASS notation was doing. Thank you.
Reply
jeff brooks
April 21, 2016 at 3:44 pm
Tania
Thank you very much I am just now getting back into coding sites at the request of some old
friends a thing or two or a thousand has changed over the past 3-4 years. I stumbled across this
while looking for information on responsive menus thank you very much I really enjoyed it. And your
responses to everyone who writes in are equally kind.
Reply
Jorge Moller
March 21, 2016 at 7:33 pm
Hello Tania,
First of all thanks for this awasome lesson, it really helped me a lot!!. Just one quick opninion that
may help others, when creating hamburguer menu, you wrote Toggle the .active span. followed by
this code:
$(#nav-toggle).click(function() {
$(nav ul).toggle();
});
I think you meant to write something like this, otherwise the animation will not work (at least for me it
did not):
$(#nav-toggle).click(function() {
Tania Rascia
$(this).toggleClass(active);
});

Anyway, keep it up the good work, again, this put me in the right direction to start building my own css
framework so thanks!!
Reply
Tania
March 22, 2016 at 8:37 am
You are so right! Sorry about that. I xed it in the article. Glad you gured it out anyway. Ive been
building my own CSS framework, too. Its fun!
Reply
Mark
Ive been trying to replicate your example and follow along since it was rst posted in early October
and read it on Reddit.
However, I am having a bit of trouble and I dont know if it has to do with the jQuery. Another, is that I
cannot get the content: ?; to appear next to Services in the nav bar. It will not drop down or toggle
when clicked upon.
Ive installed Ruby 2.2.3, SASS, linked to Bootstrap CDN website in the header, and made sure my .js
le is in the correct le location and linked in the HTML header.
Am I missing proper jQuery installation?
Reply
Tania
Hi Mark, Id love to help gure out what the problem is. Is there any chance you can make a pen or
send me your code so I can see whats going on?
Also, I noticed that you said my js le is in the header. Its important that your JavaScript le go in
the footer, below jQuery.
So, in the footer you should have one script src pointed at jQuery, and your custom JavaScript
below it.
Additionally, this navigation does not require Bootstrap to function.

Tania Rascia
Reply

Mark
Sorry for the delay, I posted late and had to end the night to get up for work.
Here is the CodePen link with the code I was using.:
http://codepen.io/anon/pen/epjXEe
Pretty much the same code in your tutorial (I strayed from copy/paste and tried to hand write as
much as possible). Im sorta guessing it has to do with proper jQuery linking.
The problem is, I cannot get that triangle to render next to services and activate the drop down
menu using jQuery. I moved the script tags down into the footer as you suggested, but Im still
getting the same result that the Pen is rendering.
P.S. If I do not link to Bootstrap, the X and Menu option does not sit right. I commented out the
body jQuery and the Bootstrap link.
Tania
Hi Mark,
The reason theres a space at the top of the screen is because of browser consistency. If you add
Normalize.css to your pen, it will take care of this issue, and prevent headache on further
projects. Additionally, you can simply type
body {
margin: 0;
}
in your CSS to take care of that issue. (I would always recommend using Normalize, though!)
First of all, you have your nav-toggle showing on desktop, which shouldnt be the case, since the
menu is already there. So I added a display: none to mobile view.
.nav-mobile {
display: none;
}
Tania Rascia

You
Tutorials want to change all
Snippets your links from# to
Tania #! to prevent them from
Portfolio doing any action on click.
Thoughts
Going to # will reload the page at the top of the screen, wile #! will do nothing.
You already know that jQuery is loading properly, because the navigation is toggling on click, and
the mobile menu appears when you click the hamburger.
The reason your dropdowns arent working is this: My code is ul li a:not(:only-

child):after . This means any list that has more lists should have the arrow.
Here is your code:
<li><a href="#!" rel="nofollow">Services</a></li>

<li>
<li><a href="#" rel="nofollow">Web Design</a></li>
Here is the correct code:
<li><a href="#!" rel="nofollow">Services</a>

<li><a href="#" rel="nofollow">Web Design</a>
Can you spot the difference? You ended your list and started a new one for Web design and so
on. This needs to be a new list nested inside of your existing list.
Additionally, I would look into the way Im nesting my SCSS. Youre simply writing vanilla (regular)
CSS, like this:
nav {}
nav ul {}
nav ul li {}
For Sass, you should be writing it like this:
nav {
ul {
li {}
}
Tania Rascia
}

Finally, on a Codepen, you can choose jQuery in the options on the JavaScript panel and load it
from there.
I hope that helps. Here is an updated version of your pen.
Mark
Oh! Thank you, Tania.
I added body {margin: 0;} and made sure to x the nav lists and it worked.
Tania
Youre welcome! Let me know if you have any additional questions or requests.
Nilson Gaspar
October 28, 2015 at 6:34 am
This is very helpful Tania, as whole the material in your page, mainly because the way you explain, is
clear to any level of knowledge, but even more for beginners, like myself. I wonder if you would
consider make a tutorial to do a hamburger menu slide navbar, like the one from the Jekyll theme
Poole. I am currently trying to code one myself, with not much success, but i will build it (instead of
using Pooles id rather learn how to build one for future projects).
PS: im the guy that loves you, from reddit ?
Reply
Tania
October 30, 2015 at 9:37 pm
Hello! Thank you for the nice comment. I started this blog as a way to remember the things I
learned, as I learned them, so the explanations were made to be as clear and precise and possible,
regardless of experience level. Im assuming youre talking about this theme from Poole. I can
de nitely make a tutorial about that.
Reply
Tania Rascia

Tutorials
Nilson GasparSnippets Tania Portfolio Thoughts
October 31, 2015 at 11:59 am
Yes, thats exactly the one. It is exactly how i want to be the end result, but im struggling to get it
to work at the moment. I intend to build it by myself, with SASS, because i got addicted and im
not ashamed of it
Tania
Heres the tutorial!
Nilson Gaspar
I will check and learn from it immediately, thanks for this Tania, cheers!
Tania
Nilson,
I updated the Off Canvas Navigation post with an improved, simpli ed version.
Tania's List
My tutorials, guides, and articles for web designers, developers, and autodidacts, sent out once a
month or so. No bullshit, ads, or tricks.
Email address
I'm Tania Rascia, a web designer/developer, autodidact, tech writer and problem solver. I love
hiking,
Tania karaoke,
Rascia recording music, and building communities. Say hello!

Tutorials
Snippets

Tania

Portfolio

Thoughts
Open source MIT.
My site is free and free of ads, clickbait, popups, guest posts, and sponsored content. Has this
site been valuable to you? Please consider donating so I can continue creating!
Donate!

Responsive Dropdown Navigation Bar - Tania Rascia

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Responsive Dropdown Navigation Bar - Tania Rascia

Încărcat de

Drepturi de autor:

Formate disponibile

10/10/2017 Responsive Dropdown Navigation Bar Tania Rascia

HTML SCSS JS Result Edit on

LOGO Home About Services Pricing Portfolio Contact

Want to see how it's made? Read the tutorial!

First, Im going to set a few variables.

The Sass Skeleton

Add display: none; so that we can toggle it later with JavaScript.

Well begin adding jQuery.

(function($) { // Begin jQuery

And tell the function to run on DOM ready.

// Insert all scripts here

$('nav ul li > a:not(:only-child)').click(function(e) {

1. When the CSS path nav ul li > a:not(:only-child) is clicked on

Heres the entire jQuery so far.

Create a media query based on the mobile breakpoint.

@media only screen and (max-width: $breakpoint) {

Toggle the .active span.

Fixing the disappearing navbar bug

@media screen and (min-width: $breakpoint) {

The Navigation Bar

View Source View Demo

please I cant use SASS can you help me convert it to CSS

Awesome navigation bar! Many thanks for sharing this tutorial

Any ideas would be greatly appreciated.

TAnia Please help !

Im getting this error in javascript code :

Line 2 column 3 Missing use strict statement.

Just copy & paste the code so got some ideas ?

Solution -> normalize.min.css

Thanks for this. Works like a charm.

September 8, 2017 at 3:25 pm

the menu dropdowns dont work

Youre probably not including jQuery.

but the menu still not changing to mobile hamburger menu.

Great Work Rascia!!

John, (or anyone)

Not yet, was hoping for a reply on here.

How to rebranch dropdown menu item?

how to make sub branch again to sub branch?

Hi wondering if you understood my question?

You must put jQuery above your custom .js les.

Great tutorial, clean and simple to understand.

Do you have any good code to make this navbar sticky?

I should have made it more obvious.

Am I missing proper jQuery installation?

Additionally, this navigation does not require Bootstrap to function.

Here is the CodePen link with the code I was using.:

The reason your dropdowns arent working is this: My code is ul li a:not(:only-

Here is your code:

<li><a href="#!" rel="nofollow">Services</a></li>

Here is the correct code:

<li><a href="#!" rel="nofollow">Services</a>

For Sass, you should be writing it like this:

I hope that helps. Here is an updated version of your pen.

Oh! Thank you, Tania.

PS: im the guy that loves you, from reddit ?

Heres the tutorial!

Open source MIT.

S-ar putea să vă placă și