Image above sub-nav

Community Forums Forums Design Tips and Tricks Image above sub-nav

This topic is: not resolved

This topic contains 7 replies, has 2 voices, and was last updated by  braddalton 1 year, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #37455

    katymartin
    Participant
    Post count: 20

    I’m using the Going Green theme and would like to insert a small (33px tall) image BETWEEN the secondary menu nav and the drop-down sub-nav box.

    The effect I’m trying to replicate is the torn paper image as seen here:  http://www.lauracandler.com/blog/  (notice the torn paper with blue pushpin image above the drop-down)

    The dev site I’m looking to add this feature to is: http://netstorepro.com/partners/
    Any help is appreciated.

    http://netstorepro.com/partners/
    #37540

    braddalton
    Participant
    Post count: 9313

    I don’t understand the location. Can you please take a screenshot and point an arrow to it.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #37595

    katymartin
    Participant
    Post count: 20

    Hi Brad… sure thing.  Thanks for taking a look.

    Here’s an example of the effect I’m trying to replicate:  http://netstorepro.com/partners/wp-content/uploads/2013/04/Example.jpg

    * Notice the torn paper image with blue pushpin above the drop-down sub-menu.

    Here’s a screen shot of my site with an arrow to where I’d like to see my image inserted: http://netstorepro.com/partners/wp-content/uploads/2013/04/Example_How.jpg

    #37627

    braddalton
    Participant
    Post count: 9313

    Not sure how to do that to be honest. I do know how to display an image below the nav menu but not in the dropdown unless you use a menu like Mega Menu http://wordpress.org/extend/plugins/jquery-mega-menu/


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #37709

    katymartin
    Participant
    Post count: 20

    The plugin looks cool but doesn’t seem to do what I need.  I’m wondering if the “drop-down” section (ie.  sub-nav) has a css class of it’s own?  Perhaps I can give it a background image?

    #37783

    braddalton
    Participant
    Post count: 9313

    Yeah. All menu items have an i.d and you can also add a class to them as well.

    Go to Screen Options > Show advanced menu properties > CSS Classes and add a custom class there


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

    #38322

    katymartin
    Participant
    Post count: 20

    Thanks Brad… your notes above jogged my memory on that one.  It inspired me to look further at how I could use the CSS classes of the menu to add an image.

    For future reference, here’s what I did to achieve the look I was after.  A bit of a hack, especially if the client moves the menu order around, but it works for now:

     

    .boardmembers:before, .communitybased:before, .seniorpartner:before, .newsletters:before, .events:before {
    display: block;
    content: “”;
    width: 220px;
    height: 36px;
    background: transparent url(“http://netstorepro.com/partners/wp-content/uploads/2013/04/nav_tear_top-220.png”) no-repeat;
    }

    #38348

    braddalton
    Participant
    Post count: 9313

    Thanks for posting this solution Katy.


    Specializing In StudioPress Child Theme Customization.
    500+ StudioPress Tutorials

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.