Replace Header Menu Text with Images
-
Hi
Can someone help a newbie make the text menu an image based menu? I found this but it doesn’t give me the css code details.
https://forum.graphene-theme.com/graphene-support/change-nav-menu-text-to-pictures-1
I figured out how to turn off the text but now how do I put the graphics in?
#header-menu > li > a > strong {
display: none; /* This hides the text */
}what next?
Thanks
Jamie
Ok here’s my update, I found out how to get the images to appear on hover but they won’t stay on click or on a current page it still shows the default text. Any thoughts?
#header-menu {
background: url("http://www.lloydphillips.com/private/wp-content/uploads/2013/12/nav-red-inactive.jpg");
font-size: 14px !important;
font-weight: bold !important;
list-style-type: none !important;
}
#header-menu :hover {
background: url("http://www.lloydphillips.com/private/wp-content/uploads/2013/12/nav-red-active.jpg");
}
#header-menu :current-page-item {
background: url("http://www.lloydphillips.com/private/wp-content/uploads/2013/12/nav-red-active.jpg");
}#header-menu :current-page-item
is invalid. Change it to#header-menu .current-page-item
. Also add!important
to#header-menu
background.Put code in between backtick (
Code:`) characters. It’s usually located above the Tab key on your keyboard.
Hi, I have added the code and I see things happening but it is not what I require.
I need to have 4 image buttons that hover and when selected they need to stay in the current state, here is my page
the code presently looks like this
#header-menu {
background: url("http://www.lloydphillips.com/private/wp-content/uploads/2013/12/nav-red-inactive.jpg") !important;;
font-size: 14px !important;
font-weight: bold !important;
list-style-type: none !important;
}
#header-menu :hover {
background: url("http://www.lloydphillips.com/private/wp-content/uploads/2014/01/projects.jpg");
}
#header-menu .current-page-item {
background: url("http://www.lloydphillips.com/private/wp-content/uploads/2014/01/projects_on.jpg");
}I am almost there 🙂
The one last piece is not working, the current-page item….
li#menu-item-204 a {
display: block;
background-image:url('http://www.lloydphillips.com/private/wp-content/uploads/2014/01/news.jpg');
background-repeat: no-repeat;
width: 84px;
height: 35px;
}
li#menu-item-204 a:hover {
display: block;
background-image:url('http://www.lloydphillips.com/private/wp-content/uploads/2014/01/news_on.jpg');
background-repeat: no-repeat;
width: 84px;
height: 35px;
}
li#menu-item-204 a:current-page-item {
display: block;
background-image:url('http://www.lloydphillips.com/private/wp-content/uploads/2014/01/news_on.jpg');
background-repeat: no-repeat;
width: 84px;
height: 35px;
}any thoughts on my error? -thanks Jamie
ModWhat you are trying to achieve can be accomplished without the use of images. Just change the color of the text and save all those extra http requests.
HI Kenneth, thanks for the reply, I am new to CSS. I have learned from trial and error.
My client wants to have each menu item have a thick red line when I hover over it and then stay once you are on the current page.
The site is here you can see the line in the header menu, http://www.lloydphillips.com/private/?page_id=7
Is there a way to have a background image do the job of the red line? so the css text show over top of the bg image.
thanks
Jamie
Modborder-bottom
Ok, thanks for the tough love, I have been able to do my homework, all the fancy stuff is with this piece of code
#header-menu .current-menu-item {
border-bottom: #e24403 !important;
border-style:solid !important;
border-bottom-width:thick !important;
}It makes the thick red underline under the text in my header menu.
thanks, this case is closed 🙂
ModCheers! Marking thread as resolved. You can do this yourself as well.
Viewing 10 posts - 1 through 10 (of 10 total)
- You must be logged in to reply to this topic.