Jump to content


Photo

navigation buttons - customised


  • Please log in to reply
24 replies to this topic

#1 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 05 April 2012 - 02:48 PM

Hi Guys, I was reading another post: http://www.pagelines...e-background/p1 where the guy was trying to customise his bar, the code given worked great for his website http://www.transitioninstitute.org.uk/ I am looking to do the same thing for my website www.cocogreen.co.uk with the main nav and drop downs, exactly the same as the above post; but all I would change is colours. The code for his menu is below as given in the post: /* NAVIGATION */ #nav_row.main_nav, ul.sf-menu ul li { background: transparent !important; } #primary-nav ul.main-nav { background: #a4a09a; /* Old browsers */ background: -moz-linear-gradient(top, #a4a09a 0%, #857e78 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4a09a), color-stop(100%,#857e78)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4a09a', endColorstr='#857e78',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #a4a09a 0%,#857e78 100%); /* W3C */ border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 0 none !important; width: auto; } .main_nav li { background: transparent !important; border-right: 1px solid #FFFFFF; } .page-item-19 a, .page-item-19 a:active { background: #F57921 !important; border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px; } .page-item-62 a, .page-item-62 a:active, .page-item-62 a:hover { background: #F57921 !important; border-radius: 0px 6px 6px 0px; -moz-border-radius: 0px 6px 6px 0px; -webkit-border-radius: 0px 6px 6px 0px; } .main-nav li a { color: #FFFFFF !important; font-size: 0.85em; } #footer .page-item-19 a, .page-item-19 a:active { background: transparent !important; border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; } #nav_row.main_nav, ul.sf-menu ul li { border: 0 none !important; } The thing is my Pagelines is not the same, I use Eco Pro; I think this guys was platform pro. I have used chrome to find the tags by inspect element and tried to replicate the above for EcoPro. However this is well out of my skill level and each attempt has failed; the best I got is below but its not half way to the other post I was looking at: /* NAVIGATION */ #nav.mnav, ul li { background: transparent !important; } #nav ul.mnav { background: #a4a09a; /* Old browsers */ background: -moz-linear-gradient(top, #a4a09a 0%, #857e78 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4a09a), color-stop(100%,#857e78)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #a4a09a 0%,#857e78 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4a09a', endColorstr='#857e78',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #a4a09a 0%,#857e78 100%); /* W3C */ border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border: 0 none !important; width: auto; } .mnav li { background: transparent !important; border-right: 1px solid #FFFFFF; } .menu-item-98 a, . .menu-item-98 a:active { background: #F57921 !important; border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px; } .menu-item-96 a, . menu-item-96 a:active, . menu-item-96 a:hover { background: #F57921 !important; border-radius: 0px 6px 6px 0px; -moz-border-radius: 0px 6px 6px 0px; -webkit-border-radius: 0px 6px 6px 0px; If anyone can help that would be really be great; I also need to add a small amount of padding to the bottom of the main nav bar. Thanks a lot. Tom

#2 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 05 April 2012 - 03:10 PM

Ok: first of, please use the [ code ] [ /code ] tags (no whitespaces) when posting this much code.
Secondly, the code will work just fine, if you find the right divs. I am not gonna do that for u, just give u a quick insight into css, so u will be able to help urself - allways:
In css you have to tell the stylesheet to which element to attach these attributes. When attributes are within eachother you use a simple space:
 #header #nav ul li {}
would mean, all list objects in an unsorted list that are in the #nav in the #header. When you have something like this:
 #nav.mnav
it means that the #nav WITH the class .mnav should be styled. The code would look like this in HTML:
 <div id="nav" class="mnav">
The only 3rd possibility is to separate them with commas:
 .menu-item-98 a, .menu-item-98 a:active {} /*there was a . to much */
meaning that both the object itsself ant when active should have that styling.
Hope this will help you understand which element is which. Best of luck, and don't hesitate to ask...

#3 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 05 April 2012 - 04:08 PM

Hi Gyoery, Thanks for the run down on that; when I tried the only part that did work was the gradient on the main nav and 1px white spacing between each item them; anything I did to the dropdown or hovers did not really work. If I have a go at figuring it out and post the css code I am trying would be great if you could point out where I am going wrong. Thanks

#4 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 05 April 2012 - 04:53 PM

ok... I'll help:
nav.mnav <-- invalid nav .mnav <--valid
#nav ul.mnav <-- valid (working)
.menu-item-98 a, . .menu-item-98 a:active <-- first valid, second invalid (.)
.menu-item-96 a, . menu-item-96 a:active, . menu-item-96 a:hover <-- First valid, 2+3 invalid (space between . and menu)
Start by fixing that.
PS: Try using a syntax highlighter when editing css... makes everything sooo much easier!!
http://portableapps....epadpp_portable

#5 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 05 April 2012 - 10:36 PM

Hi Gyoery,

Thanks for that advise, I have changed the errors, your right the notepad helps make things look clearer.

Some code works and some doesn't. The code that works is below, please see if there is anything I missed; I did change some colours and border radius:

 /* NAVIGATION */
	
	#nav.mnav, ul li {
	background: transparent !important;
	}
	
	#nav ul.mnav {
	background: #cccccc; /* Old browsers */
	background: -moz-linear-gradient(top, #cccccc 0%, #999999 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#999999)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cccccc 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cccccc 0%,#999999 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #cccccc 0%,#999999 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #cccccc 0%,#999999 100%); /* W3C */
	border-radius: 0px; -moz-border-radius: px; -webkit-border-radius: 0px;
	border: 0 none !important;
	width: auto;
	}
	
	.mnav li {
	background: transparent !important;
	border-right: 2px solid #FFFFFF;
	}

It is the next bit that is confusing me because the class id's are so long; I am not really clear on which aspects to pick out. You can see 2 variations I have tried with item 96 and 98, neither work:

 
	.menu-item-98 li a,.menu-item-98 li a: active {
	background: #F57921 !important;
	border-radius: 6px 0 0 6px; -moz-border-radius: 6px 0 0 6px; -webkit-border-radius: 6px 0 0 6px;
	}
	menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="http://www.cocogreen.co.uk/new-look-website-coming-winter-2011/about-us/"><span>About Us</span></a>
	
	.menu-item menu-item-type-post_type menu-item-object-page menu-item-96 li a,.menu-item menu-item-type-post_type menu-item-object-page menu-item-96  li a: active,.menu-item menu-item-type-post_type menu-item-object-page menu-item-96 li a: menuhover {
	background: #F57921 !important;
	border-radius: 0px 6px 6px 0px; -moz-border-radius: 0px 6px 6px 0px; -webkit-border-radius: 0px 6px 6px 0px;}
	
	.mnav li a {
		color: #FFFFFF !!important;
		font-size: 0.85em;
		}
	
	#footer .page-item-19 a, .page-item-19 a:active {
		background: transparent !important;
		border-radius: 0 !important; -moz-border-radius:  0 !important; -webkit-border-radius:  0 !important;
	}
	
	#nav. mnav, ul.sub-menu ul li {
	  border: 0 none !important;
	}

Making progress but still way off; bearing in mind that I am trying to achieve something like the original link to the institute site.

Thanks for your help

Thomas

#6 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 05 April 2012 - 11:13 PM

all you really need in css is one identifyer as long as it defines all objects you are looking for. To explain it to you a littlebit easier to understand: Imagine you parked your black mustang in a carpark in chinatown in Washington in DC. In HTML it would look like this:
 
	<div id="USA" class="country">
	    <div id="DC" class="state capitol-state eastcoast">
	        <div id="Washington" class="city capital-city">
	              <div id="chinatown" class="district foreign">
	                     <div id="carpark" class="building business secure">
	                          <div id="WDC534" class="mustang black car">
	                          </div>
	                    </div>
	             </div>
	     </div>
	</div>
Now we are trying to tell a person called css to find your car and color it red. There are alot of ways to do it. eg. It would be enough to give it the licenseplate number, and it would find it. But that could in theory change. If we tell him to look for a black mustang, he might find another black mustang. So we tell him where:
#USA #DC #Whashington #chinatown #carpark .mustang {color:red;}
this is too much work, so depending on how many elements you need to define the exact location that is as many as u use.
If I know there is only one Mustang in chinatown, its enough to say
#chinatown .mustang {color:red;} (or if there is more, and I want to color all)
Now let's say, you want to find all black cars in whashington:
#washington .black.car {color:red;}
(notice, there is no space between the black and the car, since they are not under each other but on the same level and linked with an "and" (All elements in Washington that are black AND a car)
Now if you want to find all elements that are black and all elements that are a car it would go something like this:
#washington .black, #washington .car
Hope this gives you a basic understanding of how css works.

Love this example, so I'll leave it as is, and answer ur question as a separate post.

#7 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 05 April 2012 - 11:23 PM

Now to actually answer your question: .menu-item menu-item-type-post_type menu-item-object-page menu-item-96 li a,.menu-item menu-item-type-post_type menu-item-object-page menu-item-96 li a: active,.menu-item menu-item-type-post_type menu-item-object-page menu-item-96 li a: menuhover Is completely wrong, since you copied the classes all on one level from html to css. It would probably work if u put dots instead of the spaces, but it is way to long. If you have a single identifier, just use that. Also, there is no space, when defining linkstates (a:hover not a: hover) and menuhover is not a valid state. You have active, visited, hover, and one more, I just cant remember now. !!important; is invalid, only use one ! #nav. mnav, ul.sub-menu ul li { <-- the . is wrong, and the definition of ul in an ul is too much... You are looking for a list in an unstorted list in another unsorted list that has the .sub-menu class. There is no ul within the ul so ur page wont find your car ;) That's it for now, but I'm really tired, so I might have missed something.

#8 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 06 April 2012 - 12:14 AM

Hi again, Made some more editions as in code below; you can see that again we are making progress. but still some issues. {code] .mnav li { background: transparent !important; border-right: 2px solid #FFFFFF; } .menu-item-98 li a,.menu-item-98 li a:active { background: #F57921 !important; border-radius: 0px 0 0 0px; -moz-border-radius: 0px 0 0 0px; -webkit-border-radius: 0px 0 0 0px;} .menu-item-96 li a,.menu-item-96 li a:active, .menu-item-96 li a:hover { background: #F57921 !important; border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px;} .mnav li a { color: #FFFFFF !important; font-size: 0.85em; } #footer .page-item-19 a,.page-item-19 a:active { background: transparent !important; border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; } #nav.mnav, .sub-menu ul li { border: 0 none !important; } [/code] Remaining issues: 1)hover background colour is white, but i cannot see this in the code above. 2) Current page/Active page is not a different background colour to the rest of the menu as in the institute website. 3) drop down primary level nav is white like the hover 4) drop down colour does not change with hover on second level nav I am sure these are minor changes but I have scratched my head a lot trying to pin point the exact problem. Thanks for all the help Thomas

#9 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 06 April 2012 - 12:53 AM

Have you checked out Simple CSS Lite?

#10 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 06 April 2012 - 07:16 AM

#nav.mnav <-- is still invalid .menu-item-98 li <-- invalid because li is not under menu-item-98 but a class of it ( li.menu-item-98 ) 1) You don't see it cause it is the standard pl hover. 2) active is only the moment it is klicked, not the current page your on. For that there is some .current-menu-item on the active menu point. 3. it looks orange to me? 4. try the above mentioned fixes, and then report back.

#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 April 2012 - 11:02 AM

Hi cocogreen, The site you linked in your first post is using a different theme to you, that site is using Platform Pro and you're using EcoPro. Therefore, can you reply and tell me what colors you want and I'll assist you.

#12 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 06 April 2012 - 10:40 PM

Hi Danny,

Thanks for the offer, you also did the original code in the other post. You can see where I am up to so far with Gyoery help. I was aware that the code would be different from Platorm to Eco.

 /* NAVIGATION */
	
	#nav.mnav, ul li {
	background: transparent !important;
	}
	
	#nav ul.mnav {
	background: #83c033; /* Old browsers */
	background: -moz-linear-gradient(top, #83c033 0%, #4d7105 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c033), color-stop(100%,#4d7105)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #83c033 0%,#4d7105 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #83c033 0%,#4d7105 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #83c033 0%,#4d7105 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83c033', endColorstr='#4d7105',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #83c033 0%,#4d7105 100%); /* W3C */
	border-radius: 0px; -moz-border-radius: px; -webkit-border-radius: 0px;
	border: 0 none !important;
	width: auto;
	}
	
	.mnav li {
	background: transparent !important;
	border-right: 2px solid #FFFFFF;
	}
	
	.current-menu-item a:active {
	background: #83c033 !important;
	border-radius: 0px 0 0 0px; -moz-border-radius: 0px 0 0 0px; -webkit-border-radius: 0px 0 0 0px;}
	
	
	li.menu-item-96 a,li.menu-item-96  a:active,li.menu-item-96  a:hover {
	background: #F57921 !important;
	border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px;}
	
	.mnav li a {
		color: #FFFFFF !important;
		font-size: 0.85em;
		}
	
	#footer .page-item-19 a,.page-item-19 a:active {
		background: transparent !important;
		border-radius: 0 !important; -moz-border-radius:  0 !important; -webkit-border-radius:  0 !important;
	}
	
	#nav.mnav, .sub-menu ul li {
	  border: 0 none !important;
	}/* NAVIGATION */
	
	#nav.mnav, ul li {
	background: transparent !important;
	}
	
	#nav ul.mnav {
	background: #83c033; /* Old browsers */
	background: -moz-linear-gradient(top, #83c033 0%, #4d7105 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c033), color-stop(100%,#4d7105)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #83c033 0%,#4d7105 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #83c033 0%,#4d7105 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #83c033 0%,#4d7105 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83c033', endColorstr='#4d7105',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #83c033 0%,#4d7105 100%); /* W3C */
	border-radius: 0px; -moz-border-radius: px; -webkit-border-radius: 0px;
	border: 0 none !important;
	width: auto;
	}
	
	.mnav li {
	background: transparent !important;
	border-right: 2px solid #FFFFFF;
	}
	
	.current-menu-item a:active {
	background: #83c033 !important;
	border-radius: 0px 0 0 0px; -moz-border-radius: 0px 0 0 0px; -webkit-border-radius: 0px 0 0 0px;}
	
	
	li.menu-item-96 a,li.menu-item-96  a:active,li.menu-item-96  a:hover {
	background: #F57921 !important;
	border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; -webkit-border-radius: 0px 0px 0px 0px;}
	
	.mnav li a {
		color: #FFFFFF !important;
		font-size: 0.85em;
		}
	
	#footer .page-item-19 a,.page-item-19 a:active {
		background: transparent !important;
		border-radius: 0 !important; -moz-border-radius:  0 !important; -webkit-border-radius:  0 !important;
	}
	
	#nav.mnav, .sub-menu ul li {
	  border: 0 none !important;
	}

The colours I would like to keep as follows (as in the above code for hex colours).

> The orange for the current active page
> Green Gradient for primary bar
> Orange for rollover item
> Dropdown the same as the institute page from the original post with the arrow icons.

The other things I need to do is create a white space between the nav bar and the feature slider/highlight. Also I would like to increase the bar height so that it is thicker.

I also noticed in the code above that if you rollover an item a small vertical bar to the left of each menu item does not change colour.

If you guys can help then thank you in advance.

Thomas

#13 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 07 April 2012 - 07:34 AM

For the colors: Use any colormixer (http://www.w3schools..._colormixer.asp) --> enter your color you want to change, eg. 83c033. Change it to a color of your liking and replace the color in your css. Adding whitespace under your nav: #primary-nav .content-pad {padding-bottom:200px;} /*Play with the value*/ Your last question I cannot see... I don't see a vertical line.. either u already fixed it, or u are using a different browser. I'm on FF, please post some screenshots...

#14 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 07 April 2012 - 09:07 AM

Hi Gyoery,

Got it with the colours except I am not sure which class related to which action; i.e. current page colour nav, rollover, menu item colour rollover, drop down colour and rollover etc.

I also tried the primary-nav as you put in your post for the padding. It didnt work.

for the vertical lines you can see in the screenshot below from Chrome, it is also the same in safari Posted Image

The screenshot is taken with a pointer rollover on the contact us page, you can see the green vertical bar here on about us and contact us.

Thanks

#15 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 07 April 2012 - 09:46 AM

#primary-nav.content-pad {padding-bottom:200px;} <-- wrong #primary-nav .content-pad {padding-bottom:200px;} <-- right at the moment I can't really see where the li item gets moved to the right by 2-3 px but somewhere in the css it does (not necessarily your css) Also: Where are you adding your css? Is it in the custom CSS section?? Cause your custom css section should be the last css being added, but it is not.

#16 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 07 April 2012 - 02:57 PM

Hi Gyoery,

Yes all CSS is in the Custom CSS within the ecopro admin that I am putting. I have not changed any stylesheets.

The spacing made no difference; I sorted it by putting the following for the padding:

 #nav.clearfix {margin-top:4px; margin-bottom: 15px;}

There are still some issues outstanding:

1) Current page colour on menu
 .current-menu-item a:active {
	background: #83c033 !important;
	border-radius: 0px 0 0 0px; -moz-border-radius: 0px 0 0 0px; -webkit-border-radius: 0px 0 0 0px;}
This is what I put, I'm sure it isn't right.

2) Rollover colour is white for the main bar; I cannot identify where the tags are for the rollover colour in the code.

3) Submenu dropdown rollover colour, again I cannot identify the tags to change the colour

4) Nav bar height, would like to thicken the height still.

5) The issue we talked about is more identifiable with the padding around the bar; where the text is not central and there is a vertical bar as in the screenshot; if anyone else can find the code to sort this out that would be much appreciated.

Thanks

Tom

#17 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 April 2012 - 04:32 PM

1)
 .current-menu-item a:active {
	background: #83c033 !important;
	border-radius: 0px 0 0 0px; -moz-border-radius: 0px 0 0 0px; -webkit-border-radius: 0px 0 0 0px;}

^ In this code, I don't think you need a:active. Also, if rounded corners are not going to be used (since you've added 0px values to each corner), you can remove all border-radius attributes.

2 and 3) You'll need to use this CSS property to change the hover behavior for the menu item and submenu items: a:hover. Have you been using Firebug to inspect for the selectors you need to use?

4) Change the height using this attribute in the CSS: height: #px;

5) Do you just want to change the color of this vertical bar?

#18 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 07 April 2012 - 09:57 PM

Hi Catrina,

I have been trying different things; yes firebug helps a bit, but i lack the knowledge on css, its a long time since doing a website, I was very familiar with html in the past but CSS is new to me.

1) This doesnt work at all in the custom CSS ; so the active page is the same colour as the other buttons

2) I sorted this out with using the individual menu items for the parent bar
 li.menu-item-96 a {background: #83c033 !important;}
	li.menu-item-96 a:hover   {background: #F57921 !important;}
	li.menu-item-96 a:active  {background: #F57921 !important;}

3) The submenu is more difficult for me, I have tried several variants of the tags; any help on how to apply a colour to all the submenus rollovers would be great help.

4) I put this into the the custom CSS
 .mnav li a {
		color: #FFFFFF !important;
		font-size: 0.95em;
	        height: 35px
		}

This did change the primary menu height, but the text was not central both left and right and top and bottom, and it messed up making the menu 41px, which totally confused me. It also moved the bar up so it overlapped the phone number graphic in the header. So still unresolved.

5) I want the vertical bar to be the same colour as the buttons, both when static and when on rollover (So two colours in 2 scenarios if you understand?)

The other issue which I missed but mentioned above is the text in each bar item is not central.

Thanks a lot

Tom

#19 cocogreen

cocogreen

    Advanced Member

  • Members
  • PipPipPip
  • 42 posts

Posted 07 April 2012 - 09:58 PM

Also when I changed the height under those tags, the submenu heights reduced.

#20 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 April 2012 - 10:29 AM

Hi CoCogreen, Would it be possible to reply and provide a screenshot of how you want this to look, as all the custom CSS you have at the moment, is making it difficult to actually see what you want.