Mobile Navigation Bar

Developer
Alex Loomer
Size
2,145 Kb
Views
32,384
  1. Mobile Navigation Bar Previews
  2. Mobile Navigation Bar HTML Codes
  3. Mobile Navigation Bar CSS Codes

How do I make an mobile navigation bar?

What is a mobile navigation bar? How do you make a mobile navigation bar? This script and codes were developed by Alex Loomer on 08 September 2022, Thursday.

Mobile Navigation Bar Previews
IQ Test

Mobile Navigation Bar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mobile Navigation Bar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav id="mobile-nav-bar"> <ul> <a href="#"><li><img src="https://github.com/atloomer/alexloomer-redesign/blob/gh-pages/img/home-icon.png?raw=true" alt="home icon" />Home</li></a> <a href="#"><li><img src="https://github.com/atloomer/alexloomer-redesign/blob/gh-pages/img/about-icon.png?raw=true" alt="about icon" />About</li></a> <a href="#"><li><img src="https://github.com/atloomer/alexloomer-redesign/blob/gh-pages/img/work-icon.png?raw=true" alt="work icon" />Work</li></a> <a href="#"><li><img src="https://github.com/atloomer/alexloomer-redesign/blob/gh-pages/img/resume-icon.png?raw=true" alt="resume icon" />Resume</li></a> <a href="#"><li><img id="contact-icon-resize" src="https://github.com/atloomer/alexloomer-redesign/blob/gh-pages/img/contact-icon.png?raw=true" alt="contact icon" />Contact</li></a> </ul>
</nav>
</body>
</html>

Mobile Navigation Bar - Script Codes CSS Codes

body { background: rgba(0, 0, 0, 0.8);
}
#mobile-nav-bar { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; height: 60px; background: #1e1e1e; font-size: .5em; position: fixed; bottom: 0; z-index: 999;
}
#mobile-nav-bar ul { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0; padding: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
#mobile-nav-bar a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; list-style-type: none; padding: 0; color: #edeeef; opacity: .6; text-transform: uppercase; border-top: .5px solid #000; border-bottom: .5px solid #000; height: 60px; text-align: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 20%; text-decoration: none; -webkit-transition: all .2s ease-out; transition: all .2s ease-out;
}
#mobile-nav-bar a:nth-child(1){ border-right: .5px solid #000;
}
#mobile-nav-bar a:nth-child(2) { border-right: .5px solid #000;
}
#mobile-nav-bar a:nth-child(3){ border-right: .5px solid #000;
}
#mobile-nav-bar a:nth-child(4) { border-right: .5px solid #000;
}
li img#contact-icon-resize { height: 2em;
}
#mobile-nav-bar li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 10px;
}
#mobile-nav-bar img { height: 2.2em; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; padding-bottom: 5px;
}
#mobile-nav-bar a:hover { background: rgba(0, 0, 0, 0.5);
}
Mobile Navigation Bar - Script Codes
Mobile Navigation Bar - Script Codes
Home Page Home
Developer Alex Loomer
Username atloomer
Uploaded September 08, 2022
Rating 3
Size 2,145 Kb
Views 32,384
Do you need developer help for Mobile Navigation Bar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Alex Loomer (atloomer) Script Codes
Name
CSS Lightbulb
Animate.css
Pitch Page Using Flexbox
Sierra Loomer Photo Home Page Mock
CSS Button Animations
EWU Catalog Index
Background Change on Link Hover
Fluid Layout with float
Responsive Navigation With Flexbox
Portfolio
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!