Need to adjust navigation in mobile

http://dev2.magickitchen.com/index.html  I like my new upper navigation in desktop. But when it is in mobile, I need the words home, etc to be a bit more to the right.

Capture.JPG
Can you help? Thanks.
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

lenamtlCommented:
Hi you should use Bootstrap nav bar this will create automatically the menu for small device.
http://getbootstrap.com/components/#navbar
http://getbootstrap.com/examples/navbar/

<nav class="navbar navbar-default">
  <div class="container-fluid">

Open in new window




There are some nav bar code example:
http://getbootstrap.com/getting-started
http://bootsnipp.com/search?q=navbar

http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp
0
Slick812Commented:
greetings mel200, , I looked at the page source code for your -
    http://dev2.magickitchen.com/index.html

and you use the copy and paste code from the "HTML5/CSS3 Gray Navigation Menu" at  http://www.ixtendo.com.
  BUT, this is an older nav bar build, and is NOT responsive at all, NONE, there is no part of this CSS code that is coded to be responsive , code from the  /nav/css/style.css    on your page -
* {
	margin: 0;
	padding: 0;
	outline: none;	
}

ul {
	list-style: none;	
}

#navigation {
	margin: 1px 0;	
	font: bold 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	color: #444;
}

#navigation:after {
	clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

#navigation ul {	
	float: left;
	border-radius: 100px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07);
	-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07);
    overflow: hidden;
}

#navigation li {
	float: left;
	border-style: solid; 
	border-width: 1px;
    border-color: #BABABA #BABABA #BABABA #FFF;
	box-shadow: 0 1px rgba(255,255,255,1) inset;
	-webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;
	background: #804f91; /* Old browsers */
	background: -moz-linear-gradient(top, #804f91 0%, #633473 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#804f91), color-stop(100%,#633473)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #804f91 0%,#633473 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #804f91 0%,#633473 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #804f91 0%,#633473 100%); /* IE10+ */
	background: linear-gradient(top, #804f91 0%,#633473 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#804f91', endColorstr='#633473',GradientType=0 ); /* IE6-9 */	
}

#navigation li:hover, #navigation li.current {
	box-shadow: 0 1px rgba(255,255,255,0.2) inset;
	-webkit-box-shadow: 0 1px rgba(255,255,255,0.2) inset;
	border-color: #ed8208 !important;
	background: #FF8800; /* Old browsers */
	background: -moz-linear-gradient(top, #FF8800 0%, #ed8208 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF8800), color-stop(100%,#ed8208)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #FF8800 0%,#ed8208 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #FF8800 0%,#ed8208 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #FF8800 0%,#ed8208 100%); /* IE10+ */
	background: linear-gradient(top, #FF8800 0%,#ed8208 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF8800', endColorstr='#ed8208',GradientType=0 ); /* IE6-9 */
}

#navigation a {
	display: block;
	padding: 0px 30px;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px #FFF;
}

#navigation a:hover, #navigation li.current a {
	color: #FFF;
	
}

#navigation li:first-child {
	border-left-color: #BABABA;
	border-radius: 100px 0 0 100px;
}

#navigation li:last-child {
	border-radius: 0 100px 100px 0;
}

Open in new window


One big problem you have in your narrow width view, as in your image "screen shot of mobile", is the way the <ul> is set to have a "border-radius: 100px" in this code -

#navigation ul {      
   float: left;
   border-radius: 100px;
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07);
   -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.07);
   overflow: hidden;
}

the border radius, is very bad when the eight <li> you have, collapse into two and three rows, this CSS is only functional on the FULL length display ( single row of <li> )

another problem that shows for the lack of "responsive", is that you have a "Fixed" padding of 30px in the <a> elements -

#navigation a {
   display: block;
   padding: 0px 30px;
   color: #fff;
   text-decoration: none;
   text-shadow: 0 1px #FFF;
}

this is POOR CSS set up, as you need a spacing, on left and right, that changes to smaller, as the view width narrows.

to have your graphical rounded ends to your nav bar, and the colors and borders, I do not think that the bootstrap nav bar will be what works for your design, you may need to do a custom container-fluid with one row

<div class="container-fluid">
      <div class="row">

can you tell me more about what you mean when you say -
   "I need the words home, etc to be a bit more to the right. "

because the collapsed nav bar you show is so bad looking, that I do not see that moving any to the right would help.
0
mel200Author Commented:
Hi, all, thanks for your information. I had used the plain bootstrap navbar before, and I find it so boring, so I was looking for something more interesting.

It sounds like I need something other than this nav bar I am using, though.  Let me think about it over the weekend, and I will work with a couple of things, then give the points or ask more questions. Thanks again.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Slick812Commented:
I have found it difficult to use any Bootstrap "standard" examples such as the "plain bootstrap navbar" and then try to "modify" them to a pleasing match to my sites positioning (try and center the plain bootstrap navbar) and colors, an rounded borders.

here is some responsive code that does NOT use bootstrap, that I had for a simalar nav bar - with rounded ends, and I added your colors -
      background: linear-gradient(top, #804f91 0%,#633473 100%);

<style>

.hNav {
background:#804f91; text-align:center; padding:5px 0;
}

.hNav p {
margin: 1px 0;
display: inline-block;
height:3em;
padding: 2px 2%;
  border-style: solid; 
  border-width: 1px;
  border-color: #FFF;
  box-shadow: 0 1px rgba(255,255,255,1) inset;
  -webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;
  background: #804f91; /* Old browsers */
  background: -moz-linear-gradient(top, #804f91 0%, #633473 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#804f91), color-stop(100%,#633473));
  background: -webkit-linear-gradient(top, #804f91 0%,#633473 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #804f91 0%,#633473 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #804f91 0%,#633473 100%); /* IE10+ */
  background: linear-gradient(top, #804f91 0%,#633473 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#804f91', endColorstr='#633473',GradientType=0 );

}

.hNav p:first-child {
	border-radius: 2em 0 0 2em;
}

.hNav p:last-child {
	border-radius: 0 2em 2em 0;
}


.hNav a {
display: block;
font: bold 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
text-decoration: none;
line-height: 320%;
}

.drp {display: none;}
.rBdr {}
.lBdr {}
@media screen and (max-width: 1290px){.hNav a {font-size: 0.9em;} .hNav p {height:2.2em;} .hNav a {line-height: 240%;}}
@media screen and (max-width: 1190px){.hNav a {font-size: 0.8em;} .hNav p {height:1.9em;} .hNav a {line-height: 210%;}}
@media screen and (max-width: 990px){.hNav a {font-size: 0.6em;} .hNav p {height:1.2em;} .hNav a {line-height: 180%;} .drp{display: inline;} .rBdr{border-radius: 0 2em 2em 0;} .lBdr {border-radius: 2em 0 0 2em;}}
</style>

<div class="hNav"><p>
<a href="/index.html">Home</a></p><p>
<a href="/how-to-start.html">How to Start</a></p><p>
<a href="/gifts.html">Gifts</a></p><p class="rBdr">
<a href="/meal-plans.html">Meal Programs</a></p><br class="drp" /><p class="lBdr">
<a href="/shipping.html">Delivery</a></p><p>
<a href="/contact.html">Contact us</a></p><p>
<a href="/catalog.html">Catalog</a></p><p>
<a href="/newsletter.html">NewsLetter Signup</a></p></div>

Open in new window


IMPORTANT, this nav bar was in another container that was responsive as the "Contents" of that page,
so the  transitions in the max-width: 1290px  -

@media screen and (max-width: 1290px)

will need to be customized, as changing all of the  "max-width"  px to do the transitions as width markers for your special page.

You probally can not use this but, it may show you some CSS methods that you can add to your nav bar
0
mel200Author Commented:
Thanks so much!!
0
mel200Author Commented:
Ok, I have that working quite well here: http [colon]//dev2.magickitchen.com/navtest.html

but I've added a class .hNav p:hover; {
      background-color:#ff8800;
}

and I can't get that to work.
0
Slick812Commented:
I looked at you page at       dev2.magickitchen.com/navtest.html
and it seemed to work, more or less, but needs various adjustments. I did that first code as mostly a copy of some other thing I did, and adapted the <ul> <li> <a> stuctures that you use. I looked at the code again, and I saw I had to many elements in the structure, you don't need any of the <p> elements, , , Also the height of the links on my cell phone were much too small,     Soooooo, I redid the code in my firefox developer browser, and here is a better version -

<style>
.navBar2 {
width:85%; background:#804f91; text-align:center; padding:5px 0;
}

.navBar2 a {
margin: 1px 0;
display: inline-block;
text-align:center;
padding: 2px 1.92%;
	border-style: solid; 
	border-width: 1px;
    border-color: #fff;
	font: bold 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
color: white;
text-decoration: none;
line-height: 300%;
	box-shadow: 0 1px rgba(255,255,255,1) inset;
	-webkit-box-shadow: 0 1px rgba(255,255,255,1) inset;
	background: #804f91; /* Old browsers */
	background: -moz-linear-gradient(top, #804f91 0%, #633473 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#804f91), color-stop(100%,#633473));
	background: -webkit-linear-gradient(top, #804f91 0%,#633473 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #804f91 0%,#633473 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #804f91 0%,#633473 100%); /* IE10+ */
	background: linear-gradient(top, #804f91 0%,#633473 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#804f91', endColorstr='#633473',GradientType=0 );
}

.navBar2 a:first-child {
	border-radius: 2em 0 0 2em;
}

.navBar2 a:last-child {
	border-radius: 0 2em 2em 0;
}

.navBar2 a:hover { background: #ff8800;
background: -moz-linear-gradient(top, #ff8800 4%, #aa5500 100%);
background: linear-gradient(top, #ff8800 4%,#995500 100%);
}

.twoLine{display:none;}
.rtBr{}
.lfBr{}

@media screen and (max-width: 1290px){.navBar2 a {font-size: 0.9em; line-height: 220%;}}
@media screen and (max-width: 1190px){.navBar2 a {font-size: 0.8em; line-height: 190%;  padding: 4px 1.92%;} }
@media screen and (max-width: 990px){.twoLine{display: inline;} .rtBr{border-radius: 0 2em 2em 0;} .lfBr {border-radius: 2em 0 0 2em;}}
@media screen and (max-width: 630px){.navBar2 a {height:2.0em; font-size: 0.6em; padding: 7px 1.82%;}}
</style>

<div class="navBar2"><a
  href="/index.html">Home</a><a
  href="/how-to-start.html">How to Start</a><a
  href="/gifts.html">Gifts</a><a class="rtBr"
  href="/meal-plans.html">Meal Programs</a><br class="twoLine" /><a class="lfBr"
  href="/shipping.html">Delivery</a><a
  href="/contact.html">Contact us</a><a
  href="/catalog.html">Catalog</a><a
  href="/newsletter.html">NewsLetter Signup</a>
</div>

Open in new window


I labeled it navBar2 to avoid any confusion with any other CSS class that might be named navBar

the reason that your hover did not work, is because you used the    background-color:    which because of the gradients does nothing, , I used the    background:      for hover, and it works in firefox. I did NOT place all of the backwards compatible gradients in the   :hover , you'll have to do that yourself.
0
Slick812Commented:
some thoughts, I did not see that you did your work and CHANGE ALL of the MAX pixel widths in the several -
      @media screen and (max-width: 1290px) {

the 1290px , 1190px ,  990px , and  630px   that I used are just a FAST development Guess, at some suggestive break points. If you have never done this sort of thing, then start with your browser more than 1400 wide, then Drag the left or right side to a more narrow width slowly, and watch how the display changes at your break points. You need to be aware of how CLOSE the purple rectangle side edges are to the sides of the nav bar, it should change to a small er display WHEN the edges get close. If is is NOT correctly going smaller, the Change the  1290px   or other to more or less to set it correctly.

I think it looks much better as a centered nav bar, instead of on the left like you have it.

you place a   vertical-align:middle;  in the  .hNav   I can not see a reason for this, as this DOES NOT AFFECT elements inside the    .hNav   it only affects the  .hNav  element it's self , and since there are no other elements to align the .hNav  width, I do not see it as nessary.

Just a note, on my cell phone, your page still has the side orange spaces around the content, and I would think that your display view of the content shoul be  at max - 100% for the narrow width of my phone? ? , this is Bootstrap thing, and has nothing to do with this nav bar thing.

Also to become good at CSS adjustments, you need to change as many of the CSS like the padding, and the line heights, to see how that affects the display.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
Thanks, and you're right, I hadn't looked at the break points yet.
0
mel200Author Commented:
Great work, thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.