Page 1 of 1
Styling the menu
Posted: Thu May 13, 2010 8:02 pm
by electrifire
Hi
I'm trying to implement the standard drop down menu which I have done but the menu needs styling but not sure why the menu had a white background, so you couldn't see the menu so I changed it to a random colour and the whole header changes here
www.electrifire.co.uk/cms
What is causing the whole header to change colour I just want a colour scheme like this
www.electrifire.co.uk
Re: Styling the menu
Posted: Thu May 13, 2010 8:27 pm
by uniqu3
First i would fix CSS and xHTML issues:
http://jigsaw.w3.org/css-validator/vali ... k%2Fcms%2F
http://validator.w3.org/check?verbose=1 ... k%2Fcms%2F
And to fix the menuwrapper height add either height:something px; to #menuwrapper in CSS or add before in template.
Re: Styling the menu
Posted: Sat May 15, 2010 3:58 am
by Dr.CSS
Install Firefox with the Web Dev. tool bar, use the outline current element to see what things are called, use edit css to see what has what colors etc. then change till it looks good, copy paste into style sheet...
Re: Styling the menu
Posted: Wed May 19, 2010 8:14 pm
by electrifire
thanks the ff developer tools are much better then google chrome

Re: Styling the menu
Posted: Wed May 19, 2010 9:23 pm
by electrifire
Just one thing I'm stuck on now
The menu remains hidden until you hover over it, I've gone through the css and found this;
ul#primary-nav ul {
/* make the ul stay in place so when we hover it lets the drops go over the content below else it will push everything below out of the way */
position: absolute;
/* top being the bottom of the li it comes out of */
top: auto;
/* keeps it hidden till hover event */
display: none;
I tried removing this line of code but it still remains hidden, I also found a part which says if the font weight is bold:
ul#primary-nav li a.menuactive {
color: #000;
/* bold to set it off from non active */
font-weight: bold;
I have tried to change some font weights but nothing I do seems to show the rest of the menu other then the home page
Oh 1 last thing bullet points, the menu is showing bullet points but found this code here:
ul#primary-nav, ul#primary-nav ul {
/* remove any default bullets */
list-style-type: none;
margin: 0;
Doesn't that say there will be no bullet points?
www.electrifire.co.uk/cms and I'm using the Navigation: CSSMenu - Horizontal menu
Re: Styling the menu
Posted: Thu May 20, 2010 6:19 am
by Peciura
The menu remains hidden until you hover over it...
Obviously white object looks invisible on white background . Set background for all links in #primary-nav
Code: Select all
ul#primary-nav li a {
background: url(uploads/ngrey/nav.png) repeat-x left -50px;
}
change background position on any subsequent element if needed ('a.menuactive' in this case)
Code: Select all
ul#primary-nav li a.menuactive {
background-position: left 0px;
}
Re: Styling the menu
Posted: Thu May 20, 2010 6:22 pm
by electrifire
ah thanks I knew white was causing it to go wrong but I was looking for the color code for white as thought it was how its styled.
Any advice on the bullet points?
Edit
I changed the background image and think I have the menu styled how I want but the parent tabs only become active when hovered over and I can't seem to change it so its active all the time, Fire fox developer tools show its set to transparent but I cant find this in the menu css
any ideas, I just want the menu to be active all the time
Re: Styling the menu
Posted: Fri May 21, 2010 8:14 pm
by electrifire
little update, I've managed to edit the menu so there is no active page but the menu button doesn't display the image until its hovered over, I tried copying and pasting the css from hover to parent but no matter what I do I can get the menu to display the grey image until the mouse is hovered over.
I cant seem to shift the bullet points either
Any help is appreciated
Re: Styling the menu
Posted: Fri May 21, 2010 9:03 pm
by Dr.CSS
Do you have an image of what it should look like?...
ul {list-style:none} is code to remove the bullets...
Re: Styling the menu
Posted: Fri May 21, 2010 9:27 pm
by electrifire
Thanks for the bullet point the default css had this:
ul#primary-nav, ul#primary-nav ul {
/* remove any default bullets */
list-style: none;
But what ever I did wouldn't remove the bullet points!
The images is already there but only when you hover over rather then always there
Re: Styling the menu
Posted: Fri May 21, 2010 9:31 pm
by Dr.CSS
I see nothing that shows me what you are trying to achieve, look of final product...
Re: Styling the menu
Posted: Fri May 21, 2010 9:51 pm
by electrifire
let me add linky
www.electrifire.co.uk/cms
if you hover over the electrical tab it turns grey and expands down, I want the grey to be shown behind the word electrical all the time