That is solved by searching online. One search result shows this: http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/. You can opt to use background color instead of images. Adjust to taste
That’s great, thanks mercime.
So I just add this code:
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li{
display: inline;
}
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
.solidblockmenu li a:visited{
color: white;
}
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}
As I’m a complete novice, is there any chance you could tell me which file i’d have to put that in? I want it to appear in exactly the same position as the default theme menu. Do I do anything with the html code in that link?
Cheers
Harry
You’ve got to adjust the code based on the selectors you’ve got in your theme:
So in your style.css file within your child theme’s folder, add this after the lines already there:
`ul#nav {
border: 1px solid #625e00;
border-width: 1px 0;
background: #000066;
}
ul#nav li {
display: inline;
float:none;
margin: 0px;
}
ul#nav li a {
float: left;
padding: 9px 11px;
border-right: 1px solid white;
background: none;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}
ul#nav li.selected a, ul#nav li.current_page_item a {
background: #000000;
color: #ffffff;
}`
Again, adjust to taste.
Great thanks mate – It was all trial and error (I’m sure it’s very intuitive to people who’s seen it before) but that’s the first code i’ve ever edited!
A couple of questions if you have time:
How do I add the hover function? Can I change the text? How do I remove the border underneath?
Ok this is the code I’ve added:
ul#nav {
border: 3px solid #ffffff;
border-width: 2px 2;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
background: #98AFC7;
font-size: 11px;
}
ul#nav li {
display: inline;
float: 0px;
margin: 0px;
font: 11px normal “Tahoma”;
font-weight: bold;
}
ul#nav li a {
float: left;
padding: 5px 10px;
color: #003366;
border-right: 2px solid white;
border-left: 2px solid white;
background: none;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}
ul#nav li.selected a, ul#nav li.current_page_item a {
background: #151B54;
color: #ffffff;
}
ul#nav li a:hover {
color: #151B54;
background: #ffffff;
}
It seems to work. I’ve just added it in my new child theme css file underneath the “inherit default theme…” stuff. Does all that look ok?
I wasn’t able to work out how to remove the border underneath, if you’re able to help?
Sorry I keep reposting, I keep figuring it out.
I added the word “top” to border, so it’s now:
ul#nav {
border-top: 0px solid #ffffff;
border-bottom: 0px;
border-width: 0px 0;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
background: #2554C7;
font-size: 11px;
}
ul#nav li {
display: inline;
float: 0px;
margin: 0px;
font: 11px normal “Tahoma”;
font-weight: bold;
}
ul#nav li a {
float: left;
padding: 5px 10px;
color: #ffffff;
border-right: 0px solid white;
border-left: 0px solid white;
background: none;
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}
ul#nav li.selected a, ul#nav li.current_page_item a {
background: #15317E;
color: #ffffff;
}
ul#nav li a:hover {
color: #151B54;
background: #ffffff;
}
I tried adding “bottom” but couldnt get that to work.
If anyone could check this (it seems to work for me) that would be great.
Thanks
Harry
This seems to have changed the text that appears in the login field
