[Theme: Responsive] Can header menu background be a custom image?

  • I’m assuming the “header menu” is the thing on the that says “Home About Parent Page” here. Instead of black, I’d like a custom image for the background. I imagine the hover effect would have to change to something like a border, instead of a lighter charcoal color.

    Any help with this would be greatly appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hey mnwaterbug! (Minnesota WaterBug? Am I close? haha)

    You can change the background using some good ol’ css ??

    If you’re using a Child Theme, or a custom css plugin (so you don’t lose your options when the theme updates), you can use this:

    .menu {
background: url(yoururlhere);
}

    You could change the hover effect afterwards to match using something like this:

    ul.menu > li:hover {
background: none;
}
.menu a:hover {
background: none;
}

    *Both* of those have to be changed for it to work show up the right way. That will remove the hover background colour completely, but if you wanted to do something else with it, just let me know!

    Happy customizing!

    Thread Starter mnwaterbug

    (@mnwaterbug)

    That worked nearly perfect, thanks!

    I added:

    .menu .current_page_item a,
.menu .current-menu-item a {
    background-color: transparent;
}

    so it wouldn’t cover my picture after an item was selected.

    Now the large menu (for computers/tablets) looks good, but when the browser window is dragged to a narrow width, it converts the menu to a phone version, and my pretty image is replaced with an ugly grey bar. I tried a few different things, but haven’t figured out what I need to change to put my image over that one. Any help would again be appreciated!

    Minnesota Water Bug (10,000 lakes, dontcha know!)

    So close! (and that’s an impressive amount of lakes!)

    This should fix that up:
    .js .main-nav { background: none; }

    Actually, the other element bug, Firebug is pretty great for finding this css stuff ?? Chrome has a built-in inspector as well, or of course the forums are always here!

    Cheers!

    Thread Starter mnwaterbug

    (@mnwaterbug)

    That got me back on the tracks! But I wanted a smaller version of my image, so I coded it like this:

    .js .main-nav {
    background: url('https://example.com/image.jpg');
}

    and it works beautifully!

    Thanks again for your help!!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Theme: Responsive] Can header menu background be a custom image?’ is closed to new replies.