Link to home
Start Free TrialLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

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.

User generated image
Can you help? Thanks.
Avatar of lenamtl
lenamtl
Flag of Canada image

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
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.
Avatar of Melody Scott

ASKER

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.
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
Thanks so much!!
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.
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.
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks, and you're right, I hadn't looked at the break points yet.
Great work, thanks!