Mobile Friendly Nav Bar

KKozel · ‎Mar 1, 2022

Hello,

I have created a nav bar that I love, but in mobile view it looks awful. I can't figure out how to get it to a normal menu on mobile using the hamburger icon. Is there a way I can just add that code into what I already have? I will add what I have written in HTML and CSS. I am new to coding and just need a push in the right direction.

This is my HTML:
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Future Students

<i class="fa fa-caret-down"></i>
</button>

<div class="dropdown-content">
<a href="https://www.hocking.edu/visit">Visit</a>
<a href="https://www.hocking.edu/the-admissions-process">Admissions Process</a>
<a href="https://www.hocking.edu/meet-the-admissions-team">Meet The Admissions Team
<a href="https://www.hocking.edu/financial-aid">Financial Aid</a>
<a href="https://foundation.hocking.edu/scholarships">Scholarships</a>
<a href="https://www.hocking.edu/residence-life">Housing Options</a>
<a href="https://www.hocking.edu/quickstart">Quickstart</a>
<a href="https://www.hocking.edu/international-students-resource-center">International Students</a>
<a href="https://www.hocking.edu/transfer-resource-center">Transfer Resource Center</a>
<a href="https://www.hocking.edu/how-to-pay-for-college">Paying For College</a>
<a href="https://www.hocking.edu/future-students">+ See More</a>
</div>
</div>

<div class="dropdown">
<button class="dropbtn">Current Students
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://www.hocking.edu/course-scheduling-registration">Scheduling & Registration</a>
<a href="https://foundation.hocking.edu/scholarships">Scholarships</a>
<a href="https://www.hocking.edu/graduation">Graduation</a>
<a href="https://www.hocking.edu/career-services">Career & University Center</a>
<a href="https://www.hocking.edu/academic-support">Academic Success Center</a>
<a href="https://www.hocking.edu/student-conduct">Student Conduct</a>
<a href="https://www.hocking.edu/transfer-resource-center">Transfer Resource Center</a>
<a href="https://www.hocking.edu/the-cashiers-office">Cashier's Office</a>
<a href="https://www.hocking.edu/registrar">Registar's Office</a>
<a href="https://www.hocking.edu/current-students">+ See More</a>
</div>
</div>

<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Majors
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://www.hocking.edu/majors">Allied Health & Nursing</a>
<a href="https://www.hocking.edu/majors">Arts, Business, & Science</a>
<a href="https://www.hocking.edu/majors">Natural Resources</a>
<a href="https://www.hocking.edu/majors">Public Safety Services</a>
<a href="https://www.hocking.edu/majors">Workforce Development</a>
<a href="https://www.hocking.edu/majors">Online Courses</a>
<a href="https://www.hocking.edu/majors">Certifications</a>
</div>
</div>
</div>

<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Parents
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://www.hocking.edu/resources-for-parents">Resource For Parents</a>
<a href="https://foundation.hocking.edu/scholarships">Scholarships</a>
<a href="https://www.hocking.edu/tuition-fees">Tuition & Fees</a>
<a href="https://www.hocking.edu/residence-life">Housing Options</a>
<a href="https://www.hocking.edu/driver-education">Driver Education</a>
<a href="https://www.hocking.edu/campus-safety">Campus Safety</a>
<a href="https://www.hocking.edu/about-hocking-hills">About Hocking Hills</a>
<a href="https://www.hocking.edu/parents">+ See more</a>
</div>
</div>
</div>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Alumni & Community
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://foundation.hocking.edu/">Hocking Foundation</a>
<a href="https://rhapsody.hocking.edu/">Rhapsody Music & Dining</a>
<a href="https://events.hocking.edu/">Event & Catering Services</a>
<a href="https://info.hocking.edu/rfp-energy-services">RFP: Energy Services</a>
<a href="https://www.hocking.edu/transcript-request">Transcript Requests</a>
<a href="https://www.hocking.edu/ibo">IBO Tournament Information</a>
<a href="https://foundation.hocking.edu/donate">Donate</a>
<a href="https://athletics.hocking.edu/">Athletics</a>
<a href="https://www.hocking.edu/driver-education">Driver Education</a>
<a href="https://www.hocking.edu/leisure-learning">Classes For The Community</a>
<a href="https://hmn.hocking.edu/">Makers Network</a>
<a href="https://www.hocking.edu/alumni-community">+ See more</a>
</div>
</div>
</div>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Faculty & Staff
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://events.hocking.edu/">Event & Catering Services</a>
<a href="https://www.hocking.edu/online-resources-for-educators">Educator Resources</a>
<a href="https://www.hocking.edu/administrative-offices">Administrative Offices</a>
<a href="https://info.hocking.edu/shared-governance">Shared Governance</a>
<a href="https://app.hubspot.com/login?__hstc=152003750.6f3108d36f36c266c0633281f3724d5e.1642082956573.164459...">Hubspot</a>
<a href="https://www.hocking.edu/the-computer-helpdesk">Computer Helpdesk</a>
<a href="https://www.hocking.edu/marketing">Marketing Office Request</a>
<a href="https://www.hocking.edu/academic-calendar">Academic Calendar</a>
<a href="https://share.hsforms.com/1yBOsIDgPQy6ymeiL0iXZtA1gfh5?__hstc=152003750.6f3108d36f36c266c0633281f372...">Submit Campus Story</a>
<a href="https://www.hocking.edu/administrative-policies">Policies</a>
<a href="https://connect.hocking.edu/authenticationendpoint/login.do?RelayState=%2FStudent%2FAccount%2FLandin...">Self-Service</a>
<a href="https://www.hocking.edu/driver-education">Driver Education</a>
<a href="https://www.hocking.edu/faculty">+ See More</a>
</div>
</div>
</div>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn">Resources
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="https://www.hocking.edu/find-your-ideal-career">Ebooks</a>
<a href="https://blog.hocking.edu/">Blog</a>
<a href="https://hcpress.hocking.edu/">The Press</a>
<a href="https://cdn2.hubspot.net/hubfs/2446169/Internal%20Docs%20(Website)/Admin%20Offices/strategicPlan2017...">Strategic Plan</a>
<a href="https://info.hocking.edu/coronavirus">Covid Reopening Plan</a>
</div>
</div>
</div>
</div>

This is my CSS:

body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

.navbar {
overflow: hidden;
color: white;
display: inline;
text-align: center;

}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;

}

.dropdown {
float: left;
overflow: hidden;

}

.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #f3d03e;
color: black;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #ddd;
}

.dropdown:hover .dropdown-content {
display: block;
}
/* Hide element on Tablet/Phone */
@media only screen and (max-width: 980px) {
.hide-on-mobile-tablet {
display: none !important;
}

Thanks!

A_Wessolly · ‎Mar 2, 2022

Hey @KKozel !

Is the website you are talking about https://www.hocking.edu/ ? It looks like you have been able to solve your issue, right? If, not please let us know so we can take a look into it!

KKozel · ‎Mar 3, 2022

It is for the Majors page, but we had to take it down for a couple days, so I will have to get back with a link to the page.

dennisedson · ‎Mar 2, 2022

Hey @KKozel !

Congrats on getting into the coding game!

Do you happen to have a link to a page that is employing this nav?
I am going to add some smart and friendly folks who can hopefully help get you over the finish line!

@A_Wessolly, @Brownstephen101 , @Stephanie-OG can any of you offer some advice for our new friend?

KKozel · ‎Mar 3, 2022

We had to take it down for a couple days, so I will have to get back with a link to the page unless theres a way to send a demo link? I currently have the nav bar blocked in mobile view because it displays ontop of content, but will unblock so you can fully see what the element is doing.

Share Your Work