Replace Header Menu Text with Images

  • Anonymous

    #8549

    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

    Anonymous

    #41432

    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");
    }

    Anonymous

    #41433

    #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.

    Anonymous

    #41434

    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");
    }

    Anonymous

    #41435

    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

    Mod

    Kenneth John Odle

    #41436

    What 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.

    Anonymous

    #41437

    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

    Mod

    Kenneth John Odle

    #41438

    border-bottom

    Anonymous

    #41439

    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 🙂

    Mod

    Kenneth John Odle

    #41440

    Cheers! 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.