How to make responsive navbar? - html

Question

Here is my navbar:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/img/logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">LONG<br>ITEM1</li>
<li>LONG<br>ITEM 2</li>
<li>LONG<br>ITEM 3</li>
<li>LONG<br>ITEM 4</li>
<li>LONG<br>ITEM 5</li>
</ul>
</div>
</div>
</nav>
and css:
.navbar {
min-height: 100px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
margin-bottom: 0px;
padding: 0px 70px;
}
.navbar-brand>img {
height: 70px;
}
.navbar-brand {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-default {
background: #5aa0d1;
border-radius: 0;
-webkit-box-shadow: none;
-box-shadow: none;
border: 0;
}
.navbar-default .navbar-brand {
color: #fff14f;
}
.navbar-default .navbar-nav > li > a {
color: #fff14f;
line-height: 24px;
padding-top: 28px;
}
.navbar-default .navbar-nav>li.active>a {
color: #ffffff;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
color: #ffffff;
background-color: transparent;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #ffffff;
}
It doesn't displayed well on small devices (iPad, iPhone, Android devices) - some navbar elements overlay others (see real example at vkko.ru).
What is wrong there? How should I fix that?

Answer 1

I can see two issues here since you are not specifying what exactly you want fixed.
The logo is too big for an xs screen and the divider overlays the logo when you open the burger menu. I noticed you are using an image for a logo hence you don't really need to use the navbar-brand since that class adds unnecessary css for text based logos, you can simply use pull-left class.
<a class="pull-left" href="/"><img src="/img/logo.png"></a>
The other one is the font-size is too large and hence pushes the list of links to the next line when on smaller devices. You can use "media queries" to detect when a user is on a smaller device and adjust the font-size accordingly and I have used the css solution from this answer to fix your issue.
I have made a pen to help you visualise everything mentioned above. Hope it helps. http://codepen.io/anon/pen/PqEmgP

Answer 2

I've created a responsive navbar using only CSS,JS and JQuery. No additional library/plugins required.
Added animation on close, open navbar on mobile view.
Added animated hamburger menu.
You can checkout the demo+code here: https://codepen.io/jerrygoyal/pen/XEZvgG
HTML:
<nav class="navbar-menu">
<a class="nav-homepage">
JerryGoyal
</a>
<div class="nav-menu-select">
<a class="nav-hamburger">
<div class="hamburger bar1"></div>
<div class="hamburger bar2"></div>
<div class="hamburger bar3"></div>
</a>
</div>
<ul class="nav-menu-options">
<li>
<a>Apps</a>
</li>
<li>
<a>About Me</a>
</li>
<li>
<a>Contact</a>
</li>
</ul>
</nav>
JS:
$(document).ready(function () {
initNavbar();
});
function initNavbar(){
// 0 = hide, 1 = visible
var menuState = 0;
/* Add a Click event listener to btn-select */
$(".nav-hamburger").on("click",function() {
$(this).toggleClass('change');
if(menuState === 0) {
$(".nav-menu-options").slideDown("slow");
menuState = 1;
} else {
$(".nav-menu-options").slideUp("slow");
menuState = 0;
}
});
}
CSS:
/*****************************************************
NAV BAR START
*****************************************************/
.navbar-menu {
background-color: #005ec8;
width: calc(100%);
height: 55px;
}
.navbar-menu a{
color: #ffffff;
text-decoration: none;
font-size: 17px;
cursor: pointer;
}
.navbar-menu a:hover {
background-color: #fff;
color: #005ec8;
}
.nav-menu-options li a {
display: block;
padding: 18px;
}
.nav-homepage{
display: inline-block;
font-weight: bold;
font-size: 20px !important;
letter-spacing: 1px;
position: absolute;
z-index: 1;
padding: 17px;
}
.nav-menu-select {
margin: 0;
text-align: right;
height: inherit;
}
.nav-hamburger{
display: inline-block;
padding: 13px;
}
.nav-menu-options {
display: block;
text-align: right;
width: 100%;
margin: 0px;
padding: 0px;
background-color: inherit;
}
/* DESKTOP */
#media screen and (min-width: 750px) {
.nav-menu-select{
display: none;
}
.nav-menu-options{
display: block !important;
border-bottom: 0;
}
.nav-menu-options li{
display: inline-block;
}
}
/* MOBILE */
#media screen and (max-width: 750px) {
.navbar-menu {
margin: 0;
}
.nav-menu-options {
display: none;
position: relative;
text-align: center;
}
.nav-menu-options li{
display: block;
}
}
.hamburger {
width: 25px;
height: 2px;
background-color: currentColor;
margin: 6px 0;
transition: 0.4s;
}
.nav-hamburger:before{
content: "";
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 40px;
height: 40px;
border: 2px solid transparent;
top: 8px;
right: 4px;
border-radius: 100%;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 1;
}
.nav-hamburger.change:before{
border: 2px solid currentColor;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 7px);
transform: rotate(-45deg) translate(-4px, 7px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -7px);
transform: rotate(45deg) translate(-4px, -7px);
}
/*****************************************************
NAV BAR END
*****************************************************/
body{
background-color:#ffa700;
margin:0
}

Answer 3

you can use something like this:
#media screen and (max-width: 1024px) {}
and set custom rules for custom devices, I know its more of hardwork and not smartwork but it's more precise and trustable than using vw or vh
I made a responsive navbar with dropdown menu interactive with content.
if interested you can check it out!
https://youtu.be/0yF6ulcW7h0