[Resolved] Navigation bar ribbon effect

[Sarah Pink]

My client has asked for the nav bar to have the ribbon effect like this one:
http://www.raggy-tag.com

Is there anyway I can do this in GP premium?

[Tom]

Hi there,

You would have to manually code this in.

You could either use CSS, or add images inside the navigation using the generate_inside_navigation hook.

For example:

add_action('generate_inside_navigation','generate_add_ribbons');
function generate_add_ribbons()
{
   ?>
      <img src="LEFT RIBBON URL" class="left-ribbon" />
      <img src="RIGHT RIBBON URL" class="right-ribbon" />
   <?php
}

Then you could add this CSS, and adjust as needed:

.inside-navigation {
      position: relative;
}
.left-ribbon {
      position: absolute;
      left: -10px;
      top: 0;
}
.right-ribbon {
      position:absolute;
      right: -10px;
      top: 0;
}

Hope this helps get you started 🙂

[Nora]

Hi there,

Really enjoying the theme! Have a question: I would like to change the height of the menu/navigation bar. I have managed to change the bar height in the custom css, but than the menu items did no longer align and fell below the bar. DO you have any advice?
My site is still private/not visible.

Thanks,
Nora

[Author]

Posts