How to occupy 100% of the height - javascript

I'm trying to do a navbar but I have a responsive problem when trying to occupy 100% of the height of the screen.
any solution? thanks to all
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
<link rel="stylesheet" href="styles.css" />
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
</head>
<body>
<nav class="navbar">
<img class="navbar__logo" src="gamezonia.png" alt="logo" />
<ul class="navbar__list">
<li class="list__item">Inicio</li>
<li class="list__item">Categoria 1</li>
<li class="list__item">Categoria 2</li>
<li class="list__item">Categoria 3</li>
<li class="list__item">Contacto</li>
<li class="list__item">Acceder</li>
<li class="list__item--search"><i class="fas fa-search"></i></li>
</ul>
<div class="navbar__hamburger">
<i class="fas fa-bars"></i>
</div>
</nav>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<script src="./index.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
display: flex;
background-color: #2B2F33;
font-family: 'Roboto', sans-serif;
}
.navbar__logo{
width: 100%;
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list{
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.list__item--search{
margin-left: auto;
margin-right: 30px;
}
.navbar__hamburger{
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 850px){
.navbar{
position: relative;
}
.navbar__list{
display: block;
position: absolute;
width: 30%;
height: 100vh;
background-color: #2B2F33;
top: 100%;
transform: translateX(-100%);
transition: transform 0.5s;
}
.navbar__hamburger{
display: block;
margin-left: auto;
margin-right: 30px;
}
.showMenu{
transform: translateX(0%);
}
.list__item, .list__item--search{
padding: 10px;
margin-left: 10px;
}
}
JS:
console.log('works')
document.querySelector('.navbar__hamburger').addEventListener('click', ()=>{
document.querySelector('.navbar__list').classList.toggle('showMenu')
})


From your screenshot it seems like that navbar is scrolled up (the first four lis at the top are missing or not visible), so I would guess its container (nav) is higher than the screen and scrolls, or the navbar is somehow moved up under the top border of the screen.
A simple solution would be to change position from absolute to fixed, the the 100vh high navbar would remain in position and not scroll. You might have to adjust some other settings, but I supposse that should work.


Since the sidenav is inside the <nav> you can't use height: 100%. What you could do is combine position: fixed and height: 100vh like this:
.navbar__list {
display: block;
position: fixed;
width: 30%;
height: 100vh;
background-color: #2B2F33;
top: 0px;
transform: translateX(-100%);
transition: transform 0.5s;
}
It will still need some changes in order to keep the sidenav under the nav but it's a good start.

Related

Moving <li> to next column

I have following html code:
<div style="column-count: 3;">
<ul>
<li><h3>Education<h3></li>
<li><a>Education 1</a></li>
<li><a>Education 2</a></li>
<li><a>Education 3</a></li>
</ul>
<ul>
<li><h3>Careers<h3></li>
<li><a>Careers1</a></li>
<li><a>Careers2</a></li>
<li><a>Careers3</a></li>
</ul>
<ul>
<li><h3>Legal<h3></li>
<li><a>Legal</a></li>
<li><a>Legal</a></li>
<li><a>Legal</a></li>
</ul>
</div>
It divides the ul's into 3 columns. The following picture explains above code:
As you can see, Education is at the bottom of the first column, it looks weird because it's subsequent anchor tags are moved to the next column. I want to move Education to the next column as well in such case. Any CSS or JS solution?

A less-than-semantic but effective solution as inspired by this post is to wrap each h3 and the following a in an element, and then set them to display: inline-block.
We have to add some extra styles to make the list appear "normal" and not as a nested list, but this will effectively prevent a header from hanging at the bottom of any column. If one of the divs wrapping an h3 and the a immediately after it would normally break across columns, the use of display: inline-block on its children (i.e., the h3 and a) will prevent that break.
/* the important part */
ul li ul li div h3,
ul li ul li div a {
display: inline-block;
width: 100%;
}
/* aesthetics */
ul li ul {
list-style: none;
padding-left: 0;
}
ul li ul li {
list-style-type: disc;
}
div {
background-color: lightgray;
max-height: 150px;
}
<div style="column-count: 3;">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>
<ul>
<li>
<div>
<h3>Education</h3>
<a>Education 1</a>
</div>
</li>
</ul>
</li>
<li><a>Education 2</a></li>
<li><a>Education 3</a></li>
<li><a>Education 4</a></li>
<li><a>Education 5</a></li>
<li><a>Education 6</a></li>
</ul>
<ul>
<li>
<ul>
<li>
<div>
<h3>Careers</h3>
<a>Careers1</a>
</div>
</li>
</ul>
</li>
<li><a>Careers2</a></li>
<li><a>Careers3</a></li>
</ul>
<ul>
<li>
<ul>
<li>
<div>
<h3>Legal</h3>
<a>Legal</a>
</div>
</li>
</ul>
</li>
<li><a>Legal</a></li>
<li><a>Legal</a></li>
</ul>
</div>
Compare against:
/* the important part */
/*ul li ul li div h3,
ul li ul li div a {
display: inline-block;
width: 100%;
}*/
/* aesthetics */
ul li ul {
list-style: none;
padding-left: 0;
}
ul li ul li {
list-style-type: disc;
}
div {
background-color: lightgray;
max-height: 150px;
}
<div style="column-count: 3;">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>
<ul>
<li>
<div>
<h3>Education</h3>
<a>Education 1</a>
</div>
</li>
</ul>
</li>
<li><a>Education 2</a></li>
<li><a>Education 3</a></li>
<li><a>Education 4</a></li>
<li><a>Education 5</a></li>
<li><a>Education 6</a></li>
</ul>
<ul>
<li>
<ul>
<li>
<div>
<h3>Careers</h3>
<a>Careers1</a>
</div>
</li>
</ul>
</li>
<li><a>Careers2</a></li>
<li><a>Careers3</a></li>
</ul>
<ul>
<li>
<ul>
<li>
<div>
<h3>Legal</h3>
<a>Legal</a>
</div>
</li>
</ul>
</li>
<li><a>Legal</a></li>
<li><a>Legal</a></li>
</ul>
</div>
(Note: The above snippets fix a problem you had with not closing your h3 tags correctly.)

If you are using bootstrap, you can set put each list in a div and assign a col-xs-4 class to each div. If not, you can emulate something like the grid system.

menu acordeon : div stuck in my list because of the overflow

I want to create a side menu and my code look like this :
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
}
#submenus {
background-color: green;
display: none;
}
submenus ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
But I when I show my submenu, he do not apear outside the box...
I want a menu like this :
I need absolutely need the "overflow-y" because I have a lot of menu and I need to have a scrolling option. Did you know how to have this result?

You have <ul id="submenus"> within <div id="menus">, if you don't want the sub menus inside of the menu, make another <div>, and put it in that:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul>
<li>
<span onclick='opensubmenus()'>Menu 1</span>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
<div>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</div>
</nav>
Then to get them side-by-side, apply float:left; to #menus:
#menus {
overflow-y: scroll;
width: 150px;
background-color: blue;
float: left;
}
#submenus {
background-color: green;
display: none;
}
submenus, ul {
float: right;
position: relative;
}
nav {
overflow: hidden;
}

You can change your CSS and use absolute position on the submenu:
function opensubmenus() {
$('#submenus').css("display", "block");
}
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
#submenus {
position:absolute;
left:100%;
top:0;
background-color: green;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span onclick='opensubmenus()'>Menu 1</span>
<ul id='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
</div>
</nav>
Bonus -- Quick Multiple SubMenus
$('span').click(function(){
var col = $(this).data('color');
$('.submenus').hide();
$('span').css('background', '');
$(this).css('background', col);
$(this).next('.submenus').show().css('background', col);
})
#menus {
position:relative;
display:inline-block;
}
.main {
overflow-y: scroll;
margin:0;
width: 150px;
background-color: blue;
}
.submenus {
position:absolute;
left:100%;
top:0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div id='menus'>
<ul class="main">
<li>
<span data-color="red">Menu 1</span>
<ul class='submenus'>
<li>SubMenu 1
</li>
<li>
SubMenu 2
</li>
<li>
SubMenu 3
</li>
</ul>
</li>
<li>
<span data-color="yellow">Menu 2</span>
<ul class='submenus'>
<li>SubMenu 21
</li>
<li>
SubMenu 22
</li>
<li>
SubMenu 23
</li>
</ul>
</li>
<li>
<span data-color="green">Menu 3</span>
<ul class='submenus'>
<li>SubMenu 31
</li>
<li>
SubMenu 32
</li>
<li>
SubMenu 33
</li>
</ul>
</li>
</ul>
</div>
</nav>

How do I make my div's lined up?

I want my div's to line up on the top, but not line up at the bottom. This allows for flexibility of content:
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap
{
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-size:15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:7.5px 9px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-block;
margin-right: 30px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
</div>
</body>
</html>
In the above example, I have two divs, but they are not lined up. How do I line up the divs on the top? I've tried the flex property, but nothing is working...

display flex, does the job.
See the code below with your updated display propery.
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
display: flex; /* ADD YOUR FLEX DISPLAY PROPERTY HERE */
flex-flow: wrap;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-block;
margin-right: 30px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title>Hacked Genius</title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development
</li>
<li>Mobile Apps
</li>
<li>Programming Languages
</li>
<li>Game Development
</li>
<li>Databases
</li>
<li>Software Testing
</li>
<li>Software Engineering
</li>
<li>Development Tools
</li>
<li>E-Commerce
</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance
</li>
<li>Entrepreneurship
</li>
<li>Communications
</li>
<li>Management
</li>
<li>Sales
</li>
<li>Strategy
</li>
<li>Operations
</li>
<li>Project Management
</li>
<li>Business Law
</li>
<li>Data and Anylytics
</li>
<li>Home Business
</li>
<li>Human Resources
</li>
<li>Industry
</li>
<li>Media
</li>
<li>Real Estate
</li>
<li>Other
</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification
</li>
<li class="dir">Network & Security
<li>Hardware
</li>
<li>Operating Systems
</li>
<li>Other
</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft
</li>
<li class="dir">Apple
<li>Google
</li>
<li>SAP
</li>
<li>Intuit
</li>
<li>Salesforce
</li>
<li>Oracle
</li>
<li>Other
</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation
</li>
<li class="dir">Productivity
<li>Leadership
</li>
<li>Personal Finance
</li>
<li>Career Development
</li>
<li>Parenting & Relationships
</li>
<li>Happiness
</li>
<li>Religion & Spirituality
</li>
<li>Personal Brand Building
</li>
<li>Creativity
</li>
<li>Influence
</li>
<li>Self Esteem
</li>
<li>Stress Management
</li>
<li>Memory and Study Skills
</li>
<li>Motivation
</li>
<li>Other
</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design
</li>
<li class="dir">Graphic Design
<li>Design Tools
</li>
<li>User Experience
</li>
<li>Game Design
</li>
<li>Design Thinking
</li>
<li>3D & Animation
</li>
<li>Fashion
</li>
<li>Architectural Design
</li>
<li>Interior Design
</li>
<li>Other
</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing
</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing
</li>
<li>Branding
</li>
<li>Marketing Fundamentals
</li>
<li>Analystics & Automation
</li>
<li>Public Relations
</li>
<li>Advertising
</li>
<li>Video & Mobile Marketing
</li>
<li>Content Marketing
</li>
<li>Non-Digital Marketing
</li>
<li>Growth Hacking
</li>
<li>Affiliate Marketing
</li>
<li>Product Marketing
</li>
<li>Other
</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks
</li>
<li class="dir">Arts & Crafts
</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup
</li>
<li>Travel
</li>
<li>Gaming
</li>
<li>Home Improvement
</li>
<li>Pet Care & Training
</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography
</li>
<li class="dir">Photography Fundamentals
</li>
<li class="dir">Portraits
<li>Landscape
</li>
<li>Black & White
</li>
<li>Photography Tools
</li>
<li>Mobile Photography
</li>
<li>Travel Photography
</li>
<li>Commercial Photography
</li>
<li>Wedding Photography
</li>
<li>Video Design
</li>
<li>Other
</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness
</li>
<li class="dir">General Health
</li>
<li class="dir">Sports
<li>Nutrition
</li>
<li>Yoga
</li>
<li>Mental Health
</li>
<li>Dieting
</li>
<li>Self Defense
</li>
<li>Safety & First Aid
</li>
<li>Dance
</li>
<li>Meditation
</li>
<li>Other
</li>
</ul>
<li>Language
<ul>
<li class="dir">English
</li>
<li class="dir">Spanish
</li>
<li class="dir">German
<li>French
</li>
<li>Japanese
</li>
<li>Portuguese
</li>
<li>Chinese
</li>
<li>Russian
</li>
<li>Latin
</li>
<li>Arabic
</li>
<li>Hebrew
</li>
<li>Italian
</li>
<li>Other
</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments
</li>
<li class="dir">Production
</li>
<li class="dir">Music Fundamentals
<li>Vocal
</li>
<li>Music Techniques
</li>
<li>Music Software
</li>
<li>Other
</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science
</li>
<li class="dir">Math & Science
</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
</div>
</body>
</html>

Another option is to add float: left; to the anchor tags in #course_div and then target every anchor element after the 5th anchor element with nth-child() to clear the floated elements before it.
#course_div a {
float: left;
}
#course_div a:nth-child(5n+6) {
clear: left;
}
SIDE NOTE: #course_info is being used repeatedly and should be a CSS class, .course_info.
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap
{
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-size:15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:7.5px 9px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-block;
margin-right: 30px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
#course_div a {
float: left;
}
#course_div a:nth-child(5n+6) {
clear: left;
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
</div>
</body>
</html>

Add vertical-align:top; to your .course_main class:
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
vertical-align:top;
width: 216px;
display: inline-block;
margin-right: 30px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title>Hacked Genius</title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development
</li>
<li>Mobile Apps
</li>
<li>Programming Languages
</li>
<li>Game Development
</li>
<li>Databases
</li>
<li>Software Testing
</li>
<li>Software Engineering
</li>
<li>Development Tools
</li>
<li>E-Commerce
</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance
</li>
<li>Entrepreneurship
</li>
<li>Communications
</li>
<li>Management
</li>
<li>Sales
</li>
<li>Strategy
</li>
<li>Operations
</li>
<li>Project Management
</li>
<li>Business Law
</li>
<li>Data and Anylytics
</li>
<li>Home Business
</li>
<li>Human Resources
</li>
<li>Industry
</li>
<li>Media
</li>
<li>Real Estate
</li>
<li>Other
</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification
</li>
<li class="dir">Network & Security
<li>Hardware
</li>
<li>Operating Systems
</li>
<li>Other
</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft
</li>
<li class="dir">Apple
<li>Google
</li>
<li>SAP
</li>
<li>Intuit
</li>
<li>Salesforce
</li>
<li>Oracle
</li>
<li>Other
</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation
</li>
<li class="dir">Productivity
<li>Leadership
</li>
<li>Personal Finance
</li>
<li>Career Development
</li>
<li>Parenting & Relationships
</li>
<li>Happiness
</li>
<li>Religion & Spirituality
</li>
<li>Personal Brand Building
</li>
<li>Creativity
</li>
<li>Influence
</li>
<li>Self Esteem
</li>
<li>Stress Management
</li>
<li>Memory and Study Skills
</li>
<li>Motivation
</li>
<li>Other
</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design
</li>
<li class="dir">Graphic Design
<li>Design Tools
</li>
<li>User Experience
</li>
<li>Game Design
</li>
<li>Design Thinking
</li>
<li>3D & Animation
</li>
<li>Fashion
</li>
<li>Architectural Design
</li>
<li>Interior Design
</li>
<li>Other
</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing
</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing
</li>
<li>Branding
</li>
<li>Marketing Fundamentals
</li>
<li>Analystics & Automation
</li>
<li>Public Relations
</li>
<li>Advertising
</li>
<li>Video & Mobile Marketing
</li>
<li>Content Marketing
</li>
<li>Non-Digital Marketing
</li>
<li>Growth Hacking
</li>
<li>Affiliate Marketing
</li>
<li>Product Marketing
</li>
<li>Other
</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks
</li>
<li class="dir">Arts & Crafts
</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup
</li>
<li>Travel
</li>
<li>Gaming
</li>
<li>Home Improvement
</li>
<li>Pet Care & Training
</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography
</li>
<li class="dir">Photography Fundamentals
</li>
<li class="dir">Portraits
<li>Landscape
</li>
<li>Black & White
</li>
<li>Photography Tools
</li>
<li>Mobile Photography
</li>
<li>Travel Photography
</li>
<li>Commercial Photography
</li>
<li>Wedding Photography
</li>
<li>Video Design
</li>
<li>Other
</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness
</li>
<li class="dir">General Health
</li>
<li class="dir">Sports
<li>Nutrition
</li>
<li>Yoga
</li>
<li>Mental Health
</li>
<li>Dieting
</li>
<li>Self Defense
</li>
<li>Safety & First Aid
</li>
<li>Dance
</li>
<li>Meditation
</li>
<li>Other
</li>
</ul>
<li>Language
<ul>
<li class="dir">English
</li>
<li class="dir">Spanish
</li>
<li class="dir">German
<li>French
</li>
<li>Japanese
</li>
<li>Portuguese
</li>
<li>Chinese
</li>
<li>Russian
</li>
<li>Latin
</li>
<li>Arabic
</li>
<li>Hebrew
</li>
<li>Italian
</li>
<li>Other
</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments
</li>
<li class="dir">Production
</li>
<li class="dir">Music Fundamentals
<li>Vocal
</li>
<li>Music Techniques
</li>
<li>Music Software
</li>
<li>Other
</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science
</li>
<li class="dir">Math & Science
</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
</div>
</body>
</html>

A jQuery soluction can be jQuery.equalHeights:
https://github.com/mattbanks/jQuery.equalHeights
It will calculate the height of your selector and set the same height to all the elements within your selector.
e.g.
<div class="test">
This is one line of text.
</div>
<div class="test">
This is three lines of text.<br>
This is three lines of text.<br>
This is three lines of text.<br>
</div>
<style type="text/css">
.test{border: solid 1px #f00};
</style>
<script>
$(document).ready(function(){
$('.test').equalHeights();
});
</script>
Another solution can be the use of flexbox, example found here: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Try changing display: inline-block to display: inline-table in the .course_main div in CSS
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap
{
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-size:15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:7.5px 9px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-table;
margin-right: 30px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
</div>
</body>
</html>

Active child menu when I active this url using jQuery

I have created a sidebar, activation class work properly when I stay just parent menu like Sidebar Menu, if I then click on a Sub Menu, although the correct article displays, the NAV bar closes and lose my navigation position.
Below my work code:
Html:
<div id='sidebar'>
<ul>
<li><a href='#'>Sidebar Menu</a></li>
<li class='sub'><a href='#'>Sidebar</a>
<ul>
<li class='sub'><a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li class='sub'><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Jquery
$("#sidebar > ul > li").each(function() {
var sideItem = $(this);
if (sideItem.find("a").attr("href") == location.pathname) {
sideItem.addClass("activation");
}
});
$('#sidebar li.active').addClass('open').children('ul').show();
$('#sidebar li.sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
}
else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
Issue 1: leave submenues open if I not close submenues
Like below image:
At the same time open three submenu I implement like this.
Issue 2: Active child menu when I active this url
How can I reach this solution?
JSFiddle

I think this is what you want. I only concerned about your main point.sorry about the UI.try this and tell me is this your case.you can try it in here.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.navi{
width: 200px;
}
ul{
color: orange;
cursor: pointer;
font-weight: bold;
}
ul li{
list-style-type: none;
color: black;
text-indent: 20%;
font-weight: normal;
display: list-item;
display: none;
}
ul li:hover{
background-color: orange;
color: white;
}
ul li:active{
background-color: orange;
color: white;
}
</style>
<body>
<div class="navi">
<ul class="one"><span class="onez"> > Sub One</span>
<li>First</li>
<li>Second</li>
</ul>
<ul class="two"> <span class="twoz"> > Sub Two</span>
<li>Third</li>
<li>Four</li>
</ul>
</div>
<script type="text/javascript">
$(".onez").click(function(){
if ($("ul.one li").is(':visible')){
$("ul.one li").slideUp();
}
else{
$("ul.one li").slideDown();
}
});
$(".twoz").click(function(){
if ($("ul.two li").is(':visible')){
$("ul.two li").slideUp();
}
else{
$("ul.two li").slideDown();
}
});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>active child test</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#sidebar ul li{
list-style: none;
}
#sidebar ul li a{
text-decoration: none;
}
.glyphicon {
top: -3.1px;
font-size: 14px;
}
.uparrow{
display: none;
}
</style>
</head>
<body>
<div id='sidebar'>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar</a>
<ul>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Sidebar 1</a>
<ul>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
<li>
<span class="glyphicon glyphicon-triangle-right uparrow"></span>
<span class="glyphicon glyphicon-triangle-bottom downarrow"></span>
<a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Sidebar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("a").click(function(){
var parent=$(this).parent();
$('.downarrow',parent).toggle();
$('.uparrow',parent).toggle();
$("ul",parent).slideToggle("fast");
$(this).toggleClass("up");
});
})
</script>
</body>
</html>

Jquery show only current parent childrens. Hide another families

Have 3 level menu:
jQuery("#product_cats_nav li").toggle(
function () {
//var current = jQuery(this).closest('.level1');
//jQuery(current).siblings().addClass("hide");
jQuery(this).children().removeClass("hide").addClass("show");
},
function () {
jQuery(this).find("ul").removeClass("show").addClass("hide");
}
);
.hide {
display: none
};
.show {
display: block
};
#top_menu ul {
border: 1px solid red;
background-color: lime ;
position: absolute;
margin: 0;
width: 100%;
z-index: 100;
}
#top_menu li {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-full" id="top_menu">
<ul id="product_cats_nav">
<li class="level1" menu-level="1">Level1 A
<ul class="hide">
<li class="level2" menu-level="2">Level2 A
<ul class="hide">
<li class="level3" menu-level="3">
Level3 A</li>
</ul>
</li>
</ul>
</li>
<li class="level1" menu-level="1">Level1 B
<ul class="hide">
<li class="level2" menu-level="2">Level2 B
<ul class="hide">
<li class="level3" menu-level="3">
Level3 B</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Goal:
When some submenu(level2) or (level1) is clicked and active (opened) close all another level1 childrens.
Current js just toogle one block with another, but not hide elements of another level1 children fammily
In snippet i had comment out my triyings with sibling..
How to solve that?

Is this what you are looking for?
jQuery("#product_cats_nav li").toggle(
function () {
//var current = jQuery(this).closest('.level1');
//jQuery(current).siblings().addClass("hide");
jQuery(this).closest('#product_cats_nav').find('ul').removeClass("show").addClass("hide");
jQuery(this).children().removeClass("hide").addClass("show");
},
function () {
jQuery(this).find("ul").removeClass("show").addClass("hide");
}
);
.hide {
display: none
};
.show {
display: block
};
#top_menu ul {
border: 1px solid red;
background-color: lime ;
position: absolute;
margin: 0;
width: 100%;
z-index: 100;
}
#top_menu li {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-full" id="top_menu">
<ul id="product_cats_nav">
<li class="level1" menu-level="1">Level1 A
<ul class="hide">
<li class="level2" menu-level="2">Level2 A
<ul class="hide">
<li class="level3" menu-level="3">
Level3 A</li>
</ul>
</li>
</ul>
</li>
<li class="level1" menu-level="1">Level1 B
<ul class="hide">
<li class="level2" menu-level="2">Level2 B
<ul class="hide">
<li class="level3" menu-level="3">
Level3 B</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Categories

Resources