moving elements within a nav bar

[sgflowers]

I am trying to replicate the look of a 1.2.6 site in 1.3
I managed to create all the elements in a 2nd nav bar but they are positioned wrong

here is my 1.3 development site

http://sulserv.dyndns.org/sgf/

** it will take a while to come up **


here is the existing live

http://www.secretgardenflowers.com

1) how do i move the search form in the nav bar to the center
2) how do i center the new text link elements i created in navbar2 (ie all products etc) so that they are centered?
3) how to i have borders around the nav bars?

Thanks,

I have found the classes for the nav bars i just can't figure out what element to add or modify to drive this

- Kevin

[clydejones]

use border: 1px solid #000000; and text-align: center;

[sgflowers]

use border: 1px solid #000000; and text-align: center;

thanks but on what class

here are the classes i figured drive it

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {

margin: 0em;

background-color: #C00000;

font-weight: bold;

color: #ffffff;

height: 1%;

width: 100%;

}



#navMainWrapper2 {

margin: 0em;

background-color: #C00000;

font-weight: bold;

color: #ffffff;

height: 1%;

width: 100%;

}



#navMain ul, #navSupp ul, #navCatTabs ul {

margin: 0;

padding: 0.5em 0em;

list-style-type: none;

text-align: center;

line-height: 1.5em;

}

#navMain2 ul {

margin: 0;

padding: 0.5em 0em;

list-style-type: none;

text-align: center;

line-height: 1.5em;

}

#navMain ul li, #navMain2 ul li, #navSupp ul li, #navCatTabs ul li {

display: inline;

white-space: nowrap;

}



#navMain2 ul li {

display: inline;

white-space: nowrap;

}



#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {

text-decoration: none;

padding: 0em 0.5em;

margin: 0;

color: #ffffff;

}



#navMain2 ul li a {

text-decoration: none;

padding: 0em 0.5em;

margin: 0;

color: #ffffff;

}

[clydejones]

Add a new ID to the stylesheet

#navMain2 { border: 1px solid #000000; text-align: center;}
This should center everything in this Navbar.

looking at the search in the source it renders like this <div class="navMainSearch forward"> which aligns it to the right. You'll have to find the template file that handles this search form and remove the forward class. I'd then add the class
.navMainSearch {text-align: center;} to the stylesheet

thanks but on what class

here are the classes i figured drive it

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {

margin: 0em;

background-color: #C00000;

font-weight: bold;

color: #ffffff;

height: 1%;

width: 100%;

}



#navMainWrapper2 {

margin: 0em;

background-color: #C00000;

font-weight: bold;

color: #ffffff;

height: 1%;

width: 100%;

}



#navMain ul, #navSupp ul, #navCatTabs ul {

margin: 0;

padding: 0.5em 0em;

list-style-type: none;

text-align: center;

line-height: 1.5em;

}

#navMain2 ul {

margin: 0;

padding: 0.5em 0em;

list-style-type: none;

text-align: center;

line-height: 1.5em;

}

#navMain ul li, #navMain2 ul li, #navSupp ul li, #navCatTabs ul li {

display: inline;

white-space: nowrap;

}



#navMain2 ul li {

display: inline;

white-space: nowrap;

}



#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {

text-decoration: none;

padding: 0em 0.5em;

margin: 0;

color: #ffffff;

}



#navMain2 ul li a {

text-decoration: none;

padding: 0em 0.5em;

margin: 0;

color: #ffffff;

}

[clydejones]

I just noticed one other thing in the source:

<div id="navMain2">
<ul class="back"> this aligns everything to the left;

You'll need to remove the class="back" from the template file (tpl_header.php)

[sgflowers]

I just noticed one other thing in the source:

<div id="navMain2">
<ul class="back"> this aligns everything to the left;

You'll need to remove the class="back" from the template file (tpl_header.php)

thanks for all the help

no i know why my edits wern't taking!

[sgflowers]

I am trying to replicate the look of a 1.2.6 site in 1.3
I managed to create all the elements in a 2nd nav bar but they are positioned wrong

here is my 1.3 development site

http://sulserv.dyndns.org/sgf/

** it will take a while to come up **


here is the existing live

http://www.secretgardenflowers.com

1) how do i move the search form in the nav bar to the center
2) how do i center the new text link elements i created in navbar2 (ie all products etc) so that they are centered?
3) how to i have borders around the nav bars?

Thanks,

I have found the classes for the nav bars i just can't figure out what element to add or modify to drive this

- Kevin

ok so i have most of it done

just the bars are way to big now

i can figure out how to reduce them in size

can anyone assist

here is current

tpl_header http://sulserv.dyndns.org/sgf/tpl_header.php.txt

css http://sulserv.dyndns.org/sgf/stylesheet.css.txt

[clydejones]

You might want to change the height from 1% to say 30px:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	width: 100%;
  border: 1px solid #9a9a9a
}

#navMain2Wrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	width: 100%;
  border: 1px solid #9a9a9a
}

Try it and see how it works.

[sgflowers]

You might want to change the height from 1% to say 30px:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	width: 100%;
  border: 1px solid #9a9a9a
}

#navMain2Wrapper {
	margin: 0em;
	background-color: #C00000;
	font-weight: bold;
	color: #ffffff;
	height: 30px;
	width: 100%;
  border: 1px solid #9a9a9a
}

Try it and see how it works.

damn this is hard to figure out

i reduced it to 20px but then the text moves off the bar into the other bar
what the he** is going on

ahhhhhhhhh

ok i'm allright



can anyone look at the 2 files at tell me what to edit to mimic

the original site - i need to fix the size of the navbars and reposition the text vertically

[clydejones]

Here's my CSS for the top navbars:

#navMainWrapper {margin: 0em; padding: 0 0 2px 0; border-bottom: 1px solid #66006B; background-color: #c459aa; font-weight: bold; height: 20px; width: 100%;}
#navMain  {margin: 0; padding: 3px 0 0 10px; list-style-type: none; text-align: center;	color: #580C84;}

#navMainWrapper2 {margin: 0em; padding: 0 0 2px 0; text-align: center; border-bottom: 1px solid #66006B; background-color: #c459aa; font-weight: bold; height: 20px; width: 100%;}
#navMain2  {margin: 0; padding: 3px 0 0 10px; list-style-type: none; text-align: center;	color: #fff;}

take a look here for a demo