How do I create a mobile version of Nav Bar

Question

I've posted the code for my nav bar in another post Fixing Nav Bar to top of page and now I would like to create a mobile version it but I'm new to the whole realm of creating for mobile as when I learned web design there wasn't such. So based on feedback and tweaking the css code, here is what I got working on the desktop version but I'm not sure how to check on the mobile version since it's not yet published...

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;} /* remember to define focus styles! */ :focus {outline: 0;} /* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse: collapse;border-spacing: 0;}


/*---------- BODY --------------------------------*/

body {
    text-align: center;
    background: #e0e0e0;
    padding-bottom: 200px;
}

a {
    text-decoration: none;
}

/*---------- Wrapper --------------------*/

nav {
    font: 13px Verdana, 'Lucida Grande';
    font-weight: bold;
    position:fixed;top:0;left:0;
    height: auto; 
    width: 100%;
    min-width: 360px;
    word-wrap: break-word
    background: #222;
}

ul {
    text-align: right;
}

ul li {
    cursor: pointer;
    -webkit-transition: padding .05s linear;
    -moz-transition: padding .05s linear;
    -ms-transition: padding .05s linear;
    -o-transition: padding .05s linear;
    transition: padding .05s linear;
}
ul li.drop {
    position: relative;
}
ul > li {
    display: inline-block;
}
ul li a {
    line-height:80px;
    padding: 0 10px;
    height: 80px;
    color: #777;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
ul li a:hover {
    color: #eee;
}

.dropOut .triangle {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
.dropdownContain {
    width: 160px;
    position: absolute;
    z-index: 10;
    left: 50%;
    margin-left: -80px; /* half of width */
    top: -400px;
}
.dropOut {
    width: 160px;
    background: white;
    float: left;
    position: relative;
    margin-top: 0px;
    opacity: 0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15);
    box-shadow: 0 1px 6px rgba(0,0,0,.15);
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

.dropOut ul {
    float: left;
    padding: 10px 0;
}
.dropOut ul li {
    text-align: left;
    float: left;
    width: 125px;
    padding: 12px 0 10px 15px;
    margin: 0px 10px;
    color: #777;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: background .1s ease-out;
    -moz-transition: background .1s ease-out;
    -ms-transition: background .1s ease-out;
    -o-transition: background .1s ease-out;
    transition: background .1s ease-out;
}

.dropOut ul li:hover {
    background: #f6f6f6;
}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }

Let me know how I can check on the progress of the mobile version and/or if this code makes it mobile friendly. Also, is it possible to change the look of the dropdown, dropOut sub-menu at all (just wondering)?

Use Bootstrap and all these gets easier..Have a look at http://getbootstrap.com/ and see the examples specified at http://getbootstrap.com/getting-started/.. — Lal, May 05 '15 at 13:50
Please don't make a question for every little problem you run into. Go read some documentation, and learn how to search for answers on your own. Here's a jumpstart: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries — Oka, May 05 '15 at 13:51
Your question is too broad. Try working on the problem, then if something specific stumps you, search for existing answers. If it's a new issue, then ask a new question. — Always Learning, May 05 '15 at 13:52

Nassim · Answer 1 · 2015-05-05T14:11:41.510

1

you are looking for a responsive design I believe , so you can use media queries in your css like so

#nav-bar
    {
    background-color:red;
    }

@media (max-width: 600px) 
{
    #nav-bar
    {
    background-color:blue;
    }

}
@media (max-width: 480px) 
{
    #nav-bar
    {
    background-color:green;
    }

}
/* ...etc*/

to test your responsive design:

in Firefox press F12 and then click on the icon "responsive design mode"

in Chrome press F12 then click on the icon "toggle mobile phone"

you can find more responsive navigation menu here:

http://navnav.co/

hope that helps

edited May 05 '15 at 14:11

answered May 05 '15 at 14:02

Nassim

2,879
2
37
39

That's a mouth full... Not sure I 100% get it but what I do know is that it'll add significantly to my code. – Drummatic May 05 '15 at 15:21

score 1 · Accepted Answer · answered May 05 '15 at 14:06

1

Guess you've been sleeping for a while?

Anyway the Mozilla Ducmentation mentioned is useful:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

But that may be confusing. When coming to the realm of Responsive Web design you have to understand that auto is you friend.

nav
{
height: auto; 
width: auto;
min-width: 360px;
word-wrap: break-wrod;
overflow: auto;
}

something like that anyway, Good Luck!

answered May 05 '15 at 14:06

kingkapd

69
8

Not sure I understand, I tried that but it put all the links to the left. So then I tried making min-width 100% and that fixed the width problem but the dropdown, dropout boxes were cut off and you couldn't see any of the links within them. – Drummatic May 05 '15 at 14:37
give the dropdown a higher z-index? or stop the overflow? – kingkapd May 05 '15 at 14:39
btw dont give the min-width a percentage, that ruins the point of a min width. – kingkapd May 05 '15 at 14:40
Ok got the higher z-index but what about min-width, I need the nav bar to go the entire width of the page on a PC so that the links are on the right as there will be a logo on the left. – Drummatic May 05 '15 at 14:52
yes so the width is 100%; – kingkapd May 05 '15 at 14:56
so set the mind width to whatever the minimum is your logo and and links need to be able to show up? – kingkapd May 05 '15 at 14:58
and please tick my answer?!!! – kingkapd May 05 '15 at 14:58
Tried all that but I can't seem to get the dropdown, dropout boxes to show on a PC. I need to fix that problem first before I can tick your answer as I need to get that working on both mobile and desktop. – Drummatic May 05 '15 at 15:08
If I stop the overflow and change the width to 100%, will that make it mobile friendly... It seems to work for the desktop version. – Drummatic May 05 '15 at 15:38
good i would advise against usning mobiles btw – kingkapd May 05 '15 at 15:52
huh, what do you mean you advise against using mobiles??? Is the nav bar now mobile friendly? – Drummatic May 05 '15 at 16:03
i ment i would advise against using drop down menu's on mobiles – kingkapd May 05 '15 at 20:27
Oh ok... Well sorry I didn't tick your answer till now, I haven't been here since you wrote back. – Drummatic May 12 '15 at 14:01
It is okay, better late than never! – kingkapd May 13 '15 at 07:10

How do I create a mobile version of Nav Bar

2 Answers2

Guess you've been sleeping for a while?