Melody Scott
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.
Can you help? Thanks.
Can you help? Thanks.
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 -
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.
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;
}
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.
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.
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%);
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
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>
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
ASKER
Thanks so much!!
ASKER
Ok, I have that working quite well here: http [colon]//dev2.magickitchen .com/navte st.html
but I've added a class .hNav p:hover; {
background-color:#ff8800;
}
and I can't get that to work.
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/navt est.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 -
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.
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>
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, and you're right, I hadn't looked at the break points yet.
ASKER
Great work, thanks!
http://getbootstrap.com/components/#navbar
http://getbootstrap.com/examples/navbar/
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